chore: sync Vite Modes with NODE_ENV

- Updated the `build` script in `package.json` to set `--mode` in the
  `vite build` command to always match `NODE_ENV` (defaults to
  `production`).
- Simplified `.env` to serve primarily as documentation and to provide
  essential default values.
- Renamed `.env.dev` and `.env.prod` to `.env.development` and
  `.env.production` as Vite doesn't recognize the former.
- Added `.env.staging` for easier deployment configuration.
- Symlinked `.env.development` to `.env.staging` for quicker development
  environment setup.
- Renamed `VERCEL_PROXIED_API_BASE_URL` to
  `VITE_VERCEL_PROXIED_API_BASE_URL` for consistency with other
  variables.
- Added support for configuring `NODE_ENV` build argument in
  `Dockerfile`.
- Renamed `.github/workflows/build.yml` to
  `.github/workflows/publish-docker-image.yml`, Simplified the script,
  and set the Docker build argument `NODE_ENV=staging`.

Fixes #929

Signed-off-by: Aofei Sheng <aofei@aofeisheng.com>

.github/workflows/publish-docker-image.yml

@@ -0,0 +1,28 @@
+name: Publish Docker image
+on:
+ push:
+ branches:
+ - dev
+ paths-ignore:
+ - 'docs/**'
+jobs:
+ publish-docker-image:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Check out code
+ uses: actions/checkout@v4
+ - name: Log in to GitHub Container Registry
+ uses: docker/login-action@v3
+ with:
+ registry: ghcr.io
+ username: ${{github.actor}}
+ password: ${{github.token}}
+ - name: Build and push Docker image
+ uses: docker/build-push-action@v6
+ with:
+ context: .
+ build-args: |
+ NODE_ENV=staging
+ push: true
+ tags: |
+ ghcr.io/${{github.repository}}:latest

Dockerfile

@@ -39,13 +39,15 @@ COPY tools ../tools
 COPY --from=go-builder /app/tools/fmt/static/main.wasm /app/spx-gui/src/assets/format.wasm
 COPY --from=go-builder /app/tools/ispx/main.wasm /app/spx-gui/src/assets/ispx/main.wasm
 
+ARG NODE_ENV
+
 RUN npm run build
 
 FROM ${NGINX_BASE_IMAGE}
 
 COPY --from=go-builder /app/spx-backend/spx-backend /app/spx-backend/spx-backend
 COPY --from=frontend-builder /app/spx-gui/dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY scripts/nginx.conf /etc/nginx/conf.d/default.conf
 
 # Compress WASM files for gzip_static
 RUN find /usr/share/nginx/html -name "*.wasm" -exec gzip -9 -k {} \;

spx-gui/.env

@@ -1,18 +1,28 @@
-# Reference src/utils/env.ts
+# This file serves primarily as a documentation for the available configuration
+# options in the project. Most values are left empty, as actual values should be
+# set in the corresponding `.env.[mode]` files. However, for the ones that
+# require default values, such as feature flags, they are set here.
 
-# Casdoor configuration
-VITE_CASDOOR_ENDPOINT="https://goplus-casdoor.qiniu.io"
-VITE_CASDOOR_CLIENT_ID="389313df51ffd2093b2f"
+# Base URL for the spx-backend API.
+#
+# Required.
+VITE_API_BASE_URL=""
 
-# Used not for authentication, but for fetching user profile
-VITE_CASDOOR_ORGANIZATION_NAME="GoPlus"
-VITE_CASDOOR_APP_NAME="application_x8aevk"
+# Base URL for the spx-backend API, used by Vercel to proxy '/api/(.*)' requests
+# with the '/api' prefix stripped.
+#
+# Required.
+VITE_VERCEL_PROXIED_API_BASE_URL=""
 
-VITE_API_BASE_URL="/api"
+# Casdoor configuration.
+#
+# Required.
+VITE_CASDOOR_ENDPOINT=""
+VITE_CASDOOR_CLIENT_ID=""
+VITE_CASDOOR_APP_NAME=""
+VITE_CASDOOR_ORGANIZATION_NAME=""
 
-# Features control
+# Feature flags, all boolean (true/false), with default values set here.
+#
+# Optional as they have default values.
 VITE_DISABLE_AIGC="false"
-
-# This base URL is used by Vercel to proxy all '/api/(.*)' requests.
-# The path prefix '/api' is stripped before forwarding.
-VERCEL_PROXIED_API_BASE_URL="https://goplus-builder.qiniu.io/api"

spx-gui/.env.development

@@ -0,0 +1 @@
+.env.staging

spx-gui/.env.prod → spx-gui/.env.production

@@ -1,11 +1,9 @@
 # Config for env production
 
-# Casdoor configuration
+VITE_API_BASE_URL="/api"
+VITE_VERCEL_PROXIED_API_BASE_URL="https://builder-api.goplus.org"
+
 VITE_CASDOOR_ENDPOINT="https://acc.goplus.org"
 VITE_CASDOOR_CLIENT_ID="4ff910257e9cdd89b6b8"
-
-# Used not for authentication, but for fetching user profile
-VITE_CASDOOR_ORGANIZATION_NAME="built-in"
 VITE_CASDOOR_APP_NAME="application_stem"
-
-VITE_API_BASE_URL="https://builder.goplus.org/api"
+VITE_CASDOOR_ORGANIZATION_NAME="built-in"

spx-gui/.env.staging

@@ -0,0 +1,9 @@
+# Config for env staging
+
+VITE_API_BASE_URL="https://goplus-builder.qiniu.io/api"
+VITE_VERCEL_PROXIED_API_BASE_URL="https://goplus-builder.qiniu.io/api"
+
+VITE_CASDOOR_ENDPOINT="https://goplus-casdoor.qiniu.io"
+VITE_CASDOOR_CLIENT_ID="389313df51ffd2093b2f"
+VITE_CASDOOR_APP_NAME="application_x8aevk"
+VITE_CASDOOR_ORGANIZATION_NAME="GoPlus"

spx-gui/.gitignore

@@ -41,4 +41,5 @@ tsconfig.tsbuildinfo
 !.yarn/versions
 
 .env.local
+.env.*.local
 .vercel

spx-gui/README.md

@@ -1,37 +1,22 @@
 # spx-gui
 
-## Dependency Installation
+## Install Dependencies
 
 ```bash
 npm install
 ```
 
-## Project Execution
+## Run the Project in Development Mode
 
 ```bash
-cp .env.dev .env.local
 npm run dev
 ```
 
-## Project DevTool
-
-`vite-plugin-vue-devtools` <https://devtools-next.vuejs.org/> 
-
-DevTool will run in `localhost:5173/__devtools__/`
-
-## Code Architecture
-
-```arduino
-├── public 
-└── src 
- ├── api // Requests
- ├── assets // Resource files
- ├── components // Components
- ├── router // Routing
- ├── store // State/Storage Management
- ├── modules // State Modules
- └── util // Utils
-```
+> [!NOTE]
+> To help you quickly get started with development, we have symbolically linked `.env.development` to `.env.staging`.
+> Feel free to override any environment settings by creating a `.env.development.local` file. For example, if you need
+> to use your local `spx-backend` server, simply append something like `VITE_API_BASE_URL="http://localhost:8080"` to
+> the file, adjusting the URL as needed.
 
 ## Development Standards
 
@@ -131,7 +116,7 @@ export const useUserStore = defineStore('user', () => {
  // getters
  getFullToken,
  // actions
- setToken,
+ setToken
  }
 })
 ```
@@ -146,13 +131,13 @@ const routes = [
  {
  path: '/spx/homepage',
  name: 'SpxHomepage',
- component: () => import('../components/SpxHomepage.vue'),
+ component: () => import('../components/SpxHomepage.vue')
  },
  {
  path: '/sprite/list',
  name: 'SpriteList',
- component: () => import('../components/sprite-list/SpriteList.vue'),
- },
+ component: () => import('../components/sprite-list/SpriteList.vue')
+ }
 ]
 ```
 
@@ -164,9 +149,7 @@ Use TODO for team code handover
 
 ```vue
 <script setup>
-
 // TODO Complete xx content writing/bugfix @xxx
-
 </script>
 ```
 
@@ -175,7 +158,7 @@ Use TODO for team code handover
 Taking the creation of an Audio Editing Page as an example:
 
 1. If it's a new page, create a folder, sounds-edit
-2. Create SoundEdit.vue component
+2. Create `SoundEdit.vue` component
 3. Register the component in the route
 4. Complete the page development
 
@@ -186,25 +169,25 @@ If your project includes custom CSS styles with color definitions, follow these
 1. Add custom color variables in the file located at src/assets/theme.scss
 
 ```scss
-// SpxEditor 
-$spx-editor-tab-font-uncheck: black;  // Please start the name with the component name, for example, for CSS styles in SpxEditor, start with spx-editor
+// SpxEditor
+$spx-editor-tab-font-uncheck: black; // Please start the name with the component name, for example, for CSS styles in SpxEditor, start with spx-editor
 ```
 
 2. Import and use these variables in SpxEditor
 
 ```scss
-<style scoped lang="scss"> 
-@import "@/assets/theme.scss"; 
+<style scoped lang="scss">
+@import "@/assets/theme.scss";
 
-.tab-font-uncheck { 
- font-size: 20px; 
- color: $spx-editor-tab-font-uncheck; 
+.tab-font-uncheck {
+ font-size: 20px;
+ color: $spx-editor-tab-font-uncheck;
 }
- 
+
 </style>
 ```
 
-## i18n/i10n
+## I18n/I10n
 
 ### Configure languages in `src/language/index.ts`
 
@@ -213,14 +196,14 @@ export const initI18n = async (app: App) => {
  const messages = {
  en: {
  sounds: {
- hint: 'Sounds',
- },
+ hint: 'Sounds'
+ }
  },
  zh: {
  sounds: {
- hint: '音频',
- },
- },
+ hint: '音频'
+ }
+ }
  }
 }
 ```

spx-gui/package.json

@@ -5,7 +5,7 @@
  "type": "module",
  "scripts": {
  "dev": "vite",
- "build": "vue-tsc --build --force && vite build",
+ "build": "vue-tsc --build --force && vite build --mode ${NODE_ENV:-production}",
  "build-wasm": "./build-wasm.sh",
  "preview": "vite preview",
  "type-check": "vue-tsc --build --force",

spx-gui/vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig(({ mode }) => {
  rewrites: [
  {
  source: '/api/(.*)',
- destination: (env.VERCEL_PROXIED_API_BASE_URL as string) + '/$1'
+ destination: (env.VITE_VERCEL_PROXIED_API_BASE_URL as string) + '/$1'
  },
  {
  source: '/(.*)',