{"id":29018,"date":"2026-08-20T18:26:27","date_gmt":"2026-08-20T18:26:27","guid":{"rendered":"https:\/\/www.tftus.com\/blog\/?p=29018"},"modified":"2026-08-20T18:26:30","modified_gmt":"2026-08-20T18:26:30","slug":"how-to-deploy-reactjs-app","status":"publish","type":"post","link":"https:\/\/www.tftus.com\/blog\/how-to-deploy-reactjs-app","title":{"rendered":"How to Deploy ReactJS App: Step-by-Step Guide for Beginners (2026)"},"content":{"rendered":"\n

To deploy a ReactJS app, run npm run build<\/code> 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.<\/p>\n\n\n\n

Creating a React app is fun, but at some point you must deploy it \u2014 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<\/code>) differs from Vite’s (dist<\/code>) \u2014 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.<\/p>\n\n\n\n

What Is React App Deployment?<\/h2>\n\n\n\n

React app deployment is the process of publishing your app online. A React application compiles to static files \u2014 HTML, CSS, and JavaScript \u2014 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.<\/p>\n\n\n\n

The build command (npm run build<\/code>) creates a production bundle in a build folder. With Create React App that folder is build<\/code>; with Vite it is dist<\/code>. Getting this wrong is the most common cause of a blank page after a first deployment: the host publishes an empty directory.<\/p>\n\n\n\n

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<\/a>, developers increasingly rely on Vercel, Netlify, Firebase, and GitHub Pages because they automate updates through Git-based integrations.<\/p>\n\n\n\n

Why Deployment Matters<\/h2>\n\n\n\n

Deploying makes your work usable, and React’s US reach makes that a commercial question. As Jyothish R, CTO at AIMLEAP<\/a>, noted in Forbes: over 2.9 million U.S. websites use React, including Meta, Netflix, and The New York Times.<\/p>\n\n\n\n

How you deploy affects performance directly. In Walmart’s Electrode migration<\/a>, 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.<\/p>\n\n\n\n

Create React App Is Deprecated: What That Means for Deployment<\/h2>\n\n\n\n

On February 14, 2025, the React team officially deprecated Create React App<\/a> 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 \u2014 tutorials teaching npx create-react-app<\/code> are teaching a deprecated default.<\/p>\n\n\n\n

This changes three things when you deploy your React app:<\/p>\n\n\n\n

<\/th>Create React App<\/th>Vite<\/th><\/tr><\/thead>
Scaffold command<\/td>npx create-react-app my-app<\/code><\/td>npm create vite@latest my-app<\/code><\/td><\/tr>
Build command<\/td>npm run build<\/code> (react scripts)<\/td>npm run build<\/code><\/td><\/tr>
Build folder<\/td>build<\/code><\/td>dist<\/code><\/td><\/tr>
Environment variables prefix<\/td>REACT_APP_<\/code><\/td>VITE_<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

3 Prerequisites Before You Deploy<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Set Up Your Tools<\/h3>\n\n\n\n

Install a supported Node.js LTS release on your local machine \u2014 Node 22 or Node 24 as of 2026<\/strong>. Node 18 and Node 20 are both end-of-life<\/a> and receive no security patches, and Vite 7 refuses to build<\/a> on anything below Node 20.19 or 22.12. Use nvm<\/code> if you juggle versions. Then install Git and create a GitHub account, and verify all three:<\/p>\n\n\n\n

node -v    # v22.x.x or v24.x.x\nnpm -v\ngit --version\n<\/code><\/pre>\n\n\n\n
Prepare Your React Project<\/h3>\n\n\n\n
Run the app locally and fix bugs before building. Then build and serve the bundle locally with the following command: npx serve -s build<\/code> (or dist<\/code>). 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<\/code> returning undefined<\/code> in a Vite project because Vite reads import.meta.env.VITE_*<\/code> instead.<\/p>\n\n\n\n
Repository Setup<\/h3>\n\n\n\n
Before the first commit, confirm .gitignore<\/code> excludes node_modules<\/code> and your build output (build\/<\/code> or dist\/<\/code>) \u2014 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:<\/p>\n\n\n\n
git init\ngit add .\ngit commit -m \"Initial commit\"\ngit remote add origin <YOUR_GITHUB_REPO_URL>\ngit branch -M main\ngit push -u origin main\n<\/code><\/pre>\n\n\n\n
If Git answers remote origin already exists<\/code>, you have run this before \u2014 use git remote set-url origin <URL><\/code> instead.<\/p>\n\n\n\n
Managing Environment Variables<\/h2>\n\n\n\n
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_<\/code>; in Vite, VITE_<\/code>. Add them to a .env<\/code> file in the root of your project directory:<\/p>\n\n\n\n
REACT_APP_API_KEY=your_key_here\n<\/code><\/pre>\n\n\n\n
Set them in the host’s dashboard, not just locally: on Vercel, Project \u2192 Settings \u2192 Environment Variables<\/strong>; on Netlify, Project configuration \u2192 Environment variables<\/strong>; in the AWS Amplify console, App settings \u2192 Environment variables<\/strong>. Firebase Hosting is the exception \u2014 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<\/code> file to your github repo.<\/p>\n\n\n\n
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<\/code> still in .env<\/code> watched production call localhost and fail silently for hours \u2014 the fix was a separate production env file and a rebuild. Set variables before the build, then test your API calls.<\/p>\n\n\n\n
Which Deployment Platform Should You Choose?<\/h2>\n\n\n\n
Most guides on deploying React apps push one platform. The answer depends on traffic, budget, and whether the project earns money \u2014 free hosting carries a licence, not just a bandwidth cap.<\/p>\n\n\n\n
Platform<\/th>Best for<\/th>Build folder<\/th>Free tier (2026)<\/th>Client side routing<\/th><\/tr><\/thead>
Vercel<\/td>Fastest path for most React apps<\/td>dist<\/code> \/ build<\/code><\/td>100 GB transfer, non-commercial only<\/strong><\/td>Automatic<\/td><\/tr>
Netlify<\/td>Commercial projects on a free tier<\/td>dist<\/code> \/ build<\/code><\/td>300 credits\/month, commercial allowed<\/td>_redirects<\/code> file<\/td><\/tr>
GitHub Pages<\/td>Portfolios, docs, free static site hosting<\/td>build<\/code><\/td>Free; private repos need GitHub Pro<\/td>Manual 404.html workaround<\/td><\/tr>
AWS Amplify<\/td>Teams already inside AWS<\/td>Auto-detected<\/td>1,000 build min, 5 GB stored, 15 GB served<\/td>Configurable rewrite<\/td><\/tr>
Firebase<\/td>Apps using Firebase backend services<\/td>build<\/code><\/td>10 GB Hosting storage (Spark)<\/td>Set during firebase init<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Vercel’s Hobby plan includes 100 GB of monthly data transfer and is licensed for personal, non-commercial use only \u2014 once a project takes payments, runs ads, or is built for a paying client, Vercel’s fair use guidelines require the Pro plan<\/a> 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 \u2014 deploys cost 15 credits each and bandwidth 20 credits per GB, so a media-heavy site burns the allowance fast.<\/p>\n\n\n\n
Quick decision guide:<\/strong> personal project, no revenue, low traffic \u2014 Vercel’s Hobby tier is the fastest path. Client work, a startup, or anything with payments or ads \u2014 Netlify’s commercially-permitted free tier, or Vercel Pro if you want to stay on Vercel. Portfolio, docs, or a site that rarely changes \u2014 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 \u2014 AWS Amplify. Already using Firestore, Authentication, or Cloud Functions \u2014 Firebase Hosting keeps everything in one console.<\/p>\n\n\n\n
A compliance note for US readers:<\/strong> 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 \u2014 Vercel<\/a>, Netlify<\/a>, AWS<\/a>, and Firebase<\/a> each publish which SOC 2, HIPAA, and PCI-DSS certifications apply, and none of them extend automatically to a free or entry-level plan \u2014 talk to your legal team before committing.<\/p>\n\n\n\n
How to Deploy a React App on Vercel<\/h2>\n\n\n\n
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 \u2014 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.<\/p>\n\n\n\n
Step 1: Import Your Project<\/h3>\n\n\n\n
Sign in to Vercel with GitHub, GitLab, or Bitbucket, click New Project<\/strong>, and select the react repository to deploy. Vercel detects the framework<\/a> and preconfigures the recommended build settings automatically. If detection picks the wrong preset, set the framework to Other<\/strong> and enter npm run build<\/code> with the correct output directory by hand. Deploying from a monorepo? Set Root Directory<\/strong> to the app’s subfolder before your first build.<\/p>\n\n\n\n
Step 2: Deploy and Preview<\/h3>\n\n\n\n
Click Deploy<\/strong> 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.<\/p>\n\n\n\n
When a build fails, open the deployment in the dashboard and read the Build Logs<\/strong> tab \u2014 the top failure for beginners is Module not found<\/code>, which almost always means a dependency sits in devDependencies<\/code> (or was never committed) rather than a genuine code error.<\/p>\n\n\n\n
Step 3: Configure and Scale<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
After migrating to Vercel, Runway cut build times from 5\u20138 minutes to 40 seconds<\/a>; Leonardo.Ai went from over 10 minutes to about 2<\/a>.<\/p>\n\n\n\n
How to Deploy the React App on Netlify<\/h2>\n\n\n\n
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<\/code> file your routes will need.<\/p>\n\n\n\n
Step 1: Create a New Static Site<\/h3>\n\n\n\n
Sign in and click Add New Site<\/strong> to create a new static site, then choose Import an Existing Project<\/strong>. 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<\/code>) and publish directory (build<\/code> for Create React App, dist<\/code> for Vite).<\/p>\n\n\n\n
Step 2: Confirm Build Settings<\/h3>\n\n\n\n
Netlify detects your framework and suggests a build command and publish directory. For a Create React App project it suggests<\/a> react-scripts build<\/code> and build<\/code>. For Vite, change the publish directory to dist<\/code>. Wrong directory, blank page \u2014 check this before you deploy your app. If that folder is right and the page is still blank, check for a stale homepage<\/code> field in package.json<\/code>: a value meant for GitHub Pages makes every asset load from the wrong path.<\/p>\n\n\n\n
Step 3: Manage and Update<\/h3>\n\n\n\n
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<\/strong>, then point an ALIAS<\/code>\/ANAME<\/code> record at your Netlify subdomain for the apex and a CNAME<\/code> for www<\/code>; SSL provisions automatically once DNS resolves, usually within the hour. Watch the credit meter as you go \u2014 every production deploy costs 15 credits whether the build takes 30 seconds or 10 minutes.<\/p>\n\n\n\n
How to Deploy the ReactJS App on GitHub Pages<\/h2>\n\n\n\n
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<\/strong> repo requires a paid GitHub plan, which catches students and client work most often.<\/p>\n\n\n\n
Step 1: Install the gh-pages Package<\/h3>\n\n\n\n
In your terminal, run the following command:<\/p>\n\n\n\n
npm install gh-pages --save-dev\n<\/code><\/pre>\n\n\n\n
Then add a homepage key to package.json<\/code> pointing at your GitHub Pages URL:<\/p>\n\n\n\n
\"homepage\": \"https:\/\/yourusername.github.io\/repo-name\"\n<\/code><\/pre>\n\n\n\n
Omit this key and the deploy still succeeds, but the site loads blank: React requests \/static\/js\/main.js<\/code> from the domain root instead of \/repo-name\/<\/code>, and every asset 404s.<\/p>\n\n\n\n
Step 2: Add the predeploy and deploy Scripts<\/h3>\n\n\n\n
Add these to the scripts section of package.json<\/code> so the build runs before publishing:<\/p>\n\n\n\n
\"predeploy\": \"npm run build\",\n\"deploy\": \"gh-pages -d build\"\n<\/code><\/pre>\n\n\n\n
gh-pages -d build<\/code> pushes only the contents of that folder to an orphan gh-pages<\/code> branch, leaving your source history untouched. Vite users: change it to gh-pages -d dist<\/code>.<\/p>\n\n\n\n
Step 3: Push to the GitHub Pages Branch<\/h3>\n\n\n\n
Run the following command to deploy your app: npm run deploy<\/code>. This builds and pushes the static files to the gh-pages<\/code> branch. In your github repository settings, open the Pages section and set the source to that branch.<\/p>\n\n\n\n
Expect one surprise. Developers deploy, see the homepage work, then find every route except \/<\/code> returns 404 \u2014 GitHub Pages looks for a physical file at \/about<\/code> and there isn’t one. The fix is a 404.html<\/code> fallback, invisible until after your first deployment.<\/p>\n\n\n\n
How to Deploy the React App on AWS Amplify<\/h2>\n\n\n\n
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<\/code> runs tests and linting before deploying \u2014 continuous deployment with explicit stages. Amplify’s free tier<\/a> covers 1,000 build minutes, 5 GB stored, and 15 GB served per month for the first 12 months.<\/p>\n\n\n\n
Step 1: Create App in the Amplify Console<\/h3>\n\n\n\n
Sign in to AWS and open the AWS Amplify console. Choose Create new app<\/strong>, select GitHub (or GitLab, Bitbucket, CodeCommit), authenticate, and select the repository and branch<\/a> 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 \u2014 otherwise your repo simply won’t appear in the list.<\/p>\n\n\n\n
Step 2: Build and Deploy<\/h3>\n\n\n\n
Amplify detects the React framework and generates build settings for you. Review them, then choose Save and deploy<\/strong>. Amplify installs dependencies, runs the build process, and hosts the result on a global CDN at an amplifyapp.com<\/code> domain, usually within five minutes.<\/p>\n\n\n\n
The most common build failure here is a Node version mismatch between your machine and Amplify’s image. Pin it in amplify.yml<\/code>:<\/p>\n\n\n\n
frontend:\n  phases:\n    preBuild:\n      commands:\n        - nvm use 22\n        - npm ci\n<\/code><\/pre>\n\n\n\n
Step 3: Manage and Scale<\/h3>\n\n\n\n
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 \u2014 so a busy CI pipeline, not traffic, is usually the first line on the bill.<\/p>\n\n\n\n
Firebase Hosting and Other Deployment Options<\/h2>\n\n\n\n
Firebase Hosting suits any React application already using Firestore, Authentication, or Cloud Functions. Install the CLI, then run the following command: firebase init<\/code>, choose Hosting, set build<\/code> as the public directory, then run firebase deploy to deploy your app. Firebase gives 10 GB of Hosting storage<\/a> at no cost on the Spark plan, with HTTPS and CDN delivery by default.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Deploying to Your Own Server<\/h3>\n\n\n\n
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<\/code>), otherwise every deep link 404s.<\/p>\n\n\n\n
Watch:<\/strong> How to Organize Your Application Environment Without Using Docker<\/em> \u2014 an NGINX Unit walkthrough proxying traffic to a ReactJS frontend and Python APIs from one control plane, if containers feel like overkill.<\/p>\n\n\n\n
<!-- wp:embed {\"url\":\"https:\/\/www.devnetwork.com\/online-learning\/nginx-unit-for-developers-how-to-organize-your-application-environment-without-using-docker\/\",\"type\":\"video\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.devnetwork.com\/online-learning\/nginx-unit-for-developers-how-to-organize-your-application-environment-without-using-docker\/\n<\/div><\/figure>\n<!-- \/wp:embed -->\n<\/code><\/pre>\n\n\n\n
Client Side Routing and React Router 404 Errors<\/h2>\n\n\n\n
React Router navigates between pages without reloading, which works locally and breaks on a static site host. When a user refreshes \/dashboard<\/code>, 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.<\/p>\n\n\n\n
Fix it per platform:<\/p>\n\n\n\n