Document and Clean Up (#8)

* remove package-lock from vue client

* rename server
fix dependencies
update command

* move test.js to separate folder and provide a README

* move react-test.html to a separate folder and provide a README

* update vue readme
provide info about region

* update react README
default to App
update comments about script region
remove unused react boilerplate code

* update Angular README
add comments about script region

* update top-level README

Author: ElectronicBlueberry

README.md

@@ -1,20 +1,35 @@
-# em-beddable example
-A simple example of how to Embed the Embeddable.com web component in your site
+# em-beddable Web Component Example
 
-# steps
+A simple example of how to Embed the Embeddable.com Web Component in your website.
+There are currently 5 examples in this repository:
 
-To test your Embedded web component:
+- [HTTP server with html response](http-server/README.md)
+- [simple React.js example](static-react/README.md)
+- [React.js using "Create React App"](client-react/README.md)
+- [Angular](client-angular/README.md)
+- [Vue](client-vue/README.md)
 
-1. click "Publish" on your Embeddable dashboard to get your `API_KEY` and `EMBEDDABLE_ID`
-2. clone/download this repo
-3. update `src/test.js` to use your `API_KEY` and `EMBEDDABLE_ID`
-4. run `node src/test.js`
-5. open `localhost:8080` to see your embedded dashboard
+Also includes a simple node server that uses the [tokens API](https://docs.embeddable.com/deployment/tokens-api).
 
-# documentation
+## Prerequisites
 
-[here](https://trevorio.notion.site/Embedding-an-Embeddable-2e7b7c09909f47ee9d3fee64f4e6fcd9)
+Most examples require [Node.js](https://nodejs.org) version 20 or newer to be installed.
 
-# react.js
+## Steps
 
-There is a simple react example in `src/react-test.html` (though you'll need to update the `token` manually)
+1. clone or download this repository
+2. choose an example, and follow the README file contained in it
+
+## Token Server
+
+Two examples, `client-react` and `client-vue`, require the
+token server included in this repository to be running.
+
+### Token Server Steps
+
+1. click "Publish" on your Embeddable dashboard to get your `API_KEY`
+2. update `token-server/.env` to use your `API_KEY`, and optionally set the `USER_KEY`
+3. set the `BASE_URL`, and optionally the `SECURITY_CONTEXT` in `token-server/index.js`
+4. run `npm i` to install dependencies
+5. run `npm run token-server`
+6. follow the instructions in the `client-*` folder to run a client

client-angular/README.md

@@ -1,17 +1,12 @@
-# AngularExample
+# Angular Example
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.4.
+Example for how to embed the Embeddable Web Component in an Angular app.
 
-## Development server
+## Steps
 
-To start a local development server, run:
+1. run `npm i`
+2. in `src/index.html` make sure you are loading the embed from the correct region
+3. in `src/app/app.ts` set the `BASE_URL`, `API_KEY`, `EMBEDDABLE_ID` and `USER_KEY`
+4. run `npm run start`
 
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Embeddable
-
-This is an example repo for [Embeddable](https://embeddable.com), the developer toolkit for customer-facing analytics. If you're looking to embed into an Angular app, this should help you get started. If you're looking for other information, you should [check out our docs!](https://docs.embeddable.com/)
+Note: This example does not use the token server from this repository.

client-angular/angular.json

@@ -92,5 +92,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

client-angular/package-lock.json

@@ -1,6 +1,6 @@
 /*
  *
- * NOTE: This demo does not use the server in `/server` - that's for the react client
+ * NOTE: This demo does not use the server in `/server` - that's for the react and vue clients
  *
  */
 import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';

client-angular/src/app/app.ts

@@ -6,8 +6,14 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script type="module" src="https://embed.embeddable.com/js/v1/?region=eu">
-  </script>
+  <!--
+    If you are on the EU server, please uncomment that tag and comment
+    out the US tag.
+  -->
+  <script type="module" src="https://embed.embeddable.com/js/v1/?region=US"></script>
+  <!--
+  <script type="module" src="https://embed.embeddable.com/js/v1/?region=EU"></script>
+  -->
 </head>
 <body>
   <app-root></app-root>

client-angular/src/index.html

@@ -1,65 +1,32 @@
-# Getting Started with Create React App
+# React App Example
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Example for how to embed the Embeddable Web Component in a React.js app created using [Create React App](https://create-react-app.dev/).
 
-## Available Scripts
+This example contains two versions. One showing how to embed a single dashboard,
+and another showing how to control 3 embeddable in tabs from a single embeddable.
 
-In the project directory, you can run:
+## App Example
 
-### `npm start`
+This example is active by default. It shows all dashboards available to you as buttons,
+and allows you to preview how to embed any of them.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+### App Steps
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+1. run `npm i`
+2. in `public/index.html` make sure you are loading the embed from the correct region
+3. make sure the token server is running. It can be ran from the **parent folder** using `npm run token-server`
+4. run `npm start`
 
-### `npm run build`
+## Multi Tab Example
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+This example demonstrates how to use one Embeddable to control any amount of other Embeddables,
+making use of [variables](https://docs.embeddable.com/deployment/interactivity#pass-in-and-update-variables).
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### Multi Tab Steps
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+1. run `npm i`
+2. in `public/index.html` make sure you are loading the embed from the correct region
+3. in `src/index.js` replace `<App>` with `<MultiTabApp>`
+4. in `src/MultiTabApp.js` replace the IDs in the `embeddables` constant with the IDs of the dashboards you'd like to use
+5. make sure the token server is running. It can be ran from the **parent folder** using `npm run token-server`
+6. run `npm start`

client-react/README.md

@@ -9,34 +9,19 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
     <!--
-      If you are on the EU server, please uncommented that tag and comment
+      If you are on the EU server, please uncomment that tag and comment
       out the US tag.
     -->
     <script
       type="module"
-      src="https://api.us.embeddable.com/js/v1/">
+      src="https://embed.embeddable.com/js/v1/?region=US">
     </script>
     <!--
     <script
       type="module"
-      src="https://api.eu.embeddable.com/js/v1/">
+      src="https://embed.embeddable.com/js/v1/?region=EU">
     </script>
     -->
   </head>