Dockerfile

.dockerignore

@@ -1,12 +1,6 @@
 # Dependencies
 node_modules
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Build outputs
-dist
-build
 
 # Environment files
 .env
@@ -15,56 +9,49 @@ build
 .env.test.local
 .env.production.local
 
-# IDE files
+# Build outputs
+dist
+.output
+.nuxt
+.nitro
+
+# IDE and editor files
 .vscode
 .idea
 *.swp
 *.swo
 
-# OS files
+# OS generated files
 .DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
 Thumbs.db
 
 # Git
 .git
 .gitignore
 
-# Docker
-Dockerfile
-.dockerignore
-
 # Documentation
 README.md
 CHANGELOG.md
 LICENSE.md
+docs/
+
+# Docker files
+Dockerfile*
+docker-compose*.yml
+.dockerignore
 
 # Logs
-logs
 *.log
+logs
 
-# Runtime data
+# Coverage
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Coverage directory used by tools like istanbul
 coverage
 
-# nyc test coverage
+# Cache
-.nyc_output
+.cache
-
+.eslintcache
-# Dependency directories
-jspm_packages/
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity

DOCKER_ENV.md

@@ -0,0 +1,154 @@
+# Docker Environment Variables Guide
+
+This guide explains how to use environment variables with Docker builds for your Vue.js application.
+
+## Problem
+
+The original Dockerfile didn't handle environment variables from `.env` files because:
+
+1. Vite requires environment variables to be available at build time
+2. Docker builds don't automatically read `.env` files
+3. Environment variables need to be passed as build arguments
+
+## Solution
+
+The updated Dockerfile now accepts build-time environment variables using `ARG` and `ENV` instructions.
+
+## How to Use
+
+### 1. Create a `.env` file
+
+Create a `.env` file in your project root with your environment variables:
+
+```bash
+# .env
+VITE_API_BASE_URL=https://api.yourdomain.com
+VITE_API_TIMEOUT=10000
+VITE_APP_TITLE=My App
+VITE_APP_VERSION=1.0.0
+VITE_AUTH_TOKEN_KEY=auth_token
+VITE_REFRESH_TOKEN_KEY=refresh_token
+VITE_ENABLE_ANALYTICS=true
+VITE_ENABLE_DEBUG=false
+VITE_GOOGLE_ANALYTICS_ID=GA-XXXXXXXXX
+VITE_SENTRY_DSN=https://your-sentry-dsn
+```
+
+### 2. Build with Environment Variables
+
+#### Option A: Using docker build with --build-arg
+
+```bash
+docker build \
+  --build-arg VITE_API_BASE_URL=https://api.yourdomain.com \
+  --build-arg VITE_APP_TITLE="My App" \
+  --build-arg VITE_ENABLE_DEBUG=false \
+  -t sakai-vue .
+```
+
+#### Option B: Using docker-compose with env_file
+
+Create a `docker-compose.yml`:
+
+```yaml
+version: '3.8'
+services:
+    sakai-vue:
+        build:
+            context: .
+            dockerfile: Dockerfile
+            args:
+                VITE_API_BASE_URL: ${VITE_API_BASE_URL}
+                VITE_APP_TITLE: ${VITE_APP_TITLE}
+                VITE_ENABLE_DEBUG: ${VITE_ENABLE_DEBUG}
+        ports:
+            - '80:80'
+```
+
+Then run:
+
+```bash
+docker-compose up --build
+```
+
+#### Option C: Using a script to read .env file
+
+Create a `build.sh` script:
+
+```bash
+#!/bin/bash
+# build.sh
+
+# Load environment variables from .env file
+if [ -f .env ]; then
+    export $(cat .env | grep -v '^#' | xargs)
+fi
+
+# Build Docker image with environment variables
+docker build \
+  --build-arg VITE_API_BASE_URL="$VITE_API_BASE_URL" \
+  --build-arg VITE_API_TIMEOUT="$VITE_API_TIMEOUT" \
+  --build-arg VITE_APP_TITLE="$VITE_APP_TITLE" \
+  --build-arg VITE_APP_VERSION="$VITE_APP_VERSION" \
+  --build-arg VITE_AUTH_TOKEN_KEY="$VITE_AUTH_TOKEN_KEY" \
+  --build-arg VITE_REFRESH_TOKEN_KEY="$VITE_REFRESH_TOKEN_KEY" \
+  --build-arg VITE_ENABLE_ANALYTICS="$VITE_ENABLE_ANALYTICS" \
+  --build-arg VITE_ENABLE_DEBUG="$VITE_ENABLE_DEBUG" \
+  --build-arg VITE_GOOGLE_ANALYTICS_ID="$VITE_GOOGLE_ANALYTICS_ID" \
+  --build-arg VITE_SENTRY_DSN="$VITE_SENTRY_DSN" \
+  -t sakai-vue .
+```
+
+Make it executable and run:
+
+```bash
+chmod +x build.sh
+./build.sh
+```
+
+## Available Environment Variables
+
+The following environment variables are supported in the Dockerfile:
+
+-   `VITE_API_BASE_URL` - Base URL for your API
+-   `VITE_API_TIMEOUT` - API request timeout in milliseconds
+-   `VITE_APP_TITLE` - Application title
+-   `VITE_APP_VERSION` - Application version
+-   `VITE_AUTH_TOKEN_KEY` - Key for storing auth token
+-   `VITE_REFRESH_TOKEN_KEY` - Key for storing refresh token
+-   `VITE_ENABLE_ANALYTICS` - Enable/disable analytics
+-   `VITE_ENABLE_DEBUG` - Enable/disable debug mode
+-   `VITE_GOOGLE_ANALYTICS_ID` - Google Analytics tracking ID
+-   `VITE_SENTRY_DSN` - Sentry DSN for error tracking
+
+## Security Notes
+
+1. **Never commit `.env` files** - They're already in `.gitignore`
+2. **Use `.dockerignore`** - Prevents `.env` files from being copied to the build context
+3. **Use build secrets** for sensitive data in production:
+    ```bash
+    docker build --secret id=env,src=.env -t sakai-vue .
+    ```
+
+## Troubleshooting
+
+### Environment variables not working?
+
+1. Make sure your `.env` file exists and has the correct variable names
+2. Verify the variables are prefixed with `VITE_`
+3. Check that you're passing them as build arguments
+4. Ensure the variables are available at build time (not runtime)
+
+### Build fails?
+
+1. Check that all required environment variables are provided
+2. Verify the variable names match exactly (case-sensitive)
+3. Make sure there are no syntax errors in your `.env` file
+
+## Development vs Production
+
+-   **Development**: Use `.env.local` or `.env.development`
+-   **Production**: Use `.env.production` or pass variables directly via build args
+-   **Testing**: Use `.env.test`
+
+The Dockerfile will work with any of these approaches as long as the variables are passed as build arguments.

Dockerfile

@@ -13,6 +13,30 @@ RUN npm ci
 # Copy source code
 COPY . .
 
+# Accept build-time environment variables
+ARG VITE_API_BASE_URL
+ARG VITE_API_TIMEOUT
+ARG VITE_APP_TITLE
+ARG VITE_APP_VERSION
+ARG VITE_AUTH_TOKEN_KEY
+ARG VITE_REFRESH_TOKEN_KEY
+ARG VITE_ENABLE_ANALYTICS
+ARG VITE_ENABLE_DEBUG
+ARG VITE_GOOGLE_ANALYTICS_ID
+ARG VITE_SENTRY_DSN
+
+# Set environment variables for the build
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+ENV VITE_API_TIMEOUT=$VITE_API_TIMEOUT
+ENV VITE_APP_TITLE=$VITE_APP_TITLE
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+ENV VITE_AUTH_TOKEN_KEY=$VITE_AUTH_TOKEN_KEY
+ENV VITE_REFRESH_TOKEN_KEY=$VITE_REFRESH_TOKEN_KEY
+ENV VITE_ENABLE_ANALYTICS=$VITE_ENABLE_ANALYTICS
+ENV VITE_ENABLE_DEBUG=$VITE_ENABLE_DEBUG
+ENV VITE_GOOGLE_ANALYTICS_ID=$VITE_GOOGLE_ANALYTICS_ID
+ENV VITE_SENTRY_DSN=$VITE_SENTRY_DSN
+
 # Build the application
 RUN npm run build