How to Deploy a React Project — A Non-Developer’s Guide to Vercel and Netlify

React deployment is the process of uploading your code to GitHub, letting a platform build it, and getting a live URL. If you’re here looking for how to handle React deployment, chances are you’ve already built the code but got stuck at the “how do I share this as a link?” stage. This guide covers everything you need.

If you’ve exported code from Figma Make and finished editing it in VS Code, there’s just one step left: turning a project that only works on your machine into a URL anyone can visit — in other words, React deployment. It might sound intimidating, but once you break it down, it’s simpler than you’d expect. You don’t need to set up a server yourself. Platforms like Vercel and Netlify handle the build and hosting for you.

If you’re still getting familiar with exporting from Figma Make and working in VS Code, check out How to Use Figma Make and VS Code Together: A Practical Setup for Mock API Login and UI Editing first.

The Overall React Deployment Flow

The basic structure of React deployment is straightforward.

1. Upload your local project to GitHub
2. Vercel or Netlify builds it automatically
3. A URL is generated

That’s it — three steps. It looks complicated, but each platform handles most of the configuration automatically, so there’s actually very little you need to touch yourself.

Vercel vs Netlify — A Non-Developer Comparison

Both platforms offer free plans and work well for React deployment. Here’s how they differ.

Feature	Vercel	Netlify
GitHub Integration	One-click Import for auto deploy	Connect via New site from Git
React Detection	Auto-detects and sets defaults	Framework auto-detection supported
Configuration	Mostly automatic, minimal input	Build command and Publish directory visible for review
Comfort Level	Fast, but you might wonder “what settings were applied?”	You can verify settings as you go, which feels reassuring for beginners
Deploy URL	*.vercel.app	*.netlify.app

Bottom line: both are perfectly valid choices. Just pick whichever one is less likely to trip you up.

How to Deploy React with Vercel

Upload Your Project to GitHub

First, create a new repository on GitHub, then commit and push your local project. In the terminal, the flow is git init → git add . → git commit → git remote add → git push. If you use GitHub Desktop, you can do the same thing through the GUI. This completes the “deployment prep.” From here, it’s just a few button clicks.

Import → Deploy on Vercel

1. Log in to Vercel with your GitHub account
2. Click New Project on the dashboard and select (Import) the GitHub repository you just pushed
3. Vercel auto-detects your React project and sets the build command and output directory for you
4. Click Deploy — the build starts, and once it’s done, you’ll get a *.vercel.app URL immediately

Vercel’s official documentation confirms that it detects React and automatically applies the correct settings. You literally just Import and the deployment proceeds. After that, every time you push code to GitHub, it automatically redeploys.

How to Deploy React with Netlify

Start with New site from Git

1. Log in to Netlify
2. Select New site from Git → Connect to GitHub
3. Choose the repository you want to deploy

Set the Build Command and Publish Directory

This is where most mistakes happen — specifically with the Publish directory. The correct value depends on which tool your project uses.

Tool	Build Command	Publish Directory
Vite	npm run build	dist
Create React App	npm run build	build

Netlify auto-detects your framework and suggests recommended values, but it’s a good habit to double-check. Open your package.json — if you see vite, set it to dist; if you see react-scripts, set it to build. Click Deploy site and your URL is generated. Just like Vercel, subsequent pushes to GitHub trigger automatic redeployments.

Fixing the React Router Refresh 404 Problem

Projects using React Router (BrowserRouter) may get a 404 error when you refresh on a path like /about after deployment. If you haven’t set up React Router itself yet, check out Figma-Generated React Code Won’t Go Back? Set Up React Router first.

The reason is simple. React handles routing on the client side, but the server looks for an actual file at that path. Since there’s no /about folder or file on the server, it returns a 404. The fix is to add a rule that says “send all requests to index.html,” and it only takes one line per platform.

Vercel — Add vercel.json

Create a vercel.json file at your project root (same level as package.json) and add the following.

 { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

This rewrites all path requests to index.html. Vercel’s official documentation specifies that rewrites are defined via vercel.json.

Netlify — Add a _redirects File

Create a _redirects file inside your public folder and write this single line.

 /* /index.html 200

When you specify a 200 status code on Netlify, it acts as a rewrite rather than a redirect. During the build, this file is automatically copied to the output folder (dist or build).

Common React Deployment Mistakes and Troubleshooting

Most issues people encounter during React deployment fall into these four categories.

Deploy Succeeds but the Screen Is Blank

This usually means the Publish directory is set differently from your actual build output folder. Check whether it should be dist (for Vite) or build (for Create React App). Review the Publish directory value in Netlify’s Deploy settings. If your project uses a monorepo structure, the root path might not be the default, so check the Base directory as well.

Build Fails — Works Locally but Breaks on Deploy

Run npm run build locally before deploying to make sure it actually passes. If the local build fails, the deployment will break in exactly the same way. Common culprits include type errors, incorrect import paths, and unused variable warnings being treated as errors. CSS conflicts can also break the layout — if that’s the case, refer to When Your Figma Make Code Breaks in VS Code: Start by Checking the globals.css & index.css Conflict. Vite in particular may skip TypeScript type checking during build in some configurations while being strict in others, so local build testing is essential.

API Not Connecting Due to Environment Variables (.env)

The .env file doesn’t get uploaded to GitHub, so it won’t automatically carry over to the deployment environment. You need to manually enter the same values in the Environment Variables section of the Vercel or Netlify dashboard.

Environment variable prefixes also differ by framework. Only variables starting with VITE_ (for Vite) or REACT_APP_ (for Create React App) are accessible on the client side. Variables without the correct prefix are ignored during build, so if an API key shows up as undefined after deployment, check the variable name first. On Vercel, go to Settings → Environment Variables. On Netlify, go to Site configuration → Environment variables.

React Router Refresh 404

In the vast majority of cases, this is caused by a missing vercel.json or _redirects file. Refer to the React Router section above and add the appropriate file.

Wrapping Up

If you’ve followed along this far, you’ve gone from “having code” to “having a shareable URL.” Uploading to GitHub, letting the platform build it, and getting a URL — those three steps are all there is to React deployment.

The two most common sticking points for first-time React deployment are the Publish directory setting and the React Router 404 issue. Nail those two, and the platform handles the rest. Whether you pick Vercel or Netlify, try it once and you’ll find it takes about five minutes from the second time onward. The moment your project is deployed, it goes from “code on my computer” to “a service I can share with a single link.” React deployment — once you try it, it’s really no big deal.