Day 5: Deploy the Full Stack App | Deploy the Full Stack App

What You'll Build

Your full-stack AI app running live on the internet: FastAPI backend on Railway, React frontend on Vercel, connected via environment variables.

Section 1 · 10 min

Prepare for Production

Production readiness checklist:

pythonbackend/main.py (CORS update)

import os

# Read allowed origins from environment variable
FRONTEND_URL = os.getenv("FRONTEND_URL", "http://localhost:3000")

app.add_middleware(
    CORSMiddleware,
    allow_origins=[FRONTEND_URL],
    allow_methods=["*"],
    allow_headers=["*"]
)

javascriptfrontend/src/config.js

// Use environment variable for backend URL
export const API = process.env.REACT_APP_API_URL || 'http://localhost:8000';

Section 2 · 15 min

Deploy Backend to Railway

Push your backend folder to a GitHub repository (separate from frontend).

Go to railway.app → New Project → Deploy from GitHub → select backend repo.

In Railway Variables, set: ANTHROPIC_API_KEY and FRONTEND_URL (set to your Vercel URL, which you'll get in the next step — use a placeholder first).

Set start command: uvicorn main:app --host 0.0.0.0 --port $PORT. Railway provides the PORT env var automatically.

Generate Domain → copy the Railway URL (looks like your-app.up.railway.app).

Section 3 · 20 min

Deploy Frontend to Vercel

Push your React frontend to GitHub.

Go to vercel.com → New Project → Import from GitHub → select frontend repo.

In Environment Variables, add: REACT_APP_API_URL = your Railway backend URL.

Deploy. Vercel detects Create React App automatically and runs npm run build.

Once deployed, copy the Vercel URL and update the FRONTEND_URL variable in Railway. Redeploy Railway.

Two URLs cross-reference each other. Railway needs the Vercel URL for CORS. Vercel needs the Railway URL for API calls. Deploy both with placeholder values first, then update both once you have the final URLs.

What You Learned Today

How to externalize environment-specific config: API URLs in environment variables, not hardcoded
The Railway deployment flow: GitHub → detect Python → set env vars → generate domain
The Vercel deployment flow: GitHub → detect React → set env vars → build and deploy
Why CORS and API URL variables must be updated after both deployments complete

Your Challenge

Go Further on Your Own

Add a custom domain to both your Railway and Vercel deployments using a domain you own
Set up automatic redeployment: configure both Railway and Vercel to redeploy on every push to main branch (this is the default — verify it works)
Build a status page: a /status endpoint on the backend that returns version, uptime, and database connection status — and display it in the React frontend header

Day 5 Complete

Course Complete!

You finished all 5 days. Ready to go deeper?

Reserve Your Bootcamp Seat

← Day 4 Course Overview

Course Progress

100%

Want live instruction and hands-on projects? Join the AI bootcamp — 3 days, 5 cities.