# Deploy a React App on Render: Full Guide 2026
> Learn how to deploy a React or Vite app on Render step by step, fix common errors like 404 routing and blank screens, and explore a faster alternative.
- **Author**: harsh-kanani
- **Published**: 2026-05-21
- **Modified**: 2026-05-21
- **Category**: Deployment Guides
- **URL**: https://kuberns.com/blogs/deploy-react-on-render/
---
Deploying a React app on Render is straightforward: create a Static Site, connect your GitHub repo, set your build command and publish directory, and your app is live. That is the short answer. The longer answer is that most developers hit at least one of three issues along the way: a blank screen, 404 errors on page refresh, or environment variables that silently do nothing.
This guide covers the full deployment process for both Create React App and Vite projects, the fixes for every common error, and what to do when Render's static site limitations become a bottleneck.
> If you are new to Render and want a broader overview of how the platform works before deploying a specific framework, start here: [How to Deploy on Render: Complete Guide 2026](https://kuberns.com/blogs/how-to-deploy-on-render/)
## What You Need Before You Start
Before you begin, make sure you have the following ready:
- A React or Vite project that builds cleanly locally (`npm run build` completes without errors)
- Your project pushed to a GitHub, GitLab, or Bitbucket repository
- A Render account (free tier is sufficient for static sites)
One thing worth confirming upfront: know which bundler your project uses. **Create React App** outputs the build to a `build/` folder. **Vite** outputs to `dist/`. Getting this wrong is the number one cause of blank screen after deploy.
## How to Deploy a React App on Render: Step by Step
### Step 1: Create a Static Site on Render
Log into your [Render dashboard](https://dashboard.render.com) and click **New** then **Static Site**.
Connect your GitHub account if you have not already, then select the repository containing your React project. Render will ask for two key settings:
| Setting | Create React App | Vite |
|---|---|---|
| Build Command | `npm run build` | `npm run build` |
| Publish Directory | `build` | `dist` |
Set these correctly for your project type and click **Create Static Site**. Render will trigger the first build automatically.
> For a detailed walkthrough of connecting your GitHub account and repository to Render, see: [Render GitHub Integration: How It Works and Where It Falls Short](https://kuberns.com/blogs/render-github-integration/)
### Step 2: Fix Client-Side Routing
If your app uses React Router, Reach Router, or any client-side routing library, you will get 404 errors on every route except `/` unless you add a rewrite rule.
Here is why: when a user visits `yourapp.com/dashboard` directly or refreshes the page, Render looks for a physical file at that path. That file does not exist. Your routing is handled in JavaScript. Without a rewrite rule, Render returns a 404.
**Fix:**
Go to the **Redirects/Rewrites** tab in your Static Site settings and add:
| Field | Value |
|---|---|
| Source Path | `/*` |
| Destination Path | `/index.html` |
| Action | `Rewrite` |
This tells Render to serve `index.html` for every request, letting React Router handle the routing on the client side.
### Step 3: Set Environment Variables
React and Vite both support environment variables, but they require a specific prefix to be included in the client bundle.
- **Create React App:** all variables must start with `REACT_APP_` (e.g. `REACT_APP_API_URL`)
- **Vite:** all variables must start with `VITE_` (e.g. `VITE_API_URL`)
Add your variables in the Render dashboard under the **Environment** tab of your Static Site. Important: environment variables in a React or Vite app are baked into the JavaScript bundle at build time, not at runtime. This means:
1. After adding or changing a variable, you must trigger a new deploy
2. Never store secrets (API keys, tokens, passwords) in your React/Vite app. They will be visible to anyone who inspects the page source.
### Step 4: Add a Custom Domain
In your Static Site settings, go to the **Custom Domains** tab and add your domain. Render will give you a CNAME record to add to your DNS provider. Once the DNS propagates, Render automatically provisions a TLS certificate and your app is live on your domain with HTTPS.
## Common Errors When Deploying React on Render
### Blank Screen After Deploy
**Cause:** Wrong publish directory.
**Fix:** Check whether your project uses Create React App (`build/`) or Vite (`dist/`). Update the Publish Directory in your Render Static Site settings and trigger a redeploy.
### 404 on Page Refresh or Direct URL
**Cause:** Missing rewrite rule for client-side routing.
**Fix:** Add the rewrite rule described in Step 2 above: `/* → /index.html` with action `Rewrite`.
### Environment Variables Not Working
**Cause:** Missing prefix or variables added after the last build.
**Fix:** Ensure all variables use the correct prefix (`REACT_APP_` or `VITE_`) and trigger a new deploy after adding them. Changes to environment variables do not take effect until the app is rebuilt.
### Build Fails With Node Version Error
**Cause:** Render defaults to an older version of Node.js that may be incompatible with your project.
**Fix:** Add an environment variable `NODE_VERSION` in your Render Static Site settings with the value matching your project's required Node version (e.g. `20.11.0`). This tells Render which Node version to use during the build.
## The Fastest Way to Deploy a React App: Use Kuberns
If you want to skip the manual configuration entirely, [Kuberns](https://kuberns.com) is worth knowing about.
Kuberns is an agentic AI cloud platform that reads your project, detects your React or Vite stack automatically, and handles build settings, routing configuration, environment variable management, and CI/CD without any manual setup. No publish directory to figure out, no rewrite rules to add, no redeploy-after-env-var headaches.
For full-stack React apps where your frontend talks to a Node.js or Python backend, Kuberns deploys both together in a single workflow. On Render, that requires managing two separate services and connecting them manually.
#### See It in Action
## Render vs Kuberns for React Deployment
| | Render | Kuberns |
|---|---|---|
| Stack detection | Manual | Automatic (agentic AI) |
| Build configuration | Manual | Auto-configured |
| Routing fix | Manual rewrite rule | Handled automatically |
| Environment variables | Manual, prefix required | Dashboard, no prefix needed |
| Full-stack support | Two separate services | Single unified deploy |
| Monitoring | Basic | Unified dashboard |
| CI/CD | Yes | Yes, auto-enabled |
> Render is one of several deployment platforms worth comparing before you commit. See the full breakdown: [Best Render Alternatives in 2026](https://kuberns.com/blogs/best-render-alternatives/)
## Conclusion
Deploying a React or Vite app on Render works well once you know the three things that trip most developers up: setting the correct publish directory, adding the rewrite rule for client-side routing, and using the right environment variable prefix. Get those right and your app is live in minutes.
Where Render shows its limits is when you need a full-stack setup, server-side rendering, or a deployment workflow that does not require manual configuration every time. That is where platforms built around agentic AI like Kuberns close the gap.
[Deploy your React app with Kuberns Agentic AI](https://dashboard.kuberns.com/)
## Frequently Asked Questions
### How do I deploy a React Vite app on Render?
Create a new Static Site on Render, connect your GitHub repo, set the build command to `npm run build` and the publish directory to `dist` for Vite projects. Add a rewrite rule mapping `/*` to `/index.html` to handle client-side routing. Your app will be live as soon as the build completes.
### Why is my React app showing a blank screen on Render?
A blank screen after deploy almost always means the publish directory is wrong. Create React App outputs to a `build` folder, while Vite outputs to `dist`. Check which one your project uses and update the Publish Directory field in your Render Static Site settings accordingly.
### Why do I get a 404 error on refresh in my React app on Render?
This happens because Render tries to find a physical file matching the URL path, which does not exist for client-side routes. Fix it by adding a Rewrite Rule in your Render Static Site settings: set the source path to `/*`, destination to `/index.html`, and action to `Rewrite`.
### Does Render support React Router?
Yes, but you need to configure a rewrite rule manually. Go to the Redirects/Rewrites tab in your Render Static Site dashboard and add a rule: source `/*`, destination `/index.html`, action `Rewrite`. Without this, any route other than the root will return a 404 on direct access or page refresh.
### How do I set environment variables in a React app on Render?
For Create React App, prefix all environment variable names with `REACT_APP_` (e.g. `REACT_APP_API_URL`). For Vite, use the `VITE_` prefix instead. Add these variables in the Render dashboard under Environment. After adding or changing variables, trigger a new deploy for the changes to take effect.
### Can I deploy a full-stack React app on Render?
Yes, but the frontend and backend are separate services on Render. Your React app deploys as a Static Site and your backend deploys as a Web Service. You then configure your React app to point to the backend service URL via an environment variable. On Kuberns, both services deploy together in a single workflow.
### Is Render free for React static sites?
Yes. Static sites on Render are free with no spin-down or cold start issues. The free tier includes 100GB of bandwidth per month and 500 build minutes. There is no server-side rendering capability on the free static site tier.
### What is the difference between deploying React on Render vs Kuberns?
Render requires manual configuration of build commands, publish directories, routing rewrite rules, and separate services for frontend and backend. Kuberns uses agentic AI to detect your React or Vite stack automatically, handles routing and environment setup without configuration, and deploys both your frontend and backend together in a single workflow.
---
- [More Deployment Guides articles](https://kuberns.com/blogs/category/deployment-guides/1/)
- [All articles](https://kuberns.com/blogs/)
## Frequently Asked Questions
### How do I deploy a React Vite app on Render?
Create a new Static Site on Render, connect your GitHub repo, set the build command to `npm run build` and the publish directory to `dist` for Vite projects. Add a rewrite rule mapping `/*` to `/index.html` to handle client-side routing. Your app will be live as soon as the build completes.
### Why is my React app showing a blank screen on Render?
A blank screen after deploy almost always means the publish directory is wrong. Create React App outputs to a `build` folder, while Vite outputs to `dist`. Check which one your project uses and update the Publish Directory field in your Render Static Site settings accordingly.
### Why do I get a 404 error on refresh in my React app on Render?
This happens because Render tries to find a physical file matching the URL path, which does not exist for client-side routes. Fix it by adding a Rewrite Rule in your Render Static Site settings: set the source path to `/*`, destination to `/index.html`, and action to `Rewrite`.
### Does Render support React Router?
Yes, but you need to configure a rewrite rule manually. Go to the Redirects/Rewrites tab in your Render Static Site dashboard and add a rule: source `/*`, destination `/index.html`, action `Rewrite`. Without this, any route other than the root will return a 404 on direct access or page refresh.
### How do I set environment variables in a React app on Render?
For Create React App, prefix all environment variable names with `REACT_APP_` (e.g. `REACT_APP_API_URL`). For Vite, use the `VITE_` prefix instead. Add these variables in the Render dashboard under Environment. After adding or changing variables, trigger a new deploy for the changes to take effect.
### Can I deploy a full-stack React app on Render?
Yes, but the frontend and backend are separate services on Render. Your React app deploys as a Static Site and your backend deploys as a Web Service. You then configure your React app to point to the backend service URL via an environment variable. On Kuberns, both services deploy together in a single workflow.
### Is Render free for React static sites?
Yes. Static sites on Render are free with no spin-down or cold start issues. The free tier includes 100GB of bandwidth per month and 500 build minutes. There is no server-side rendering capability on the free static site tier.
### What is the difference between deploying React on Render vs Kuberns?
Render requires manual configuration of build commands, publish directories, routing rewrite rules, and separate services for frontend and backend. Kuberns uses agentic AI to detect your React or Vite stack automatically, handles routing and environment setup without configuration, and deploys both your frontend and backend together in a single workflow.
---
- [More Deployment Guides articles](https://kuberns.com/blogs/category/deployment-guides/1/)
- [All articles](https://kuberns.com/blogs/)