Local Production Testing

Testing Production Build Locally #

This guide explains how to test the webapp production build locally with proper configuration for Clerk authentication and CORS.

⚠️ Warning: The changes described in this document are for testing purposes only and should never be committed to the repository as they contain sensitive credentials.

Overview #

Testing the production build locally requires two main changes:

  1. Adding Clerk credentials to the webapp Dockerfile
  2. Configuring nginx CORS to allow the local webapp URL

Prerequisites #

  • Docker and Docker Compose running locally
  • Access to Clerk test credentials
  • Local development environment set up

web-app in dev environment would be allocated port 3000, so the production version should run on port 3001, we will use port 3001 for NGINX config and Docker commands.

Step 1: Configure Clerk Credentials in Dockerfile #

Edit the apps/webapp/Dockerfile and add the following environment variables before the CMD instruction (around line 55):

ENV CLERK_JWT_PUBLIC_KEY="<CLERK_JWT_PUBLIC_KEY>"
ENV CLERK_SECRET_KEY="<CLERK_SECRET_KEY>"
ENV CLERK_WEBHOOK_SIGNING_SECRET="<CLERK_WEBHOOK_SIGNING_SECRET>"

Step 2: Configure nginx CORS #

Edit tools/local/nginx/nginx.conf and add your local webapp URL to the CORS mapping section (around line 12):

map "$http_origin" $cors {
    default '';
    "~^https?://localhost:3001?$" "$http_origin";
    "~^http?://localhost:3001?$" "$http_origin";
    # Add the webapp URL to the cors variable
    # Add your local webapp local here
}

Step 3: Restart nginx Container #

After making the nginx configuration changes, restart the nginx container:

# If using Docker Compose
docker-compose restart nginx

# Or if running nginx container individually
docker restart <nginx-container-name>

Step 4: Build and Run Production Webapp #

Build and run the webapp production container:

# Build the production image
docker buildx build -t webapp-prod -f apps/webapp/Dockerfile --build-arg DOPPLER_TOKEN="<doppler_token>" --build-arg DOPPLER_CONFIG=dev_local .

# Run the production container
docker run --name=webapp-prod --network=host webapp-prod:latest

# Run the production container on Mac (network=host does not work)
docker run --name=webapp-prod -p 3001:3001 -d webapp-prod:latest

Step 5: Verify the Setup #

  1. Check webapp is running: Navigate to http://localhost:3000 (as example of the port on 3000)
  2. Verify Clerk authentication: Try to sign in
  3. Test API connectivity: Ensure the webapp can communicate with the local API through nginx
  4. Check CORS: Verify no CORS errors in browser developer tools

Troubleshooting #

Common Issues #

Clerk Authentication Errors

  • Verify all three Clerk environment variables are correctly set
  • Ensure the JWT public key is properly formatted with \n for line breaks

CORS Errors

  • Check that your webapp URL pattern matches the nginx configuration
  • Verify nginx container has been restarted after configuration changes
  • Ensure the port number in the CORS mapping matches your webapp port

Container Connection Issues

  • Verify all containers are on the same Docker network
  • Check Docker container logs for specific error messages

Logs #

Check container logs for debugging:

# Webapp logs
docker logs <webapp-container-name>

# nginx logs
docker logs <nginx-container-name>

# API logs
docker logs <bonsapi-container-name>

Cleanup #

After testing, remember to:

  1. Revert Dockerfile changes: Remove the Clerk environment variables
  2. Revert nginx.conf changes: Remove the added webapp URL patterns
  3. Don’t commit these changes: These are for local testing only