From 3d57d78b790f412213290f39b9dd4847e6608cef Mon Sep 17 00:00:00 2001
From: Brent Vollebregt <brent.vollebregt@gmail.com>
Date: Fri, 4 Oct 2024 20:37:45 +1300
Subject: [PATCH] Improve documentation

---
 README.md                         | 18 ++++++------------
 packages/client/.env.example      |  8 +++++++-
 packages/client/src/config.ts     |  2 +-
 packages/client/src/vite-env.d.ts |  2 +-
 packages/server/.env.example      |  1 +
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index ab515c2..448fd2c 100644
--- a/README.md
+++ b/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`.
 
diff --git a/packages/client/.env.example b/packages/client/.env.example
index 20fc233..9d3122f 100644
--- a/packages/client/.env.example
+++ b/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
\ No newline at end of file
+
+# 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
\ No newline at end of file
diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
index 97eea21..c358d34 100644
--- a/packages/client/src/config.ts
+++ b/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"
   },
diff --git a/packages/client/src/vite-env.d.ts b/packages/client/src/vite-env.d.ts
index 33870c8..fc909c7 100644
--- a/packages/client/src/vite-env.d.ts
+++ b/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;
 }
diff --git a/packages/server/.env.example b/packages/server/.env.example
index e767979..aef994c 100644
--- a/packages/server/.env.example
+++ b/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
\ No newline at end of file