# How to Deploy a React App on Netlify (2026 Guide) > Deploy a React app on Netlify via GitHub, CLI, or drag-and-drop. Covers Vite React, env vars, SPA routing fixes, and smarter alternatives in 2026. - **Author**: priya-nambiar - **Published**: 2026-05-25 - **Modified**: 2026-05-25 - **Category**: Deployment Guides - **URL**: https://kuberns.com/blogs/deploy-react-app-on-netlify/ --- You can deploy a React app on Netlify in a few minutes. Connect your GitHub repo, set a build command, pick a publish directory, and your app is live. For a simple static frontend, it works well enough. But most React apps in 2026 are not simple static frontends. They have routing, environment variables, backend APIs, and scale requirements that Netlify was not built to handle. This guide covers the standard Netlify setup, where it breaks down, what it actually costs, and why more developers are switching to Kuberns for React deployments. If you want to understand [what Netlify is and how it works under the hood](https://kuberns.com/blogs/netlify-guide/) before diving in, start there first. ## What You Need Before Deploying a React App on Netlify ![What you need before deploying React on Netlify](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/what-you-need-before-deploying-react-netlify.png) Before you deploy, make sure you have these in place: - **Node.js 18 or later** installed on your machine - **A React app** built with either Create React App (CRA) or Vite - **A GitHub account** with your project pushed to a repository - **A Netlify account** (the free tier is enough to start) One thing worth knowing upfront: CRA and Vite produce different build output folders. - CRA outputs to `build/` - Vite outputs to `dist/` This matters when you configure Netlify. Getting the publish directory wrong is one of the most common reasons a React deployment silently fails or shows a blank page. Keep this in mind before you touch a single setting. > **Thinking about deploying Next.js instead?** [Here is how to deploy a Next.js app on Netlify](https://kuberns.com/blogs/deploy-nextjs-on-netlify/) with the same GitHub-first approach. ## How to Deploy a React App on Netlify via GitHub ![How to deploy a React app on Netlify via GitHub](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/how-to-deploy-react-app-netlify-github.png) This is the standard deployment path and the one Netlify recommends. **Step 1: Connect your GitHub repo** Log in to Netlify, click **Add new site**, and select **Import an existing project**. Authorise Netlify to access your GitHub account and select your React repo. **Step 2: Configure your build settings** Netlify will try to auto-detect your framework. Double-check the settings: | Setting | Create React App | Vite | |---|---|---| | Build command | `npm run build` | `npm run build` | | Publish directory | `build` | `dist` | | Node version | 18+ | 18+ | **Step 3: Add a `netlify.toml` file (recommended)** Instead of relying on the dashboard, commit a `netlify.toml` to your repo root for consistent builds: ```toml [build] command = "npm run build" publish = "dist" [build.environment] NODE_VERSION = "18" ``` For CRA, change `publish = "dist"` to `publish = "build"`. **Step 4: Deploy** Click **Deploy site**. Netlify pulls your repo, runs the build command, and serves the output folder. Every push to your main branch triggers a new deploy automatically. This works cleanly for a static React frontend. Once your app needs routing, environment variables, or a backend, the next section is where things get complicated. > **Already on Render and comparing options?** [See how deploying React on Render compares](https://kuberns.com/blogs/deploy-react-on-render/) before committing to a platform. ## Where Netlify React Deployments Break Down ![Where Netlify React deployments break down](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/where-netlify-react-deployments-break-down.png) The GitHub deploy works. Then you add React Router, or a `.env` file, or a backend API, and things start to break in ways that are not immediately obvious. ### The React Router 404 Problem Netlify serves static files. React Router handles routes on the client side using `pushState`. When a user refreshes a page at `/dashboard` or navigates directly to a deep URL, Netlify looks for a real file at that path, finds nothing, and returns a 404. **Fix 1: Add a `_redirects` file** Create a file at `public/_redirects` (CRA) or `public/_redirects` (Vite) with this single line: ``` /* /index.html 200 ``` This tells Netlify to serve `index.html` for every route and let React Router take over. **Fix 2: Use `netlify.toml` redirects** Add this to your `netlify.toml`: ```toml [[redirects]] from = "/*" to = "/index.html" status = 200 ``` Both approaches fix the 404. The `netlify.toml` method is cleaner if you already have that file in your repo. ### Environment Variable Prefix Hell Netlify exposes environment variables to the browser only if they have the right prefix. Get it wrong and your variable is silently undefined with no error message. - **Create React App:** variables must start with `REACT_APP_` - **Vite:** variables must start with `VITE_` So `API_KEY` becomes `REACT_APP_API_KEY` in CRA or `VITE_API_KEY` in Vite. Mixing these up is a silent failure that is surprisingly hard to debug the first time you hit it. ### Build Minute and Bandwidth Caps Netlify's free tier gives you 300 build minutes per month and 100GB of bandwidth. For a solo project with occasional deploys, this is fine. For a team pushing multiple times a day or an app with real traffic, you hit these limits faster than expected. ### No Persistent Backend Netlify is a static hosting and edge function platform. It was not built for backend services. Netlify Functions handle lightweight serverless endpoints, but they come with cold start latency, 10-second execution limits, and no persistent state. If your React app talks to a backend you also want to host, Netlify cannot host it. You need a separate service. That split adds complexity, latency between frontend and backend, and another platform to manage. > **Wondering if your backend can live on Netlify at all?** [Here is the honest answer on deploying a backend on Netlify](https://kuberns.com/blogs/can-you-deploy-backend-on-netlify/). ## What Netlify Actually Costs for a React App ![What Netlify actually costs for a React app](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/what-netlify-costs-for-react-app.png) The free tier is generous for static sites. For a production React app, the numbers shift quickly. **Free tier:** - 300 build minutes per month - 100GB bandwidth - 1 concurrent build - Netlify Functions: 125,000 invocations/month, 10s execution limit **Pro plan at $19/month per member:** - 1,000 build minutes - 400GB bandwidth - 3 concurrent builds - 125,000 function invocations still included **Where the hidden costs appear:** - **Extra build minutes:** $7 per 500 additional minutes - **Bandwidth overages:** $20 per 100GB over the limit - **Forms:** 100 submissions/month free, $19/month for 1,000 - **Analytics:** $9/month add-on per site A medium-traffic React app on the Pro plan with moderate overages can easily run $40 to $80 per month, without a backend. Add the cost of a separate backend host and you are paying for two platforms to run one app. > **Want the full breakdown?** [Netlify pricing in 2026 explained with real numbers](https://kuberns.com/blogs/netlify-pricing/). ## The Smarter Way to Deploy React in 2026 with Kuberns Agentic AI ![Deploy React with Kuberns Agentic AI](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/kuberns-home-page-new.png) Netlify was built for a world where deploying a frontend was the hard part. In 2026, the hard part is deploying everything together, frontend, backend, environment config, and scaling, without spending an afternoon on configuration. Kuberns is an Agentic AI deployment platform built exactly for this. **How Kuberns deploys your React app:** 1. Connect your GitHub repo to Kuberns 2. The AI agent detects your React framework automatically (CRA or Vite) 3. Build command and publish directory are set for you, no `netlify.toml` needed 4. Environment variables are detected and prompted during setup 5. Click Deploy. Your app is live with HTTPS in under 5 minutes No `_redirects` file. No env var prefix confusion. No manual build config. **What Kuberns handles that Netlify does not:** - Full-stack React deployments with Node.js or Python backends in a single deploy - No build minute caps, no bandwidth overage charges - No cold starts on serverless functions, Kuberns runs on Kubernetes with persistent containers - Auto-scaling based on real traffic, not fixed plan limits - Up to 40% cost savings compared to managing AWS directly For a React app that is just a static marketing site, Netlify works fine. For anything with a backend, real users, or growth plans, you are building on the wrong foundation. ## Stop Configuring, Start Shipping Deploying a React app on Netlify is not hard. The setup takes minutes. But the configuration tax compounds over time. The `_redirects` file, the env var prefixes, the build minute watching, the backend split, these are all problems you should not be solving in 2026. Modern React apps ship with backends, real-time features, and dynamic APIs. They need a platform that treats the whole stack as one deployable unit, not just a static file host with functions bolted on. Kuberns gives your React app Kubernetes-grade infrastructure, Agentic AI that configures everything for you, and a single deploy that covers frontend and backend together. Free credits to get started, no credit card required. [Deploy your React app on Kuberns today](https://dashboard.kuberns.com/) If you are evaluating other platforms before deciding, [here are the best Netlify alternatives in 2026](https://kuberns.com/blogs/best-netlify-alternatives/) with honest comparisons across pricing, features, and backend support. Deploy React with Kuberns ## Frequently Asked Questions About Deploying React on Netlify ### Q: Can I deploy a Vite React app on Netlify? Yes. Set the build command to `npm run build` and the publish directory to `dist`. Netlify auto-detects Vite in most cases. You still need to add a `_redirects` file or configure `netlify.toml` for React Router to work correctly on page refreshes. ### Q: Why is my React app showing a 404 on Netlify after page refresh? Netlify serves static files. When you refresh a route handled by React Router, Netlify looks for a real file at that path, finds nothing, and returns a 404. Fix it by adding a `_redirects` file in your `public` folder with the rule `/* /index.html 200`, or add the equivalent `[[redirects]]` block to your `netlify.toml`. ### Q: What is the build command for React on Netlify? The build command is `npm run build` for both Create React App and Vite. The publish directory is `build` for Create React App and `dist` for Vite. Using the wrong publish directory results in a blank page or a 404 after deploy. ### Q: How do I add environment variables to a React app on Netlify? Go to **Site Settings** then **Environment Variables** in the Netlify dashboard. For Create React App, prefix variables with `REACT_APP_`. For Vite, prefix them with `VITE_`. Variables without the correct prefix are not exposed to the browser and will be silently undefined at runtime. ### Q: Does Netlify support a React backend or API? Not natively. Netlify is built for static frontends. Netlify Functions provide lightweight serverless endpoints, but they have cold start latency, 10-second execution limits, and no persistent state. For full-stack React apps with a backend, platforms like Kuberns deploy both frontend and backend together without these constraints. ### Q: Can I deploy a full-stack React app on Netlify? Netlify is not designed for full-stack apps. You can host the React frontend and use Netlify Functions for basic API routes, but persistent backend services, databases, and long-running processes are not supported. Kuberns supports full-stack React deployments including Node.js or Python backends in a single deploy with no extra configuration. ### Q: What is a smarter alternative to Netlify for React apps in 2026? Kuberns is the strongest alternative for React deployments in 2026. Its Agentic AI detects your React framework, configures build settings automatically, and deploys your full-stack app without any config files. Unlike Netlify, Kuberns has no build minute caps, supports persistent backends, and scales on Kubernetes infrastructure. [Start deploying on Kuberns](https://dashboard.kuberns.com/). --- - [More Deployment Guides articles](https://kuberns.com/blogs/category/deployment-guides/1/) - [All articles](https://kuberns.com/blogs/)