Merge pull request #1070 from bluewave-labs/feat/fe/env-var-injection

feat/fe/env var injection

Client/.env.production

@@ -0,0 +1 @@
+VITE_APP_API_BASE_URL=UPTIME_APP_API_BASE_URL

Client/.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 
 .env
+
+!env.sh

Client/env.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+for i in $(env | grep UPTIME_APP_)
+do
+    key=$(echo $i | cut -d '=' -f 1)
+    value=$(echo $i | cut -d '=' -f 2-)
+    echo $key=$value
+    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done

Client/package.json

@@ -6,6 +6,7 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
+		"build-dev": "vite build --mode development",
 		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview"
 	},

Docker/dev/client.Dockerfile

@@ -8,7 +8,7 @@ RUN npm install
 
 COPY ../../Client .
 
-RUN npm run build
+RUN npm run build-dev
 
 RUN npm install -g serve
 

Docker/dist/build_images.sh

@@ -6,10 +6,10 @@ cd ../..
 
 # Define an array of services and their Dockerfiles
 declare -A services=(
-  ["bluewave/uptime_client"]="./Docker/dist/client.Dockerfile"
-  ["bluewave/database_mongo"]="./Docker/dist/mongoDB.Dockerfile"
-  ["bluewave/uptime_redis"]="./Docker/dist/redis.Dockerfile"
-  ["bluewave/uptime_server"]="./Docker/dist/server.Dockerfile"
+  ["bluewaveuptime/uptime_client"]="./Docker/dist/client.Dockerfile"
+  ["bluewaveuptime/uptime_database_mongo"]="./Docker/dist/mongoDB.Dockerfile"
+  ["bluewaveuptime/uptime_redis"]="./Docker/dist/redis.Dockerfile"
+  ["bluewaveuptime/uptime_server"]="./Docker/dist/server.Dockerfile"
 )
 
 # Loop through each service and build the corresponding image

Docker/dist/client.Dockerfile

@@ -15,5 +15,7 @@ FROM nginx:1.27.1-alpine
 
 COPY ./Docker/dist/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/env.sh /docker-entrypoint.d/env.sh
+RUN chmod +x /docker-entrypoint.d/env.sh
 
 CMD ["nginx", "-g", "daemon off;"]

Docker/dist/docker-compose.yaml

@@ -1,6 +1,8 @@
 services:
   client:
     image: bluewaveuptime/uptime_client:latest
+    environment:
+      UPTIME_APP_API_BASE_URL: "http://localhost:5000/api/v1"
     ports:
       - "80:80"
       - "443:443"

Docker/prod/client.Dockerfile

@@ -13,5 +13,6 @@ RUN npm run build
 FROM nginx:1.27.1-alpine
 
 COPY --from=build /app/dist /usr/share/nginx/html
-
+COPY --from=build /app/env.sh /docker-entrypoint.d/env.sh
+RUN chmod +x /docker-entrypoint.d/env.sh
 CMD ["nginx", "-g", "daemon off;"]

Docker/prod/docker-compose.yaml

@@ -1,6 +1,8 @@
 services:
   client:
     image: uptime_client:latest
+    environment:
+      UPTIME_APP_API_BASE_URL: "http://localhost:5000/api/v1"
     ports:
       - "80:80"
       - "443:443"

guides/users-guide/quickstart.md

@@ -12,6 +12,15 @@ icon: sign-posts-wrench
 
 ---
 
+## Quickstart for users (remote server) <a href="#user-quickstart" id="user-quickstart"></a>
+
+1. Download our [Docker compose file](https://github.com/bluewave-labs/bluewave-uptime/blob/develop/Docker/dist/docker-compose.yaml)
+2. Edit the `UPTIME_APP_API_BASE_URL` variable in the docker-compose file to point to your remote server.
+3. Run `docker compose up` to start the application
+4. Now the application is running at `http://<remote_server_ip>`
+
+---
+
 ## Quickstart for developers <a href="#dev-quickstart" id="dev-quickstart"></a>
 
 {% hint style="info" %}