Improve documentation

README.md

@@ -4,33 +4,6 @@
 <p align="center">Manage your finances in a game of Monopoly from the browser.</p>
 <p align="center"><a href="https://monopoly-money.nitratine.net/">🌐: monopoly-money.nitratine.net</a></p>
 
-## 🛠️ Setup
-
-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:
-   - 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.
-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.
-
-`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.
-
-> `launch.json` also offers the ability to connect and debug the the server when running `npm run client:dev`.
-
 ## Screenshots
 
 | <!-- -->                                                                                                                                               | <!-- -->                                                                                                                                          | <!-- -->                                                                                                                                                                                |
@@ -54,6 +27,32 @@ When running the client in development mode using `npm run client:dev`, the clie
   - End the game completely
 - History is recorded of each game event that can be viewed by all players
 
+## 🛠️ Setup
+
+1. Clone the repo and cd into the project.
+2. Install dependencies by executing `npm install`.
+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:
+     - `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.
+
+### 🧪 Development Setup
+
+To setup hot reloading on the backend and frontend:
+
+- 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`.
+
+This project uses npm workspaces. Here are some example commands on how to get stuff done:
+
+- Add a dependency to the client: `npm install DEP -w ./packages/client --save`
+- Build just the client: `npm run build -w ./packages/client`
+
 ## ❓ Why?
 
 If you have ever played the credit card edition of Monopoly, you will appreciate how much faster the game moves without having to count cash. This webapp substitutes the need for cash in a game of monopoly for a mobile-banking-like solution where players can easily send each other virtual currency.

package.json

@@ -8,8 +8,8 @@
   "scripts": {
     "start": "node packages/server/build",
     "build": "npm run build -w ./packages/game-state && npm run build -w ./packages/server && npm run build -w ./packages/client && node postbuild.js",
-    "client:dev": "cd packages/client && npm run dev",
-    "server:dev": "cd packages/server && npm run dev"
+    "client:dev": "npm run dev -w ./packages/client",
+    "server:dev": "npm run dev -w ./packages/server"
   },
   "repository": {
     "type": "git",

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