feat(web): add env file to support configuration of BASE_URL

.github/workflows/deploy_web.yaml

@@ -19,12 +19,6 @@ jobs:
         with:
           node-version-file: '.nvmrc'
 
-      - name: set env
-        run: |
-          cd web
-          echo "VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now" > .env.local
-          echo "VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser." >> .env.local
-
       - name: build
         run: |
           cd web
@@ -49,12 +43,6 @@ jobs:
         with:
           node-version-file: '.nvmrc'
 
-      - name: set env
-        run: |
-          cd web
-          echo "VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now" > .env.local
-          echo "VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser." >> .env.local
-
       - name: build
         run: |
           cd web

web/.env

@@ -0,0 +1,7 @@
+VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now
+VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser.
+
+VUE_APP_DEFAULT_HOST=broker.emqx.io
+
+BASE_URL=/online-mqtt-client/
+VUE_APP_OUTPUT_DIR=dist/online-mqtt-client

web/.env.docker

@@ -0,0 +1,7 @@
+VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now
+VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser.
+
+VUE_APP_DEFAULT_HOST=broker.emqx.io
+
+BASE_URL=/
+VUE_APP_OUTPUT_DIR=dist

web/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build:docker": "export BUILD_MODE=docker && vue-cli-service build",
+    "build:docker": "vue-cli-service build --mode docker",
     "start": "vue-cli-service build && http-server dist -o /online-mqtt-client",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint"

web/src/utils/mqttUtils.ts

@@ -156,7 +156,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     name: '',
     clean: true,
     protocol: 'ws',
-    host: 'broker.emqx.io',
+    host: process.env.VUE_APP_DEFAULT_HOST ?? 'broker.emqx.io',
     keepalive: 60,
     connectTimeout: 10,
     reconnect: true,

web/vue.config.js

@@ -2,11 +2,9 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 process.env.VUE_APP_VERSION = require('./package.json').version
 
-const buildMode = process.env.BUILD_MODE
-
 module.exports = {
-  publicPath: buildMode === 'docker' ? '/' : '/online-mqtt-client/',
-  outputDir: buildMode === 'docker' ? 'dist' : 'dist/online-mqtt-client',
+  publicPath: process.env.BASE_URL,
+  outputDir: process.env.VUE_APP_OUTPUT_DIR,
   configureWebpack: {
     plugins: [
       new MonacoWebpackPlugin({