Deployment and Going Live - Activity 12 - Discovery Challenge

Welcome to your final activity! Learn how to deploy your Quest Tracker app to production using modern hosting platforms (Netlify and Railway).

🎯 Learning Objectives

By completing this activity, you will:

• Deploy a full-stack application to production hosting services
• Configure environment variables for different environments (dev/production)
• Set up automated health checks and monitoring
• Understand build optimization for production performance
• Implement security best practices (HTTPS, CORS, environment secrets)
• Configure custom domains and SSL certificates
• Learn CI/CD deployment pipeline concepts

🚀 Getting Started

⚡ Quick Start (See Results in 30 Seconds!)

IMPORTANT: This template includes WORKING deployment configurations! You can review them immediately:

1. Navigate to this folder in your terminal/command prompt
2. View the deployment guide:
   bash

   npm install
   npm start
   

3. Open your browser to: http://localhost:3000
4. Review the configurations - they're ready to use!
   • Frontend: frontend/netlify.toml (Netlify config)
   • Backend: backend/railway.toml (Railway config)
   • Scripts: scripts/ folder (automated deployment)

🎯 What's Already Working

65% of the configuration is implemented for you:

• ✅ Netlify deployment config (fully configured)
• ✅ Railway deployment config (fully configured)
• ✅ Environment variable templates (ready to use)
• ✅ Health check script (working)
• ⚠️ Custom deployment scripts (TODO for you)
• ⚠️ Production environment variables (TODO for you)
• ⚠️ Monitoring setup (TODO for you)

📝 Your Learning Tasks

1. First, review the working configurations to understand the deployment architecture
2. Then complete the TODO sections following the deployment guide (see detailed TODOs in code files)
3. Finally, deploy your app to production and verify it works

💡 Pro Tip: This activity includes 5 advanced TODO markers embedded in the deployment scripts. Look for detailed comments marked with TODO 1 through TODO 5 in:

• backend/.env.example (Environment Configuration - Easy)
• scripts/deploy-backend.js (Build Process - Medium)
• scripts/deploy-frontend.js (Deployment Script - Medium)
• scripts/health-check.js (Error Monitoring - Hard)
• See TODO 5 below for CI/CD Pipeline instructions

📋 Tasks to Complete

TODO 1: Set Up Deployment Accounts (Easy)

Create accounts on hosting platforms and connect your GitHub repository.

Platforms Required:

• Netlify (for frontend): https://netlify.com
• Railway (for backend): https://railway.app

Success Criteria:

• Both accounts created and verified
• GitHub repository connected to both platforms
• SSH keys or OAuth configured for automatic deployments

TODO 2: Configure Environment Variables (Medium)

Set up production environment variables for both frontend and backend.

Frontend Variables to Configure:

REACT_APP_API_URL=https://your-api.railway.app
REACT_APP_API_KEY=your-production-api-key
REACT_APP_ENVIRONMENT=production

Backend Variables to Configure:

NODE_ENV=production
DATABASE_URL=postgresql://user:pass@host:port/db
JWT_SECRET=your-jwt-secret

Success Criteria:

• All required environment variables set in platform dashboards
• No secrets committed to git repository
• Environment variables properly loaded in production

TODO 3: Deploy Backend to Railway (Medium)

Deploy your Quest Tracker API to Railway using the provided configuration.

Steps:

1. Create new Railway project
2. Connect GitHub repository
3. Set root directory to backend
4. Configure environment variables
5. Deploy and verify health endpoint

Success Criteria:

• Backend deployed successfully
• Health check endpoint responds: /health
• API endpoints accessible with API key
• Logs show no errors

TODO 4: Deploy Frontend to Netlify (Medium)

Deploy your Quest Tracker frontend to Netlify using the provided configuration.

Steps:

1. Create new Netlify site
2. Connect GitHub repository
3. Set build settings (base: frontend, command: npm run build)
4. Configure environment variables with Railway API URL
5. Deploy and verify site loads

Success Criteria:

• Frontend deployed successfully
• All pages navigate correctly
• API calls reach Railway backend
• HTTPS automatically configured

TODO 5: Set Up Health Monitoring (Challenge)

Implement automated health checks and monitoring for your deployed application.

Requirements:

• Create automated health check script
• Test all critical endpoints
• Set up uptime monitoring (UptimeRobot or similar)
• Configure error tracking (Sentry optional)

Success Criteria:

• Health check script runs successfully
• All endpoints return expected responses
• Uptime monitoring alerts configured
• Error logging captures production issues

🛠️ Configuration Reference

Netlify Configuration

The frontend/netlify.toml file configures your frontend deployment:

[build]
  publish = "dist"              # Output directory after build
  command = "npm run build"     # Build command

[[redirects]]
  from = "/api/*"               # Proxy API requests
  to = "https://your-api.railway.app/api/:splat"
  status = 200

[[redirects]]
  from = "/*"                   # SPA routing support
  to = "/index.html"
  status = 200

Key Features:

• Automatic HTTPS with free SSL certificates
• Global CDN for fast content delivery
• Environment variable management in dashboard
• Git integration for automatic deployments

Railway Configuration

The backend/railway.toml file configures your backend deployment:

[build]
  builder = "NIXPACKS"          # Auto-detect Node.js
  buildCommand = "npm install --production"

[deploy]
  startCommand = "npm start"    # Command to run server
  healthcheckPath = "/health"   # Health check endpoint

[env]
  NODE_ENV = "production"       # Production mode
  PORT = "$PORT"                # Railway assigns port

Key Features:

• Docker-based container deployment
• Automatic health checks and restarts
• Database integration (PostgreSQL, Redis)
• Environment variable encryption

🔐 Environment Variables Guide

Why Environment Variables?

Environment variables keep sensitive data (API keys, database credentials) out of your code. They allow different configurations for development and production.

Frontend Variables (.env.example)

# API Configuration
REACT_APP_API_URL=https://your-api.railway.app
REACT_APP_API_KEY=your-production-api-key
REACT_APP_ENVIRONMENT=production

How to Set in Netlify:

1. Go to Site settings -> Build & deploy -> Environment
2. Click "Add variable"
3. Enter key and value
4. Redeploy to apply changes

Backend Variables (.env.example)

# Server Configuration
NODE_ENV=production
PORT=3000

# Database (Railway provides automatically)
DATABASE_URL=postgresql://user:pass@host:port/db

# Security (generate with: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))")
JWT_SECRET=your-secure-random-secret
API_RATE_LIMIT=1000

How to Set in Railway:

1. Go to Variables tab in your project
2. Click "New Variable"
3. Enter key and value
4. Railway automatically restarts service

🚀 Deployment Commands

Available Scripts

# View deployment guide
npm start

# Run health checks
npm run health-check

# Deploy frontend (requires Netlify CLI)
npm run deploy:frontend

# Deploy backend (requires Railway CLI)
npm run deploy:backend

CLI Installation (Optional)

# Install Netlify CLI
npm install -g netlify-cli
netlify login

# Install Railway CLI
npm install -g @railway/cli
railway login

🧪 Testing Your Deployment

Automated Health Checks

Run the provided health check script to validate your deployment:

npm run health-check

The script checks:

• Frontend accessibility (site loads)
• Backend health endpoint (/health)
• API endpoint responses
• CORS configuration
• Response times

Manual Testing Checklist

Test these critical features after deployment:

• Frontend loads without console errors
• All pages navigate correctly
• API calls receive data from backend
• Quest creation and listing works
• Authentication flows work (if implemented)
• Error messages display properly
• Mobile responsiveness verified
• HTTPS connection shows padlock icon

Performance Testing

# Test API response time
curl -w "Time: %{time_total}s\n" https://your-api.railway.app/health

# Test frontend load time (use browser DevTools)
# Network tab → Reload page → Check "Load" time (should be < 3s)

Common Issues & Solutions

Issue: API calls fail with CORS errors Solution: Check Netlify redirects in netlify.toml point to correct Railway URL

Issue: Environment variables not loading Solution: Verify variables are set in platform dashboard and redeploy

Issue: Backend health check fails Solution: Verify /health endpoint exists and Railway service is running

Issue: Build fails on Netlify Solution: Check build logs for errors, verify npm run build works locally

🎓 Extension Challenges

Ready to level up your deployment skills? Try these bonus features:

Beginner Extensions

• Custom Domain: Purchase and configure a custom domain (e.g., myquesttracker.com)
• Uptime Monitoring: Set up UptimeRobot to alert you when your app goes down
• SSL Certificate: Verify your HTTPS certificate details and expiration date
• Build Badge: Add a Netlify deployment status badge to your GitHub README

Advanced Extensions

• Database Integration: Add PostgreSQL to Railway and persist quest data
• Error Tracking: Integrate Sentry for real-time error monitoring
• CI/CD Pipeline: Set up GitHub Actions for automated testing before deployment
• Performance Monitoring: Add Lighthouse CI to track performance scores
• Staging Environment: Create a separate staging deployment for testing

<!-- ============================================================================= TODO 5: CI/CD Pipeline Integration (Hard)

OBJECTIVE: Create a complete CI/CD pipeline with automated testing and deployment

WHAT TO DO:

1. Create .github/workflows/deploy.yml file in your repository root
2. Add pre-deployment test stage (run npm test for both frontend/backend)
3. Implement deployment approval step (manual gate for production)
4. Add post-deployment validation (run health checks automatically)
5. Configure environment secrets in GitHub repository settings

SUCCESS CRITERIA: ✓ GitHub Actions workflow file is created and committed ✓ Pipeline runs tests before deploying (fail fast on test errors) ✓ Manual approval is required before production deployment ✓ Health checks run automatically after deployment ✓ Pipeline fails and rolls back if health checks fail ✓ Deployment status is posted to Slack/Discord (bonus)

LEARNING GOALS:

• Understand CI/CD pipeline architecture
• Learn GitHub Actions workflow syntax
• Practice automated testing in pipelines
• Implement deployment gates and approvals
• Configure secrets management

DEPLOYMENT STAGES:

1. Test Stage: Run unit tests, linting, security audit
2. Build Stage: Create production builds for frontend/backend
3. Deploy Staging: Deploy to staging environment first
4. Approval Gate: Manual approval required for production
5. Deploy Production: Deploy to production environment
6. Health Check: Automated validation of deployment
7. Notify: Send deployment status notifications

EXAMPLE WORKFLOW STRUCTURE:

# .github/workflows/deploy.yml
name: Deploy Quest Tracker

on:
  push:
    branches: [ main ]
  workflow_dispatch:  # Manual trigger

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install and Test Backend
        run: |
          cd backend
          npm ci
          npm test
      - name: Install and Test Frontend
        run: |
          cd frontend
          npm ci
          npm test

  deploy-staging:
    needs: test
    runs-on: ubuntu-latest
    environment: staging
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Staging
        run: |
          npm run deploy:backend
          npm run deploy:frontend
      - name: Run Health Checks
        run: npm run health-check

  deploy-production:
    needs: deploy-staging
    runs-on: ubuntu-latest
    environment: production  # This adds manual approval gate
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Production
        run: |
          npm run deploy:backend
          npm run deploy:frontend
      - name: Run Production Health Checks
        run: npm run health-check

HINT: Use GitHub Environments (Settings -> Environments) to add protection rules HINT: Add RAILWAY_TOKEN and NETLIFY_AUTH_TOKEN to GitHub Secrets HINT: Use actions/checkout@v3, actions/setup-node@v3 for setup HINT: Test the workflow locally with act (

Creative Extensions

• Progressive Web App: Make your app installable on mobile devices
• Analytics Dashboard: Add Google Analytics to track user behavior
• Multiple Environments: Set up dev, staging, and production environments
• Automated Backups: Schedule database backups using Railway cron jobs
• Load Balancing: Deploy to multiple regions for global availability

🏆 Success Criteria

Your deployment is complete when:

• ✅ Frontend deployed to Netlify with HTTPS
• ✅ Backend deployed to Railway and responding
• ✅ Environment variables configured correctly
• ✅ Health checks passing for all endpoints
• ✅ API calls work between frontend and backend
• ✅ No console errors on production site
• ✅ Mobile responsiveness verified
• ✅ Deployment documentation complete

📚 Additional Resources

Platform Documentation

• Netlify Docs - Frontend deployment guide
• Railway Docs - Backend deployment guide
• Netlify CLI - Command-line deployment
• Railway CLI - CLI reference

Deployment Best Practices

• 12 Factor App - Modern app deployment principles
• Express.js Production Best Practices
• Web Performance Optimization
• Security Headers Guide

Monitoring & Analytics

• UptimeRobot - Free uptime monitoring
• Sentry - Error tracking and monitoring
• Google Lighthouse - Performance auditing

🎉 Congratulations!

Once you complete this project, you'll have:

• Deployed a full-stack application to production
• Configured professional hosting environments
• Implemented health monitoring and security
• Gained confidence with modern deployment platforms

This is a major milestone! Your Quest Tracker app is now live on the internet for the world to use. You've learned the complete journey from development to production deployment!

Need Help?

• Check platform status pages (Netlify Status, Railway Status)
• Review deployment logs for error messages
• Verify environment variables match between platforms
• Test locally first with npm start before deploying
• Join the Netlify/Railway community forums for support

Happy deploying! 🚀