How to Deploy a React App to Netlify
Deploy your Vite or Create React App project to Netlify. Build settings, redirects, environment variables, and custom domains.
Netlify for React apps
Netlify is ideal for static React apps and Vite-based projects. It offers continuous deployment from Git, form handling, serverless functions, and a generous free tier. If your React app doesn't need server-side rendering, Netlify is a great choice.
Build configuration
For Vite: build command is `npm run build`, publish directory is `dist`. For Create React App: build command is `npm run build`, publish directory is `build`. Netlify auto-detects most configurations, but verify these settings in your project's Build & Deploy settings.
Handling client-side routing
React apps with client-side routing (React Router) need a redirect rule. Without it, direct links to routes like /dashboard return 404. Create a `_redirects` file in your public folder with: `/* /index.html 200`. This tells Netlify to serve your app for all routes and let React Router handle them.
Environment variables
Add environment variables in Netlify's Site Settings > Environment Variables. For Vite apps, client-side variables must be prefixed with VITE_ (e.g., VITE_API_URL). For CRA, use REACT_APP_ prefix. Redeploy after adding variables — they're only available during build time.
Custom domain
In Domain Settings, add your custom domain. Configure DNS by pointing your domain to Netlify's load balancer or using Netlify DNS. SSL certificates are provisioned automatically through Let's Encrypt.
Need help with this?
Our team handles deploy & ship for AI-built apps every day. Get a fixed quote within 24 hours.
Start with a self-serve audit
Get a professional review of your app at a fixed price.
Security Scan
Black-box review of your public-facing app. No code access needed.
- OWASP Top 10 checks
- SSL/TLS analysis
- Security headers
- Expert review within 24h
Code Audit
In-depth review of your source code for security, quality, and best practices.
- Security vulnerabilities
- Code quality review
- Dependency audit
- AI pattern analysis
Complete Bundle
Both scans in one package with cross-referenced findings.
- Everything in both products
- Cross-referenced findings
- Unified action plan
100% credited toward any paid service. Start with an audit, then let us fix what we find.
Related guides
How to Deploy a Next.js App to Vercel
The complete guide to deploying your Next.
Production Readiness Checklist for AI-Built Apps
The complete checklist before launching any AI-generated app.
Environment Variables Explained for Non-Technical Founders
What environment variables are, why they matter, and how to set them up correctly.
Related technologies
Need help with your app?
Tell us about your project. We'll respond within 24 hours with a clear plan and fixed quote.