AIAPIDate & TimeImageJSONMathNext.jsSecuritySEOTextDesignDatabase
All ToolsWorkspacesWorkflowsLearnError EncyclopediaAboutPrivacyTermsContactEmail

© 2026 Web Util Slyce. All tools run client-side — your data stays private.

How to Deploy a React App

Deploying a React app means building static assets (HTML, CSS, JS) and serving them. Vercel and Netlify offer one-click deploys from Git. Docker containerizes the app for any cloud. Traditional hosting needs a web server configured for SPAs.

Try Docker Cheat Sheet

Overview

React apps compile to static files during the build step. These static files can be served by any web server, CDN, or hosting platform. For SPAs, configure the server to fall back to index.html for all routes so client-side routing works. Modern platforms like Vercel handle this automatically.

Prerequisites

  • A React app with a production build script
  • A Git repository linked to your hosting platform
  • A package.json with build and start scripts

Step-by-Step Instructions

1

Build your React app

Run the production build to generate optimized static files. npm run build # Output goes to the build/ or dist/ directory The build process minifies code, optimizes images, and generates hashed filenames for caching.

2

Deploy to Vercel

Connect your Git repository to Vercel. It auto-detects React, runs the build, and deploys. npx vercel # Or connect via vercel.com dashboard Vercel handles HTTPS, CDN, and SPA routing automatically.

3

Deploy to Netlify

Connect Git repo to Netlify. Set build command to npm run build and publish directory to build/. Netlify also handles form submissions, serverless functions, and redirects via a _redirects file: /* /index.html 200

4

Deploy with Docker

Create a multi-stage Dockerfile for production. FROM node:20-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

Common Mistakes to Avoid

  • Forgetting to set the homepage field in package.json for GitHub Pages deployment
  • Not configuring SPA fallback — results in 404 on page refresh for sub-routes
  • Using the wrong Node.js version in CI/CD — match your development version
  • Not optimizing the bundle before deployment — run analyze tools to check bundle size

Related Tools

Docker Cheat Sheet Git Cheat Sheet How to Set Up HTTPS JavaScript Cheat Sheet

Frequently Asked Questions

Do I need a server for a React app?

No. React apps are static files. You can serve them from any CDN, S3 bucket, or static host. Vercel and Netlify are the simplest options.

How do I handle environment variables in production?

Variables prefixed with REACT_APP_ (CRA) or VITE_ (Vite) are inlined at build time. Set them in your hosting platform's dashboard.