Merge pull request #2419 from ably/EDU-1816-Create-an-NPM-workspace-usage-for-one-example

[EDU-1816] - Add NPM Workspaces to examples

Author: GregHolmes

examples/pub-sub-history/react/.env.example renamed to examples/.env.example

@@ -1 +1,2 @@
+VITE_PUBLIC_ABLY_KEY=
 NEXT_PUBLIC_ABLY_KEY=

examples/auth-generate-jwt/javascript/README.md

@@ -13,7 +13,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/javascript/
+cd /examples/
 ```
 
 3. Install dependencies:
@@ -25,13 +25,13 @@ yarn install
 4. Run the frontend client:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-javascript
 ```
 
 5. In a new tab, change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/server/
+cd /examples/
 ```
 
 6. Rename the environment file:
@@ -40,7 +40,7 @@ cd /examples/auth-generate-jwt/server/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `ABLY_API_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -51,7 +51,7 @@ yarn install
 9. Run the backend server:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-server
 ```
 
 10. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.

examples/auth-generate-jwt/javascript/package.json

@@ -1,23 +1,11 @@
 {
-  "name": "auth-request-token",
+  "name": "auth-generate-jwt-javascript",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "dotenv": "^16.4.5",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3"
-  },
-  "dependencies": {
-    "ably": "^2.3.1",
-    "nanoid": "^5.0.7",
-    "vite": "^5.4.12"
   }
 }

examples/auth-generate-jwt/page.md

@@ -43,7 +43,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/react/
+cd /examples/
 ```
 
 3. Install dependencies:
@@ -55,13 +55,13 @@ yarn install
 4. Run the frontend client:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-react
 ```
 
 5. In a new tab, change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/server/
+cd /examples/
 ```
 
 6. Rename the environment file:
@@ -70,7 +70,7 @@ cd /examples/auth-generate-jwt/server/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -81,7 +81,7 @@ yarn install
 9. Run the backend server:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-server
 ```
 
 10. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result.
@@ -97,7 +97,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/javascript/
+cd /examples/
 ```
 
 3. Install dependencies:
@@ -109,13 +109,13 @@ yarn install
 4. Run the frontend client:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-javascript
 ```
 
 5. In a new tab, change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/server/
+cd /examples/
 ```
 
 6. Rename the environment file:
@@ -135,7 +135,7 @@ yarn install
 9. Run the backend server:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-server
 ```
 
 10. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.
@@ -144,7 +144,7 @@ yarn run dev
 
 // React
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
 
 // Javascript
 

examples/auth-generate-jwt/react/README.md

@@ -13,7 +13,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/react/
+cd /examples/
 ```
 
 3. Install dependencies:
@@ -25,13 +25,13 @@ yarn install
 4. Run the frontend client:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-react
 ```
 
 5. In a new tab, change directory:
 
 ```sh
-cd /examples/auth-generate-jwt/server/
+cd /examples/
 ```
 
 6. Rename the environment file:
@@ -40,7 +40,7 @@ cd /examples/auth-generate-jwt/server/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `ABLY_API_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -51,7 +51,7 @@ yarn install
 9. Run the backend server:
 
 ```sh
-yarn run dev
+yarn run auth-generate-jwt-server
 ```
 
 10. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result.

examples/auth-generate-jwt/react/package.json

@@ -1,28 +1,11 @@
 {
-  "name": "react",
+  "name": "auth-generate-jwt-react",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
-  },
-  "dependencies": {
-    "ably": "^2.4.0",
-    "nanoid": "^5.0.9",
-    "next": "14.2.21",
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
   }
 }

examples/auth-generate-jwt/server/.env.example

@@ -1,24 +1,11 @@
 {
-  "name": "server",
+  "name": "auth-generate-jwt-server",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "dev": "ts-node src/server.ts",
     "build": "tsc",
     "start": "node dist/server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@types/express": "^5.0.0",
-    "@types/node": "^22.10.1",
-    "ably": "^2.5.0",
-    "cors": "^2.8.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.7.2"
   }
 }

examples/auth-generate-jwt/server/package.json

@@ -1,9 +1,10 @@
 import express from 'express';
+import path from 'path';
 import dotenv from 'dotenv';
 import cors from 'cors';
 import crypto from 'crypto';
 
-dotenv.config({ path: '.env.local' });
+dotenv.config({ path: path.resolve(__dirname, '../../../.env.local') });
 
 const app = express();
 const port = 3001;
@@ -22,11 +23,11 @@ function base64urlEncode(str: string) {
 app.get('/generate-jwt', async (_req, res) => {
   console.log('1 - /generate-jwt endpoint called');
 
-  const ablyApiKey = process.env.ABLY_API_KEY || '';
+  const ablyApiKey = process.env.VITE_PUBLIC_ABLY_KEY || '';
   const [apiKeyName, apiKeySecret] = ablyApiKey.split(':');
   try {
     if (ablyApiKey === '') {
-      throw new Error('ABLY_API_KEY is not set');
+      throw new Error('VITE_PUBLIC_ABLY_KEY is not set');
     }
 
     const header = {