How to Deploy a React App

What you’ll build or solve

You’ll publish a React app to a live environment.

When this approach works best

This approach works best when:

• You finished development and want to share the app publicly.
• You need a live demo for a client or portfolio.
• You are testing real production behavior such as routing and environment variables.
• You want to connect a custom domain.

This is a bad idea if your project does not build successfully. Fix build errors before deploying.

Prerequisites

• A working React project
• Node.js installed
• Dependencies installed with npm install
• A successful production build:

npm run build

Create React App generates a build folder. Vite generates a dist folder. You will deploy the contents of that folder.

• An account on a hosting platform such as Vercel or Netlify, or access to a static web server

Step-by-step instructions

Step 1: Deploy with Vercel

This is one of the simplest options.

Install the Vercel CLI:

npm install-g vercel

Then, from your project root:

vercel

Follow the prompts. Vercel detects React projects automatically. It runs the build if needed and deploys the output.

After deployment, Vercel provides a live URL.

What to look for

• Deploy only the production output, not src or node_modules.
• If the app uses environment variables, set them in the Vercel dashboard.
• If routes return 404 on refresh, confirm the project is treated as a single-page app.

Step 2: Deploy with Netlify

Netlify offers two common approaches.

Option A: CLI deployment

Install the CLI:

npm install-g netlify-cli

Run:

netlify deploy

When prompted for the publish directory, enter:

• build for Create React App
• dist for Vite

After testing, you can run:

netlify deploy--prod

to push to production.

Option B: Drag and drop

• Open the Netlify dashboard.
• Drag the build or dist folder into the deploy area.
• Netlify uploads and hosts the files automatically.

What to look for

• Publish the correct folder.
• Set environment variables in the site settings if your app depends on them.
• Enable SPA routing if you use client-side routes.

Step 3: Deploy to static hosting manually

If you have access to your own server, you can deploy manually.

Run the build command if you have not already:

npm run build

Upload the contents of the build or dist folder to your server’s public directory, such as /public_html or /var/www/html.

Configure your server to serve index.html for unknown routes.

Example for Nginx:

location / {
  try_files $uri /index.html;
}

This prevents 404 errors when refreshing client-side routes.

What to look for

• Upload only the compiled files, not the entire project.
• Confirm your server supports static file hosting.
• Add HTTPS and proper domain configuration if needed.

Examples you can copy

Example 1: Deploy to Vercel quickly

cd my-react-app
npm run build
vercel

Follow the CLI prompts and open the generated URL.

Example 2: Deploy to Netlify via CLI

npm run build
netlify deploy--prod

Enter build or dist when prompted.

Example 3: Deploy to shared hosting

npm run build

Upload the contents of the build folder using FTP to /public_html, then configure routing to use index.html.

Common mistakes and how to fix them

Mistake 1: Uploading source code instead of production files

What you might do:

Upload the entire project folder, including src.

Why it breaks:

Browsers cannot run uncompiled development source code directly.

Correct approach:

Upload only the contents of the build or dist folder.

Mistake 2: Not configuring SPA routing

What you might do:

Deploy successfully, but refreshing a route shows 404.

Why it breaks:

Single-page apps rely on client-side routing, and the server does not know how to handle those paths.

Correct approach:

Configure your server to always serve index.html for unknown routes.

Mistake 3: Missing production environment variables

What you might do:

Use environment variables locally but forget to define them on the hosting platform.

Why it breaks:

The app cannot access required API endpoints or configuration.

Correct approach:

Add environment variables in your hosting dashboard, then redeploy.

Troubleshooting

If the build fails before deployment, fix the build error first.

If the site loads as a blank page, check the browser console for runtime errors.

If assets return 404, confirm the correct publish directory was used.

If API requests fail, verify environment variables in your hosting settings.

If your domain does not resolve, check DNS configuration and propagation.

Quick recap

• Build your app to generate build or dist.
• Deploy the production folder to Vercel, Netlify, or a static server.
• Configure SPA routing for client-side navigation.
• Set production environment variables.
• Open the public URL and confirm the app loads.