Stop 15 · DevOps & DeploymentTopics · 3/8

Deploying the Frontend

Part of the Full Stack Developer Roadmap

In short

Your React app builds into plain HTML, CSS and JS files. Deploying it means putting those files on a CDN near your users, with HTTPS, preview links and the right API URL baked in.

Shipping your React/Next.js frontend to production — typically to Vercel or Netlify, which handle builds, CDN distribution and HTTPS automatically.

The blob character packs identical sealed paper packets into a row of wooden crates.

Think of it like this

Question papers to every centre

Exam papers are printed once at a central press, sealed, and sent to centres in every city so students don't travel far. A frontend build is printed once too, and the CDN keeps identical copies near users everywhere. Change a question? You print a fresh batch: a new build.

Watch it happen

From git push to a CDN near you

git push

Install

Build

Upload

CDN edge

1/6You push to GitHub. Vercel or Netlify notices the new commit.

The big ideas

What you need to know

Static files on a CDN

A React single-page app is just files. A CDN serves them fast and cheaply, with no server for you to run.

SPA fallback

Send unknown paths to index.html, so refreshing /orders/42 loads the app instead of a 404.

Cache hashed files forever

Files with a hash in their name never change, so cache them for a year. Keep index.html short-lived.

Preview deploys

Every pull request gets its own URL. Test the real build there before merging to main.

See it in code

Walk through the code

json

1{2  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }],3  "headers": [4    {5      "source": "/assets/(.*)",6      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]7    }8  ]9}

1/2Any path that isn't a real file gets index.html, and React Router takes over in the browser.

vercel.json for a Vite React app. Real files are served first, so the rewrite only catches app routes. On Netlify, a _redirects line '/* /index.html 200' does the same job.

Save yourself the pain

Common mistakes

Oops

Refreshing /dashboard on the live site and getting a 404.

Do this instead

Add the SPA fallback to index.html. Next.js apps don't need it, but plain React apps do.

Oops

Deploying a build that still points at localhost:4000.

Do this instead

Set VITE_API_URL in the host's environment settings before the build runs, then redeploy.

Your mission

Ship your React app

~25 min

Quick check

After deploying, refreshing https://myshop.in/orders shows a 404, but navigating to /orders inside the app works. Why?

Go deeper

1Deploy your frontend to Vercel or Netlify, connected to your GitHub repo for auto-deploys.
2Configure the production environment variable pointing to your deployed backend's URL.
3Confirm preview deployments work correctly for pull requests.