Deploying to Netlify
In this page:
Basic Netlify Deployment Setup
Connecting a Git repository to Netlify and specifying a build command (like 'npm run build') plus a publish directory (like dist) is usually all that's needed — Netlify automatically builds and deploys your app on every push, without manual server setup.
Note: Netlify's free tier is generous and commonly used for personal projects, prototypes, and even many production sites.
Warning: This is a real hosting service requiring an actual account and deployment — it can't be demonstrated running inside this code preview.
Example: Deploying to Netlify from the CLI
$ npm install -g netlify-cli
$ netlify login
$ netlify init
? Build command: npm run build
? Directory to deploy: dist
$ netlify deploy --prod⚠️ Run this command in your terminal.
Fixing Client-Side Routing with Redirects
A React Router app only has ONE real HTML file (index.html) — all other pages are rendered client-side by JavaScript. Without telling Netlify this, directly loading or refreshing a page like /about returns a real 404, since no actual /about file exists on the server. A redirect rule fixes this by always serving index.html and letting React Router take over.
Note: This same 'catch-all redirect to index.html' pattern is needed on almost every static host for a client-side-routed single-page app.
Warning: Without this redirect rule, your app works fine when navigated to via Links, but breaks (404s) on a hard refresh or a directly-typed/shared URL to any non-home page.
Example: The _redirects File
$ cat public/_redirects
/* /index.html 200⚠️ Run this command in your terminal.
Setting Environment Variables on Netlify
Local .env files never get uploaded to Netlify (they're typically gitignored) — production environment variables need to be configured separately in Netlify's own site settings dashboard, so the production build has the correct values baked in during the build process.
Note: Set these once in Netlify's dashboard under Site settings > Environment variables — they persist across future deployments automatically.
Warning: Forgetting to set required environment variables in Netlify's dashboard means the deployed build runs with those values undefined, potentially breaking API calls or other config-dependent features.
Example: Setting a Netlify Environment Variable
$ netlify env:set VITE_API_URL https://api.example.com
Set environment variable VITE_API_URL with value https://api.example.com⚠️ Run this command in your terminal.
- Setting the wrong build command or publish directory, causing Netlify to serve an empty or broken site.
- Forgetting to configure a redirect rule for client-side routing (React Router), causing a 404 on any direct page load besides the homepage.
- Not setting production environment variables in Netlify's dashboard, leaving the deployed app missing config it needs.
- Netlify is a popular static-hosting platform, well-suited to deploying a React app's production build.
- Deployment typically just needs a build command (npm run build) and the output folder (dist or build).
- A redirect rule (via netlify.toml or a _redirects file) is needed for client-side routing to work on direct page loads/refreshes.
- Environment variables must be configured in Netlify's own dashboard, separate from your local .env files.
No React-version restriction — a hosting/deployment workflow, not a code feature.
Chapter Quiz — Complete all 13 topics to unlock
0/13 topics done
Complete these topics first:
- Why Performance Matters
- Optimizing with React.memo
- Avoiding Unnecessary Re-renders
- Using the React Profiler
- Analyzing Bundle Size
- Image Optimization Techniques
- React as a PWA
- Creating a Production Build
- Environment Variables in React
- Deploying to Netlify
- Deploying to Vercel
- Basic CI/CD for React Apps
- SEO Basics for React SPAs