To deploy a ReactJS app, run npm run build to generate a production bundle, push the project to a git repository, then connect that repo to a static site host such as Vercel, Netlify, GitHub Pages, or AWS Amplify. The host runs your build command, publishes the output folder, and redeploys automatically on every git push. Most first deployments finish in under ten minutes.
Creating a React app is fun, but at some point you must deploy it — where most beginners stall. The stall is rarely the platform. It is that the tool most tutorials still open with, Create React App, was deprecated in February 2025, and its output folder (build) differs from Vite’s (dist) — mismatch that folder and you ship a blank white page. This guide covers the hosting services for deploying React apps, the steps for each, the routing and environment variables traps, and a validation checklist to run before you share the URL.
What Is React App Deployment?
React app deployment is the process of publishing your app online. A React application compiles to static files — HTML, CSS, and JavaScript — served from a web host or a content delivery network. Unlike server side applications, a standard React app needs no runtime on the server, only a place to serve static assets.
The build command (npm run build) creates a production bundle in a build folder. With Create React App that folder is build; with Vite it is dist. Getting this wrong is the most common cause of a blank page after a first deployment: the host publishes an empty directory.
Knowing how the deployment process works helps you select a cloud platform. Some offer static site hosting only; others add server side rendering and serverless functions. According to a 2024 LogRocket analysis of React deployment options, developers increasingly rely on Vercel, Netlify, Firebase, and GitHub Pages because they automate updates through Git-based integrations.
Why Deployment Matters
Deploying makes your work usable, and React’s US reach makes that a commercial question. As Jyothish R, CTO at AIMLEAP, noted in Forbes: over 2.9 million U.S. websites use React, including Meta, Netflix, and The New York Times.
How you deploy affects performance directly. In Walmart’s Electrode migration, moving Walmart.com to React with server side rendering made the home page 20% faster and cut JavaScript bundle size by 20%. Rendering strategy is a deployment decision, not an afterthought.
Create React App Is Deprecated: What That Means for Deployment
On February 14, 2025, the React team officially deprecated Create React App for new apps and recommended migrating to a framework or to a build tool such as Vite, Parcel, or Rsbuild. Create React App still works in maintenance mode but receives no new features — tutorials teaching npx create-react-app are teaching a deprecated default.
This changes three things when you deploy your React app:
| Create React App | Vite | |
|---|---|---|
| Scaffold command | npx create-react-app my-app | npm create vite@latest my-app |
| Build command | npm run build (react scripts) | npm run build |
| Build folder | build | dist |
| Environment variables prefix | REACT_APP_ | VITE_ |
Following an older tutorial on a new react project? Check which column you are in before configuring any build settings. Everything else here applies to both.
3 Prerequisites Before You Deploy
Three things must be in place before your first deployment: a supported Node runtime, an app whose production build runs clean locally, and a github repository the host can watch.
Set Up Your Tools
Install a supported Node.js LTS release on your local machine — Node 22 or Node 24 as of 2026. Node 18 and Node 20 are both end-of-life and receive no security patches, and Vite 7 refuses to build on anything below Node 20.19 or 22.12. Use nvm if you juggle versions. Then install Git and create a GitHub account, and verify all three:
node -v # v22.x.x or v24.x.x
npm -v
git --version
Prepare Your React Project
Run the app locally and fix bugs before building. Then build and serve the bundle locally with the following command: npx serve -s build (or dist). Production builds fail differently from dev mode, and this catches the two classic beginner failures: an import whose casing works on macOS but breaks on the host’s Linux filesystem, and process.env.REACT_APP_API_KEY returning undefined in a Vite project because Vite reads import.meta.env.VITE_* instead.
Repository Setup
Before the first commit, confirm .gitignore excludes node_modules and your build output (build/ or dist/) — committing them bloats version control and slows every build. Then initialise Git in your project directory to put the app under version control, then create a new github repository and push to it:
git init
git add .
git commit -m "Initial commit"
git remote add origin <YOUR_GITHUB_REPO_URL>
git branch -M main
git push -u origin main
If Git answers remote origin already exists, you have run this before — use git remote set-url origin <URL> instead.
Managing Environment Variables
Set these before your first deployment, not after. Environment variables keep sensitive data such as API keys out of your code. In Create React App they must be prefixed REACT_APP_; in Vite, VITE_. Add them to a .env file in the root of your project directory:
REACT_APP_API_KEY=your_key_here
Set them in the host’s dashboard, not just locally: on Vercel, Project → Settings → Environment Variables; on Netlify, Project configuration → Environment variables; in the AWS Amplify console, App settings → Environment variables. Firebase Hosting is the exception — it serves static files with no build-time variable UI of its own, so values usually ride in your CI step or in Cloud Functions config instead. Never commit a .env file to your github repo.
One detail catches almost everyone: React bakes environment variables into the bundle at build time, not runtime. A team that shipped with REACT_APP_API_URL=localhost:8000 still in .env watched production call localhost and fail silently for hours — the fix was a separate production env file and a rebuild. Set variables before the build, then test your API calls.
Which Deployment Platform Should You Choose?
Most guides on deploying React apps push one platform. The answer depends on traffic, budget, and whether the project earns money — free hosting carries a licence, not just a bandwidth cap.
| Platform | Best for | Build folder | Free tier (2026) | Client side routing |
|---|---|---|---|---|
| Vercel | Fastest path for most React apps | dist / build | 100 GB transfer, non-commercial only | Automatic |
| Netlify | Commercial projects on a free tier | dist / build | 300 credits/month, commercial allowed | _redirects file |
| GitHub Pages | Portfolios, docs, free static site hosting | build | Free; private repos need GitHub Pro | Manual 404.html workaround |
| AWS Amplify | Teams already inside AWS | Auto-detected | 1,000 build min, 5 GB stored, 15 GB served | Configurable rewrite |
| Firebase | Apps using Firebase backend services | build | 10 GB Hosting storage (Spark) | Set during firebase init |
Vercel’s Hobby plan includes 100 GB of monthly data transfer and is licensed for personal, non-commercial use only — once a project takes payments, runs ads, or is built for a paying client, Vercel’s fair use guidelines require the Pro plan at $20 per seat per month. Netlify permits commercial use on its free plan, but accounts opened since September 2025 get 300 credits per month rather than the legacy 100 GB — deploys cost 15 credits each and bandwidth 20 credits per GB, so a media-heavy site burns the allowance fast.
Quick decision guide: personal project, no revenue, low traffic — Vercel’s Hobby tier is the fastest path. Client work, a startup, or anything with payments or ads — Netlify’s commercially-permitted free tier, or Vercel Pro if you want to stay on Vercel. Portfolio, docs, or a site that rarely changes — GitHub Pages costs nothing and needs no compliance review. A team already running infrastructure on AWS, or expecting to scale past a few thousand monthly users — AWS Amplify. Already using Firestore, Authentication, or Cloud Functions — Firebase Hosting keeps everything in one console.
A compliance note for US readers: free-tier hosting is rarely certified for regulated data. If your app handles PII, payments, or health information, check the provider’s own compliance page before deploying anything that touches user data — Vercel, Netlify, AWS, and Firebase each publish which SOC 2, HIPAA, and PCI-DSS certifications apply, and none of them extend automatically to a free or entry-level plan — talk to your legal team before committing.
How to Deploy a React App on Vercel
Vercel is a cloud platform for Jamstack web apps and web services that deploy instantly with zero configuration. Of all the ways of deploying React apps, this is the fastest route to deploy a React application — three steps, typically under five minutes from import to live URL, because Vercel auto-detects both Create React App and Vite and sets the build command and output directory for you.
Step 1: Import Your Project
Sign in to Vercel with GitHub, GitLab, or Bitbucket, click New Project, and select the react repository to deploy. Vercel detects the framework and preconfigures the recommended build settings automatically. If detection picks the wrong preset, set the framework to Other and enter npm run build with the correct output directory by hand. Deploying from a monorepo? Set Root Directory to the app’s subfolder before your first build.
Step 2: Deploy and Preview
Click Deploy to deploy your app. Vercel installs dependencies, creates an optimized production build, and publishes to a live URL within minutes. Every code commit generates a new deployment, and every pull request gets a preview URL for review before going live.
When a build fails, open the deployment in the dashboard and read the Build Logs tab — the top failure for beginners is Module not found, which almost always means a dependency sits in devDependencies (or was never committed) rather than a genuine code error.
Step 3: Configure and Scale
From the project console, add environment variables, connect custom domains, and create multiple project aliases so staging and production point at different builds. Vercel’s edge network absorbs traffic spikes without manual server management.
After migrating to Vercel, Runway cut build times from 5–8 minutes to 40 seconds; Leonardo.Ai went from over 10 minutes to about 2.
How to Deploy the React App on Netlify
Netlify offers a modern workflow for building and deploying web applications, with continuous deployment from a git repository, and the same deployment process on every push. Budget for two things upfront: the free plan’s 300 monthly credits, and the _redirects file your routes will need.
Step 1: Create a New Static Site
Sign in and click Add New Site to create a new static site, then choose Import an Existing Project. Connect your GitHub, GitLab, or Bitbucket account, authorise access, and pick your react project repository. Netlify then asks for two fields that decide whether the deploy works: build command (npm run build) and publish directory (build for Create React App, dist for Vite).
Step 2: Confirm Build Settings
Netlify detects your framework and suggests a build command and publish directory. For a Create React App project it suggests react-scripts build and build. For Vite, change the publish directory to dist. Wrong directory, blank page — check this before you deploy your app. If that folder is right and the page is still blank, check for a stale homepage field in package.json: a value meant for GitHub Pages makes every asset load from the wrong path.
Step 3: Manage and Update
Netlify gives you a unique URL immediately, and every git push triggers a new build. Netlify supports custom domains on every plan: open Domain settings > Add a domain, then point an ALIAS/ANAME record at your Netlify subdomain for the apex and a CNAME for www; SSL provisions automatically once DNS resolves, usually within the hour. Watch the credit meter as you go — every production deploy costs 15 credits whether the build takes 30 seconds or 10 minutes.
How to Deploy the ReactJS App on GitHub Pages
GitHub Pages is a static site hosting service built into GitHub, ideal for portfolios, documentation, and small business landing pages. It is free for public repos but designed for static websites, and static websites alone, with no native support for client side routing. Publishing from a private repo requires a paid GitHub plan, which catches students and client work most often.
Step 1: Install the gh-pages Package
In your terminal, run the following command:
npm install gh-pages --save-dev
Then add a homepage key to package.json pointing at your GitHub Pages URL:
"homepage": "https://yourusername.github.io/repo-name"
Omit this key and the deploy still succeeds, but the site loads blank: React requests /static/js/main.js from the domain root instead of /repo-name/, and every asset 404s.
Step 2: Add the predeploy and deploy Scripts
Add these to the scripts section of package.json so the build runs before publishing:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
gh-pages -d build pushes only the contents of that folder to an orphan gh-pages branch, leaving your source history untouched. Vite users: change it to gh-pages -d dist.
Step 3: Push to the GitHub Pages Branch
Run the following command to deploy your app: npm run deploy. This builds and pushes the static files to the gh-pages branch. In your github repository settings, open the Pages section and set the source to that branch.
Expect one surprise. Developers deploy, see the homepage work, then find every route except / returns 404 — GitHub Pages looks for a physical file at /about and there isn’t one. The fix is a 404.html fallback, invisible until after your first deployment.
How to Deploy the React App on AWS Amplify
AWS Amplify offers a Git-based CI/CD workflow for building, deploying, and hosting single page web apps and static sites with serverless backends, deploying updates on every git commit. Teams needing more control than git push use GitHub Actions: a GitHub Actions workflow in .github/workflows runs tests and linting before deploying — continuous deployment with explicit stages. Amplify’s free tier covers 1,000 build minutes, 5 GB stored, and 15 GB served per month for the first 12 months.
Step 1: Create App in the Amplify Console
Sign in to AWS and open the AWS Amplify console. Choose Create new app, select GitHub (or GitLab, Bitbucket, CodeCommit), authenticate, and select the repository and branch to deploy. If the repo belongs to a GitHub organisation rather than your personal account, an org owner must approve the Amplify GitHub app first — otherwise your repo simply won’t appear in the list.
Step 2: Build and Deploy
Amplify detects the React framework and generates build settings for you. Review them, then choose Save and deploy. Amplify installs dependencies, runs the build process, and hosts the result on a global CDN at an amplifyapp.com domain, usually within five minutes.
The most common build failure here is a Node version mismatch between your machine and Amplify’s image. Pin it in amplify.yml:
frontend:
phases:
preBuild:
commands:
- nvm use 22
- npm ci
Step 3: Manage and Scale
The amplify console monitors your branch and triggers a fresh build on every git commit. From there you manage custom domains, SSL, environment variables, and build logs. Costs start once you pass the free tier: $0.01 per build minute, $0.023 per GB stored, and $0.15 per GB served — so a busy CI pipeline, not traffic, is usually the first line on the bill.
Firebase Hosting and Other Deployment Options
Firebase Hosting suits any React application already using Firestore, Authentication, or Cloud Functions. Install the CLI, then run the following command: firebase init, choose Hosting, set build as the public directory, then run firebase deploy to deploy your app. Firebase gives 10 GB of Hosting storage at no cost on the Spark plan, with HTTPS and CDN delivery by default.
Also worth knowing: Render for a React frontend plus a web service backend, Cloudflare Pages, and S3 with CloudFront on AWS. Static site generators and frameworks such as Next.js add static site generation and SSR when SEO demands pre-rendered HTML.
Deploying to Your Own Server
Deploying to a company’s existing infrastructure? Cloud platform tutorials are the wrong guide. You need nginx or Apache with an SPA fallback (try_files $uri /index.html), otherwise every deep link 404s.
Watch: How to Organize Your Application Environment Without Using Docker — an NGINX Unit walkthrough proxying traffic to a ReactJS frontend and Python APIs from one control plane, if containers feel like overkill.
<!-- wp:embed {"url":"https://www.devnetwork.com/online-learning/nginx-unit-for-developers-how-to-organize-your-application-environment-without-using-docker/","type":"video"} -->
<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
https://www.devnetwork.com/online-learning/nginx-unit-for-developers-how-to-organize-your-application-environment-without-using-docker/
</div></figure>
<!-- /wp:embed -->
Client Side Routing and React Router 404 Errors
React Router navigates between pages without reloading, which works locally and breaks on a static site host. When a user refreshes /dashboard, the server looks for a file at that path, finds nothing, and returns 404. Routing configuration is what makes single page apps survive a refresh.
Fix it per platform:
- Vercel: handled automatically for SPAs.
- Netlify: create a new
_redirectsfile inpubliccontaining/* /index.html 200. - GitHub Pages: create a new
404.htmlcopy ofindex.htmlso React Router handles the path. - Firebase: answer “yes” to the single-page app rewrite prompt during
firebase init. - nginx: add
try_files $uri /index.html;to your location block.
Never deploy your react app without testing React Router routes directly and on refresh. Broken deep links read as a broken site.
Post-Deployment Validation Checklist
A successful build is not a working app. Platforms return a green tick when the build compiles, while the live app can still show a blank screen from a runtime error or wrong base path. Run this before sharing:
- Open the deployed URL in incognito and check the console for errors.
- Visit at least three routes directly, then refresh each one.
- Confirm API calls succeed and CORS headers are correct.
- Verify environment variables resolved to production values, not localhost.
- Check that images and static assets load, not just the HTML shell.
- Run Lighthouse for Core Web Vitals before traffic arrives.
“The Core Web Vitals established by Google serve as direct ranking factors. The performance metrics of Largest Contentful Paint (LCP) and Interaction To Next Paint (INP) suffer degradation when bundles become too large, negatively affecting organic traffic.”
— Raju Dandigam, Engineering Manager, Navan (Forbes Technology Council, 2025)
3 Common Mistakes to Avoid
Three mistakes account for most failed first deployments, and each has a distinct symptom:
| Symptom | Cause | Fix |
|---|---|---|
sh: react-scripts: command not found | Dependency missing from package.json or node_modules committed | npm ci locally, verify the dependency, redeploy |
| Blank white page, no console errors | Wrong publish directory or stale homepage field | Match build vs dist; clear homepage |
Works on /, 404s everywhere else | No SPA routing fallback | Add _redirects, 404.html, or try_files |
API calls hit localhost in production | Env vars baked in at build time | Set vars in the host dashboard, rebuild |
1. Skipping the Local Production Build Test
Developers test with npm start in dev mode, deploy, then discover production behaves differently. The dev server proxies API calls and tolerates loose import casing; the production bundle does neither. Always run the following command locally first: npm run build && npx serve -s build.
2. Hardcoding Secrets
Don’t commit API keys, even in .env.production. Once a key is in git history, rotating it becomes a security incident, not a settings change. Store keys in the hosting dashboard.
3. Ignoring Bundle Size
A 5 MB bundle that feels fine on office fibre bounces mobile users on 3G. Measure before guessing: run npx source-map-explorer 'build/static/js/*.js' (or npx vite-bundle-visualizer on Vite), then apply code splitting, lazy loading, and a CDN for static assets.
“The optimization of bundle size functions as a vital key performance indicator (KPI), affecting three essential business areas: User Retention: Extended loading times result in higher user abandonment rates. If a delay is longer than three seconds, user engagement (and therefore revenue generation) is more likely to decrease.”
— Raju Dandigam, Engineering Manager, Navan (Forbes Technology Council, 2025)
Conclusion
Deploying React apps shouldn’t be hard or costly. Pick the platform matching your traffic, licence, and infrastructure, get the output folder right, configure client side routing and environment variables before you deploy your React application, and validate the live URL rather than trusting a green build. A clean React project on Vercel goes from import to live URL in about the time a single Create React App build used to take — Runway’s whole pipeline dropped to 40 seconds. Keep the checklist above open on your second monitor for the first deploy; by the third it will be muscle memory.
FAQs
Q1. What is the easiest way to deploy a React app?
Vercel or Netlify. Connect your github repository, confirm the build command and publish directory, and click deploy. Both handle SSL, custom domains, and client side routing with no configuration, and redeploy on every git push.
Q2. Can I deploy a React app for free?
Yes. GitHub Pages, Netlify, Vercel, Firebase, and Cloudflare Pages all have free tiers covering most small to medium projects. Read the licence, not just the limit: Vercel’s Hobby plan is restricted to non-commercial personal projects, while Netlify’s free tier permits commercial use.
Q3. How can I deploy a React app in 5 minutes?
Push your react project to GitHub, import it into Vercel, and click Deploy to deploy your app. Framework detection sets the build command for you, so the whole first deployment is typically three clicks and a two-minute build.
Q4. How do I deploy a React app on GitHub Pages?
Install gh-pages, add a homepage field to package.json, add predeploy and deploy scripts, then run npm run deploy. Set the repository’s Pages source to that branch and add a 404.html fallback so deep links don’t break.
Q5. What common errors happen during React deployment?
Blank screens from a wrong publish directory or base path, 404s on refresh from missing SPA routing rules, API calls failing because environment variables were baked in at build time, and CORS errors when frontend and backend sit on different domains.
Q6. What are environment variables, and why do I need them?
They store configuration and secrets outside your code — API keys, endpoints, feature flags. They’re read at build time, must be prefixed (REACT_APP_ or VITE_), and belong in your hosting platform’s dashboard, never in a git repository.
Q7. What is the difference between Netlify and AWS Amplify?
Netlify is simpler and ideal for small deployments and a frontend-only React application. AWS Amplify supports serverless backends, databases, and enterprise-scale applications, with a steeper learning curve and deeper AWS integration.
Leave a Reply