Enhance start and build scripts to add support for Windows developers (…

…#203)

* Enhance start and build scripts to add support for Windows developers

* - Further updates on README.md
- Remove the text about Windows being unsupported
- Updated the local port from 5173 to 443
- Added more instruction how to set up a dev env

---------

Co-authored-by: chengkeith <[email protected]>

README.md

@@ -23,25 +23,49 @@ The project is a [React](https://reactjs.org/) web app with [Material-UI](https:
 
 ## Docker
 
-See docker.md for more information about using docker for deployment / development.
+See `docker.md` for more information about using docker for deployment / development.
 
-## Available Scripts
+## Setup a Development Environment locally
 
-> ***Note***: It is assumed that you are running the scripts in a unix-like environment. Windows is not supported.
+To run this project, you need `nodejs` and `yarn`.
 
-In the project directory, you can run:
+Go ahead to [https://nodejs.org](https://noejs.org) to download and install nodejs on your system.
+
+Once you have nodejs installed, you can run:
+
+### `npm install -g yarn`
+
+which would install yarn in your system.
+
+## Install Dependency
+
+If you have `yarn` installed, go to the project directory, run the following command:
+
+### `yarn install`
+
+This command downloads all the dependencies required to run this app and save them in the `node_modules` sub-directory.
+
+You only need to do this once, unless the project has been updated and the required dependencies have changed.
+
+## Start the app
+
+With the dependencies downloaded, in the project directory, you can run:
 
 ### `yarn start`
 
-Runs the app in development mode.\
-Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
+This runs the app in development mode.\
+Open [https://localhost:443](http://localhost:443) (or simply [https://localhost](http://localhost)) to view it in your browser.
 
 The page will reload if you make edits.\
 You will also see lint errors in the console.
 
+## Build the app
+
+In the project directory, you can run:
+
 ### `yarn build`
 
-Builds the app for production to the `build` folder.\
+This command builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.\

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build: ./docker
     restart: unless-stopped
     ports:
-      - ${DEV_PORT:-5173}:5173
+      - ${DEV_PORT:-5173}:443
     volumes:
       - ./:/app
     command: 'bash ./docker/run.sh'

docker.md

@@ -8,7 +8,7 @@ You can deploy hkbus using docker.
 docker compose up -d
 ```
 
-Check out http://localhost:5173 in the browser
+Check out https://localhost:5173 in the browser
 
 * If you prefer port other than 5173, add `DEV_PORT=<PORT_NUMBER>` in `.env` file.
 

package.json

@@ -3,8 +3,8 @@
   "version": "11.2.0",
   "private": true,
   "scripts": {
-    "start": ". ./scripts/prebuild.sh; vite --force",
-    "build": ". ./scripts/prebuild.sh; tsc && vite build",
+    "start": "./scripts/start-all-platforms.cmd",
+    "build": "./scripts/build-all-platforms.cmd",
     "production-build": "yarn build && node scripts/sitemap-generator.js && node scripts/pre-rendering.js",
     "render": "node scripts/pre-rendering.js",
     "deploy": "yarn build && gh-pages -d build -t -f -a",

scripts/build-all-platforms.cmd

@@ -0,0 +1,12 @@
+:<<"::WINDOWS_BATCH"
+:; ##### BEGIN Windows Batch Script #####
+@echo off
+call ./scripts/prebuild-win.cmd && tsc && vite build
+:; ##### END Windows Batch Script #####
+GOTO :END_OF_SCRIPT
+::WINDOWS_BATCH
+
+# ##### BEGIN Unix Shell Script #####
+. ./scripts/prebuild.sh; tsc && vite build
+# ##### END Unix Shell Script #####
+#:END_OF_SCRIPT

scripts/prebuild-win.cmd

@@ -0,0 +1,24 @@
+if "%VITE_COMMIT_HASH%"== "" (
+  for /f "delims=" %%a in ('git rev-parse --short HEAD') do (
+    set VITE_COMMIT_HASH=%%a
+  )
+)
+
+if "%VITE_COMMIT_MESSAGE%"== "" (
+  for /f "delims=" %%a in ('git log -1 --pretty^=format:%%s') do (
+    set VITE_COMMIT_MESSAGE=%%a
+  )
+)
+
+if "%VITE_VERSION%"== "" (
+  for /f "usebackq delims=s" %%a in (`powershell -Command "Write-Host $(node -e 'console.log(require(''./package.json'').version)')"`) do (
+    set VITE_VERSION=%%a
+  )
+)
+
+if "%VITE_REPO_URL%"== "" (
+  for /f "delims=" %%a in ('git config --get remote.origin.url') do (
+    set VITE_REPO_URL=%%a
+  )
+)
+

scripts/start-all-platforms.cmd

@@ -0,0 +1,12 @@
+:<<"::WINDOWS_BATCH"
+:; ##### BEGIN Windows Batch Script #####
+@echo off
+call ./scripts/prebuild-win.cmd && vite --force
+:; ##### END Windows Batch Script #####
+GOTO :END_OF_SCRIPT
+::WINDOWS_BATCH
+
+# ##### BEGIN Unix Shell Script #####
+. ./scripts/prebuild.sh; vite --force
+# ##### END Unix Shell Script #####
+#:END_OF_SCRIPT