.github/workflows/release-pages-staging.yaml

@@ -3,8 +3,7 @@ name: Deploy static content to Pages
 
 on:
   push:
-    branches: ["github-pages-10-14"]
-    # branches: ["master"]
+    branches: ['github-pages-10-14', 'staging']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -17,15 +16,11 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: true
 
 jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -34,9 +29,18 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18
-          cache: "npm"
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
+      - name: Create .env File
+        run: |
+          echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
+          echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
+          echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
+          echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
+          echo "VITE_BASE_URL=${{ vars.VITE_BASE_URL }}" >> .env
+          echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env
+          cat .env
       - name: Build
         run: npm run build
       - name: Setup Pages
@@ -44,8 +48,15 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload dist folder
-          path: "./dist"
+          path: './dist'
+
+  deploy:
+    environment:
+      name: github-pages-staging
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

src/main.tsx

@@ -12,7 +12,11 @@ import { NDKContextProvider } from 'contexts/NDKContext.tsx'
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Provider store={store}>
-      <HashRouter>
+      <HashRouter
+        {...(import.meta.env.VITE_BASE_URL
+          ? { basename: import.meta.env.VITE_BASE_URL }
+          : {})}
+      >
         <NDKContextProvider>
           <App />
         </NDKContextProvider>

src/vite-env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
   readonly VITE_APP_RELAY: string
   readonly VITE_ADMIN_NPUBS: string
+  readonly VITE_BASE_URL: string
   readonly VITE_REPORTING_NPUB: string
   readonly VITE_FALLBACK_MOD_IMAGE: string
   readonly VITE_FALLBACK_GAME_IMAGE: string

vite.config.ts

@@ -1,8 +1,15 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), tsconfigPaths()]
+export default defineConfig(({ mode }) => {
+  // Load env file based
+  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+  const env = loadEnv(mode, process.cwd(), '')
+  return {
+    // vite config
+    plugins: [react(), tsconfigPaths()],
+    ...(env.VITE_BASE_URL ? { base: env.VITE_BASE_URL } : {})
+  }
 })