Improve documentation

README.md

@@ -8,26 +8,20 @@
 
 1. Clone the repo and cd into the project.
 2. Install dependencies by executing `npm install`.
-3. Setup environment variables. This can be done two ways:
+3. Setup environment variables. Either:
    - Set the environment variables in the current terminal session
    - Copy the .env.example files in the server and client packages and populate them:
-     - Examples are at: `packages/server/.env.example` and `packages/client/.env.example`
-     - Copy these using `cp .env.example .env` and populate them both.
+     - `cp packages/server/.env.example packages/server/.env`
+     - `cp packages/client/.env.example packages/client/.env`
 4. Build dependencies using `npm run build`.
 5. Execute `npm start` to start the server.
 
-> You may need to set `CI=false` when building to ignore the warnings from the frontend project.
-
-The environment variables that can be used are (can also be found in .env.example files):
-
-- `VITE_API_ROOT` (optional): The route that the client requests. Not setting this will default to `window.location.origin`.
-- `SERVER_ALLOWED_ORIGINS` (optional): The origins that are served by the server. Not setting this is the equivalent of setting CORS to \*.
-
 ### 🧪 Development Setup
 
-When running the client in development mode using `npm run client:dev`, the client will use the `VITE_API_ROOT` environment variable value to decide where to send requests. If this is not provided, the current hosted URL will be used.
+To setup hot reloading on the backend and frontend:
 
-`npm run server:dev` can also be used for development of the server; this allows for hot-reloading. Running the client using `npm run client:dev` and setting `VITE_API_ROOT` to where the server is running will allow for a development setup with hot-reloading.
+- Run the backend using `npm run server:dev`
+- Run the frontend using `npm run client:dev`
 
 > `launch.json` also offers the ability to connect and debug the the server when running `npm run client:dev`.
 

packages/client/.env.example

@@ -1,2 +1,8 @@
+# The API root (where the server package is being hosted)
 VITE_API_ROOT=http://localhost:5000
-VITE_GOOGLE_ANALYTICS_TRACKING_ID=G-XXXXXXXXX
+
+# Google Analytics tracking code (can leave as this)
+VITE_GOOGLE_ANALYTICS_TRACKING_ID=G-XXXXXXXXX
+
+# A message to show when the API is unreacable (optional)
+# VITE_API_UNREACHABLE_ERROR_MESSAGE=  # Disabled by default

packages/client/src/config.ts

@@ -1,6 +1,6 @@
 export default {
   api: {
-    root: import.meta.env.VITE_API_ROOT ? import.meta.env.VITE_API_ROOT : window.location.origin,
+    root: import.meta.env.VITE_API_ROOT,
     unreachableErrorMessage:
       import.meta.env.VITE_API_UNREACHABLE_ERROR_MESSAGE ?? "Unable to communicate with server"
   },

packages/client/src/vite-env.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="vite-plugin-svgr/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_API_ROOT?: string;
+  readonly VITE_API_ROOT: string;
   readonly VITE_GOOGLE_ANALYTICS_TRACKING_ID?: string;
   readonly VITE_API_UNREACHABLE_ERROR_MESSAGE?: string;
 }

packages/server/.env.example

@@ -1 +1,2 @@
+# The origins allowed to make calls to the server (where the frontend is hosted). Can be multiple domains separated by commas.
 SERVER_ALLOWED_ORIGINS=http://localhost:3000