Chapter 20: Deploy to Production

Take your full-stack application from your computer to the internet for the world to use.

Deployment Options

Deploy Frontend

Deploy Backend

Connect Everything

CI/CD

Quiz

Deployment Options

Deploying your app is like opening a restaurant. You have been cooking amazing dishes in your kitchen (localhost). Now it is time to find a location (hosting provider), set up the dining area (frontend), the kitchen (backend), the pantry (database), and open the doors to the public. Each part needs its own setup, but once it all comes together, you are serving customers!

Different parts of your full-stack app can be deployed to different services:

Component	Popular Options	Free Tier?
Frontend (React)	Vercel, Netlify, GitHub Pages	Yes
Backend (Node/Express)	Railway, Render, Fly.io	Yes (limited)
Database	Supabase, PlanetScale, Railway	Yes (limited)
Full Stack	Railway, Render, DigitalOcean	Varies

For beginners, Vercel (frontend) + Railway (backend + database) is a great combination. Both have generous free tiers and are very beginner-friendly.

Deploy Frontend

Deploying a React frontend to Vercel takes less than 5 minutes:

Terminal — Deploy to Vercel

# Option 1: Deploy via CLI
npm install -g vercel
vercel
# Follow the prompts:
#   - Link to your Vercel account
#   - Select your project
#   - Vercel auto-detects React/Vite and builds it

# Option 2: Deploy via GitHub (recommended)
# 1. Push your code to GitHub
# 2. Go to vercel.com → "New Project"
# 3. Import your GitHub repo
# 4. Vercel auto-detects the framework
# 5. Click "Deploy"
# 6. Your site is live at: https://your-project.vercel.app

# Every time you push to main, Vercel auto-deploys!
# Every PR gets a preview deployment URL!

Environment Variables on Vercel

Vercel Dashboard — Environment Variables

# In Vercel Dashboard: Settings → Environment Variables
# Add your production variables:

VITE_API_URL = https://your-api.railway.app
VITE_APP_NAME = My Task Manager

# Note: In Vite, frontend env vars MUST start with VITE_
# Access them in code: import.meta.env.VITE_API_URL

Deploy Backend

Deploying a Node.js backend to Railway:

Steps — Deploy Backend to Railway

# STEP 1: Prepare your project
# Make sure package.json has a "start" script:
# "scripts": { "start": "node server.js" }

# STEP 2: Deploy to Railway
# 1. Go to railway.app → Sign in with GitHub
# 2. Click "New Project" → "Deploy from GitHub Repo"
# 3. Select your backend repo
# 4. Railway auto-detects Node.js and runs npm start

# STEP 3: Add a database
# 1. In your Railway project, click "+ New"
# 2. Select "Database" → "PostgreSQL"
# 3. Railway creates a database and gives you a DATABASE_URL

# STEP 4: Set environment variables
# In Railway Dashboard → Variables tab:
# DATABASE_URL = (auto-provided by Railway)
# JWT_SECRET = your-production-secret
# NODE_ENV = production
# PORT = (auto-provided by Railway)

# Your API is live at: https://your-api.up.railway.app

Update Database Config for Production

JavaScript — Database Config for Dev & Production

const { Sequelize } = require('sequelize');

let sequelize;

if (process.env.NODE_ENV === 'production') {
    // Production: Use PostgreSQL via DATABASE_URL
    sequelize = new Sequelize(process.env.DATABASE_URL, {
        dialect: 'postgres',
        dialectOptions: {
            ssl: { rejectUnauthorized: false }
        },
        logging: false
    });
} else {
    // Development: Use local SQLite
    sequelize = new Sequelize({
        dialect: 'sqlite',
        storage: './dev-database.sqlite',
        logging: console.log
    });
}

module.exports = { sequelize };

Connect Everything

Now your frontend and backend are deployed separately. You need to connect them:

            Production Architecture

            User's Browser

            ↓

            Frontend (Vercel) — https://myapp.vercel.app

            ↓ API calls

            Backend (Railway) — https://myapi.up.railway.app

            ↓

            Database (Railway PostgreSQL)

JavaScript — Frontend API Configuration

// src/config/api.js (Frontend)
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';

export async function apiRequest(endpoint, options = {}) {
    const token = localStorage.getItem('token');

    const response = await fetch(`${API_URL}${endpoint}`, {
        ...options,
        headers: {
            'Content-Type': 'application/json',
            ...(token && { Authorization: `Bearer ${token}` }),
            ...options.headers,
        },
    });

    if (!response.ok) throw new Error(`API Error: ${response.status}`);
    return response.json();
}

// Usage:
// const tasks = await apiRequest('/api/tasks');
// const newTask = await apiRequest('/api/tasks', {
//     method: 'POST',
//     body: JSON.stringify({ title: 'New Task' })
// });

JavaScript — Backend CORS for Production

const cors = require('cors');

// Allow your frontend domain to call the API
app.use(cors({
    origin: process.env.NODE_ENV === 'production'
        ? 'https://myapp.vercel.app'     // Production: only your frontend
        : 'http://localhost:5173',        // Development: Vite dev server
    credentials: true
}));

// For multiple allowed origins:
// origin: ['https://myapp.vercel.app', 'https://www.myapp.com']

CORS is critical! Without proper CORS configuration, your frontend cannot make API calls to your backend. The browser blocks cross-origin requests by default for security.

CI/CD (Continuous Integration / Continuous Deployment)

CI/CD is like an automatic assembly line in a factory. Instead of manually inspecting and shipping each product (deployment), the assembly line automatically tests every product (CI) and ships it if it passes all checks (CD). Every time you push code, tests run automatically, and if everything passes, it gets deployed.

CI (Continuous Integration) = Automatically run tests when code is pushed
CD (Continuous Deployment) = Automatically deploy when tests pass

.github/workflows/ci.yml — GitHub Actions

name: CI/CD Pipeline

# Run on every push to main and on pull requests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      # 1. Check out the code
      - uses: actions/checkout@v4

      # 2. Set up Node.js
      - uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'npm'

      # 3. Install dependencies
      - run: npm ci

      # 4. Run linter (code style checks)
      - run: npm run lint

      # 5. Run tests
      - run: npm test

      # 6. Build the project
      - run: npm run build

  # Deployment happens automatically via Vercel/Railway
  # when the above checks pass and code is merged to main

Deployment Checklist

#	Task	Status
1	Environment variables set on hosting platform	Required
2	Database migrated / synced	Required
3	CORS configured for production domain	Required
4	HTTPS enabled (most hosts do this automatically)	Required
5	Security middleware (helmet, rate limiter) active	Recommended
6	Error logging set up	Recommended
7	CI/CD pipeline configured	Recommended
8	Custom domain connected	Optional

📝 Chapter 20 Quiz

1. Which platform is best for deploying a React frontend?

Railway

Vercel

SQLite Cloud

Docker Hub

2. Why would your deployed frontend fail to fetch data from your deployed backend?

Because they are on different hosting providers

Because the frontend needs a database too

CORS is not configured to allow the frontend domain

Because fetch() only works on localhost

3. How should you set environment variables in production?

Through the hosting platform's dashboard or settings

Commit the .env file to GitHub

Hard-code them in the source code

Email them to the server admin

4. What does CI/CD automate?

Writing code and fixing bugs

Creating Git branches

Database backups only

Testing code and deploying when tests pass

5. In a Vite/React app, what prefix must frontend environment variables have?

REACT_APP_

VITE_

PUBLIC_

No prefix needed

Congratulations! You Did It!

You have completed the Full Stack JavaScript course!

You now have the knowledge to build and deploy full-stack web applications. Here is what you have learned:

Frontend — HTML, CSS, JavaScript, React
Backend — Node.js, Express, REST APIs
Database — SQL, Sequelize ORM
Security — Authentication, JWT, Hashing
DevOps — Git, Docker, CI/CD, Deployment

The best way to learn is to build projects. Start with a personal project, contribute to open source, and never stop learning. You have got this!

← Chapter 19: Environment & Build 🏠 Course Home