Skip to main content

​
Two deployments, not one

Just like development, your frontend and backend deploy separately. Different platforms, different processes — but they connect the same way: the frontend makes HTTP requests to the backend’s URL.

​
Deploy the frontend (React)

React builds to static files — HTML, CSS, and JavaScript. Any static hosting platform can serve them.

​
Build for production

This creates a dist/ folder with your optimized app. That’s what gets deployed. The easiest way to deploy a React app. Connects to your GitHub repo and deploys automatically on every push.
1

Push your code to GitHub

Make sure your frontend/ folder is in a GitHub repository.
2

Sign up at vercel.com

Sign in with your GitHub account.
3

Import your repository

Click “New Project” → select your repo → set the root directory to frontend/.
4

Add environment variables

In project settings, add VITE_API_URL with your backend’s production URL.
5

Deploy

Vercel builds and deploys automatically. You get a URL like myapp.vercel.app.

​
Netlify (alternative)

Same idea as Vercel. Connect GitHub, set build command to npm run build, publish directory to dist/.
Both Vercel and Netlify have generous free tiers. For personal projects and portfolios, you won’t need to pay.

​
Deploy the backend (FastAPI)

Your Python backend needs a server that can run a process. This is different from static hosting — it’s running actual code.
1

Push your backend to GitHub

Make sure your backend/ folder has a requirements.txt with all dependencies.
2

Sign up at railway.app

Sign in with your GitHub account.
3

New project → Deploy from GitHub repo

Select your repo and set the root directory to backend/.
4

Add a start command

Set the start command to: uvicorn main:app --host 0.0.0.0 --port $PORT
5

Add environment variables

Add DATABASE_URL, SECRET_KEY, ALLOWED_ORIGINS (set to your frontend’s production URL).
6

Deploy

Railway builds and deploys. You get a URL like myapp-api.up.railway.app.

​
Render (alternative)

Similar to Railway. Create a new “Web Service,” connect your GitHub repo, set the start command, add environment variables.

​
Requirements file

Make sure your requirements.txt is complete:
Add any other packages your backend uses (SQLAlchemy, httpx, etc.).

​
Environment variables in production

This is where the .env pattern from the course pays off. In development, you read from .env files. In production, you set environment variables in your hosting platform’s dashboard.
Set in Vercel → Project Settings → Environment Variables.
Update ALLOWED_ORIGINS on your backend to include your frontend’s production URL. Without this, CORS will block all requests — the exact same error from the CORS lesson, but in production.

​
The deployment checklist

Before deploying, verify:
  • npm run build completes without errors (frontend)
  • requirements.txt includes all Python packages (backend)
  • Environment variables are set in both platforms
  • ALLOWED_ORIGINS includes your frontend’s production URL
  • .env files are NOT committed to Git
  • Backend start command uses --host 0.0.0.0 (not localhost)

​
After deployment

Test your production app:
  1. Open your frontend URL in a browser
  2. Open DevTools → Network tab
  3. Check that API requests go to your production backend URL
  4. Test all CRUD operations
  5. Check the Console for any errors
If something works locally but not in production, it’s almost always one of three things: wrong VITE_API_URL, missing ALLOWED_ORIGINS, or a missing environment variable. Check these first.

​
What’s next?

Your app is live on the internet. One more lesson — where to get help when you’re stuck.

Get help

Join the community, ask questions, and keep learning