[MMB-195] Rewrite spaces demo into React (#92)

Rewrite the Spaces demo into React.

---------

Co-authored-by: Dominik Piatek <dominik.piatek@ably.com>

demo/.env.example

@@ -0,0 +1 @@
+ABLY_API_KEY=

demo/.eslintrc

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": ["import"],
+  "overrides": [
+    {
+      "files": ["**/*.{ts,tsx}"],
+      "rules": {
+        "import/extensions": ["off"]
+      }
+    }
+  ]
+}

demo/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

demo/README.md

@@ -6,10 +6,12 @@ An app showcasing the usage of different multiplayer features enabled by the spa
 
 First, create a `.env` file in this folder, based on the `.env.example`. You will need environment variables listed in there.
 
-You will need [node.js](https://nodejs.org/en/) & the [netlify cli](https://docs.netlify.com/cli/get-started/) installed. The demo has separate dependencies to the library, you will need to run `npm install` in this folder as well as the root one.
+You will need [node.js](https://nodejs.org/en/). The demo has separate dependencies to the library, you will need to run `npm install` in this folder as well as the root one.
 
 To run the development server, do `npm run start`. This will start a Netlify dev server, and will make sure the auth endpoint in `api` works correctly locally.
 
 ## Deployment
 
-To deploy, you will need access to the Ably Netlify account. If you have that, [login to Netlify on your machine with the CLI](https://docs.netlify.com/cli/get-started/#obtain-a-token-with-the-command-line). The run `npm run deploy` to deploy a test site and `npm run deploy:production` to deploy the production site.
+To deploy, you will need access to the Ably Netlify account. Run `npx netlify login` to [login locally](https://docs.netlify.com/cli/get-started/#obtain-a-token-with-the-command-line).
+
+We use Netlify [manual deploys](https://docs.netlify.com/site-deploys/create-deploys/), so do connect the repo to the github repo when prompted by the CLI. Run `npm run deploy` to deploy a test site and `npm run deploy:production` to deploy the production site.

demo/api/ably-token-request/index.ts

@@ -20,7 +20,7 @@ Please see README.md for more details on configuring your Ably API Key.`);
     };
   }
 
-  const clientId = event.queryStringParameters['clientId'] || process.env.DEFAULT_CLIENT_ID || 'NO_CLIENT_ID';
+  const clientId = event.queryStringParameters?.['clientId'] || process.env.DEFAULT_CLIENT_ID || 'NO_CLIENT_ID';
   const client = new Ably.Rest(process.env.ABLY_API_KEY);
   const tokenRequestData = await client.auth.createTokenRequest({ clientId: clientId });
 

demo/api/ably-token-request/package.json

@@ -4,7 +4,7 @@
   "description": "ably token request",
   "main": "index.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "serve": "netlify functions:serve"
   },
   "keywords": [
     "netlify",