matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix frontend runtime environment configuration
All checks were successful
Build and Push Docker Images / docker (push) Successful in 46s
Details

Browse Source 
CRITICAL FIX:
- Frontend now loads environment variables at runtime instead of build time
- This allows changing configuration without rebuilding the Docker image

CHANGES:
- Add env-config.js script loader to index.html
- Update env.sh to use correct path for serve (/app/dist)
- Update Dockerfile to run env.sh before starting serve
- Add VITE_STRIPE_PUBLISHABLE_KEY to docker-compose environment

HOW IT WORKS:
1. env.sh reads VITE_* variables from container environment
2. Generates /app/dist/env-config.js with window.env object
3. index.html loads env-config.js before React app
4. src/utils/config.ts reads from window.env at runtime

This fixes the "Missing required environment variable: WREN_API_TOKEN" error
because the frontend can now access environment variables passed to the container.

🔒 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt 2025-10-30 12:30:29 +01:00
parent bc9e2d3782
commit 04bfef4391
4 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Dockerfile
View File

@ -22,8 +22,12 @@ RUN npm install -g serve
# Copy the built app from the build stage
COPY --from=build /app/dist ./dist
# Copy the env.sh script for runtime configuration
COPY env.sh /app/env.sh
RUN chmod +x /app/env.sh
# Expose port 3000
EXPOSE 3000
# Serve the static files
CMD ["serve", "-s", "dist", "-l", "3000"]
# Use env.sh to generate runtime config, then start serve
CMD ["/app/env.sh", "serve", "-s", "dist", "-l", "3000"]

1
docker-compose.yml
View File

@ -13,6 +13,7 @@ services:
- VITE_WREN_API_TOKEN=${VITE_WREN_API_TOKEN}
- VITE_FORMSPREE_CONTACT_ID=${VITE_FORMSPREE_CONTACT_ID}
- VITE_FORMSPREE_OFFSET_ID=${VITE_FORMSPREE_OFFSET_ID}
- VITE_STRIPE_PUBLISHABLE_KEY=${VITE_STRIPE_PUBLISHABLE_KEY}
restart: unless-stopped
networks:
- puffin-network

4
env.sh
View File

@ -3,8 +3,8 @@
# Script to dynamically replace environment variables in the static files
# This allows updating env variables without rebuilding the container
# The directory where the static files are located
ROOT_DIR=/usr/share/nginx/html
# The directory where the static files are located (serve uses /app/dist)
ROOT_DIR=/app/dist
# Create env-config.js with the environment variables
echo "window.env = {" > $ROOT_DIR/env-config.js

2
index.html
View File

@ -75,6 +75,8 @@
</head>
<body>
<div id="root"></div>
<!-- Load runtime environment configuration before app -->
<script src="/env-config.js"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>