Add check config command (#393)

.env.dist

@@ -13,7 +13,9 @@ VITE_NO_WELCOME=0
 # Proxify backend
 VITE_USE_PROXY=1
 
-# Ricochetjs siteid you want to use
+# The Ricochet.js site Id you want to use. This value is important!
+# Make this value is the same that the one you used to register the site
+# in Ricochet.js server.
 VITE_RICOCHET_SITEID=airboardgame
 
 # Set to 1 to allow openVidu video conference

backend/.env.dist

@@ -54,8 +54,9 @@ EMAIL_FROM=
 # Wire.io port configuration
 WIREIO_PORT=4051
 
-# Secret key generated by Ricochet.js when you've registered the site.
-RICOCHET_SITE_KEY=
-
 # To show better logs set to 1 (then use npm run ricochetjs:pino)
 USE_PINO=0
+
+# Secret key generated by Ricochet.js when you've registered the site.
+# /!\ You MUST customize this value after registering the site to Ricochet.js
+RICOCHET_SITE_KEY=

checkConfig.mjs

@@ -0,0 +1,127 @@
+import fetch from "node-fetch";
+import dotenv from "dotenv";
+import { io } from "socket.io-client";
+import fs from "fs";
+
+dotenv.config();
+dotenv.config({ path: "backend/.env" });
+
+const siteId = process.env.VITE_RICOCHET_SITEID;
+const socketURL = process.env.VITE_SOCKET_URL;
+const socketPath = process.env.VITE_SOCKET_PATH || "/socket.io";
+const apiEndpoint = process.env.VITE_API_ENDPOINT;
+const fileStore = process.env.FILE_STORE_BACKEND;
+const jsonStore = process.env.JSON_STORE_BACKEND;
+
+const check = async () => {
+  if (!siteId) {
+    console.log(
+      "🚨 You must define a VITE_RICOCHET_SITEID environment variable."
+    );
+    process.exit(1);
+  }
+
+  try {
+    const result = await fetch(`${apiEndpoint}/${siteId}/`);
+    // console.log(result);
+    if (result.status !== 400) {
+      console.log(
+        "🚨 The Ricochet.js server doesn't respond correctly. " +
+          `Have you started it? Tested url: ${apiEndpoint}`
+      );
+      return;
+    }
+    const data = await result.json();
+
+    if (!data.message.includes("X-Ricochet-Origin")) {
+      console.log(
+        "🚨 The Ricochet.js server doesn't respond correctly. " +
+          `Have you started it? Tested url: ${apiEndpoint}`
+      );
+      return;
+    }
+
+    const patch = await fetch(`${apiEndpoint}/_register/${siteId}`, {
+      method: "PATCH",
+    });
+
+    if (patch.status === 404) {
+      console.log(
+        `🚨 The '${siteId}' doesn't seem to exists on Ricochet.js. ` +
+          "Have you registered it?"
+      );
+      return;
+    }
+
+    if (patch.status === 400) {
+      console.log(
+        `✅ Ricochet.js is running and site ${siteId} seems to be registered.`
+      );
+    }
+  } catch (e) {
+    if (e.code === "ECONNREFUSED") {
+      console.log(
+        "🚨 The Ricochet.js server doesn't seem to be up and running. " +
+          `Have you started it? Tested url: ${apiEndpoint}`
+      );
+      return;
+    }
+  }
+
+  if (!fs.existsSync("./public/ricochet.json")) {
+    console.log(
+      "🚨 The './public/ricochet.json' file is missing. " +
+        "Have you generated it? \nHint: from backend/ dir execute `npm run watch`"
+    );
+    return;
+  }
+
+  if (jsonStore === "memory") {
+    console.log(
+      "⚠️ The Ricochet.js JSON store is in memory. " +
+        "Remember that you'll lost all changes and registered sites each time you stop the server."
+    );
+  }
+
+  if (fileStore === "memory") {
+    console.log(
+      "⚠️ The Ricochet.js File store is in memory. " +
+        "Remember that you'll lost all files each time you stop the server."
+    );
+  }
+
+  const testConn = new Promise((resolve, reject) => {
+    const socket = io(socketURL, {
+      transports: ["websocket"],
+      path: socketPath,
+    });
+
+    const out = setTimeout(() => {
+      reject("failed");
+      socket.disconnect();
+    }, 5000);
+
+    socket.on("connect", () => {
+      resolve("ok");
+      clearTimeout(out);
+      socket.disconnect();
+    });
+  });
+
+  try {
+    await testConn;
+    console.log("✅ Wire.io server is up and running.");
+  } catch (e) {
+    console.log(
+      "🚨 The Wire.io server hasn't responded in 5s. " +
+        `Have you started it? Tested url: ${socketURL}${socketPath}`
+    );
+    return;
+  }
+
+  console.log(
+    "\n👏 Congrats, everything works fine!\n\nDo you still have an issue? Go to discord channel for more help."
+  );
+};
+
+check();

docs/dev.md

@@ -141,7 +141,11 @@ cp .env.dist .env
 ```
 
 Customize the `.env` file. Default should be fine if you haven't modified
-server configuration host and port.
+server configuration host, port and Site Id.
+
+⚠️ Make sure you have the same value for `VITE_RICOCHET_SITEID` as the `Site Id` you
+ used to register the site during the *Fill the site creation form* of backend
+ installation.
 
 Then you can start the client:
 
@@ -156,10 +160,24 @@ Now you should have two terminals:
 - first with:
   - the Ricochet.js server. Backend logs can be found here.
   - a `wire.io` server running
-  - and the auto build on change for airboardgame backend files
+  - and the auto build on change for Airboardgame backend files
 - and another with web-frontend server
 
-# (Optionnal) More details on server
+# Troubleshooting
+
+If you have troubles getting everything to work, you can first try to
+launch the check script from the project root directory:
+
+```sh
+npm run check
+```
+
+It should helps you to point out what's wrong with your installation.
+
+If you still can't make it works, join us on [discord](https://discord.gg/EsZGJ5h6UA)
+or through [github](https://github.com/jrmi/airboardgame/discussions).
+
+# (Optional) More details on server
 
 When you start the backend part of Airboardgame, you need to start 3 commands.
 You can start all by using the `npm run all` command but sometimes you may want
@@ -226,8 +244,8 @@ Section in progress...
 
 To deploy an instance in production you need to deploy the same stack as in dev.
 
-- You need a Ricochet.js instance.
-- You need a Wire.io instance.
+- You need a Ricochet.js server.
+- You need a Wire.io server.
 - Build the backend `ricochet.json` file.
 - Build the frontend and deploy it to a CDN.
 

package-lock.json

@@ -65,6 +65,7 @@
         "eslint-plugin-react-hooks": "^4.2.0",
         "http-proxy-middleware": "^2.0.0",
         "i18next-scanner": "^3.0.0",
+        "node-fetch": "^3.1.1",
         "prettier": "2.0.5",
         "rollup-plugin-analyzer": "^4.0.0",
         "vite": "^2.2.4",
@@ -6192,6 +6193,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
+      "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/date-fns": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
@@ -7360,6 +7370,28 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.3.tgz",
+      "integrity": "sha512-ax1Y5I9w+9+JiM+wdHkhBoxew+zG4AJ2SvAD1v1szpddUIiPERVGBxrMcB2ZqW0Y3PP8bOWYv2zqQq1Jp2kqUQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -7540,6 +7572,18 @@
         "node": ">= 0.12"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dev": true,
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -9819,6 +9863,24 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.1.1.tgz",
+      "integrity": "sha512-SMk+vKgU77PYotRdWzqZGTZeuFKlsJ0hu4KPviQKkfY+N3vn2MIzr0rvpnYpR8MtB3IEuhlEcuOLbGvLRlA+yg==",
+      "dev": true,
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.3",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/node-modules-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
@@ -13570,6 +13632,15 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
+      "integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -18874,6 +18945,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "data-uri-to-buffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
+      "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==",
+      "dev": true
+    },
     "date-fns": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
@@ -19812,6 +19889,15 @@
         "pend": "~1.2.0"
       }
     },
+    "fetch-blob": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.3.tgz",
+      "integrity": "sha512-ax1Y5I9w+9+JiM+wdHkhBoxew+zG4AJ2SvAD1v1szpddUIiPERVGBxrMcB2ZqW0Y3PP8bOWYv2zqQq1Jp2kqUQ==",
+      "dev": true,
+      "requires": {
+        "web-streams-polyfill": "^3.0.3"
+      }
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -19949,6 +20035,15 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dev": true,
+      "requires": {
+        "fetch-blob": "^3.1.2"
+      }
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -21735,6 +21830,17 @@
         }
       }
     },
+    "node-fetch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.1.1.tgz",
+      "integrity": "sha512-SMk+vKgU77PYotRdWzqZGTZeuFKlsJ0hu4KPviQKkfY+N3vn2MIzr0rvpnYpR8MtB3IEuhlEcuOLbGvLRlA+yg==",
+      "dev": true,
+      "requires": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.3",
+        "formdata-polyfill": "^4.0.10"
+      }
+    },
     "node-modules-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
@@ -24610,6 +24716,12 @@
         }
       }
     },
+    "web-streams-polyfill": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
+      "integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==",
+      "dev": true
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -47,6 +47,7 @@
     "serve": "vite preview --open",
     "lint": "eslint src/",
     "prettier": "prettier --write src/",
+    "check": "node ./checkConfig.mjs",
     "server": "echo 'This command is deprecated. Please, see Readme for more information.'",
     "i18n:scanner": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.{js,jsx}'",
     "cypress:open": "cross-env VITE_CI=1 LANGUAGE=en cypress open",
@@ -84,6 +85,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "http-proxy-middleware": "^2.0.0",
     "i18next-scanner": "^3.0.0",
+    "node-fetch": "^3.1.1",
     "prettier": "2.0.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "vite": "^2.2.4",