How to Deploy a React App for Free with Netlify: The Definitive Guide

You have spent weeks building your React application. It runs flawlessly on localhost:3000. But how do you get it out of your local machine and onto the internet for the world to see? Forget FTP uploads and complex Linux server configurations. The modern way to host Single Page Applications (SPAs) is using an Edge Platform like Netlify.

Netlify offers a generous free tier, global CDN hosting, and automatic Continuous Integration/Continuous Deployment (CI/CD). In this guide, we will connect your GitHub repository to Netlify so your site automatically updates every time you push code.

Step 1: Push Your Code to GitHub

Netlify works best when tied directly to version control. Ensure your React app is committed and pushed to a repository (public or private) on GitHub, GitLab, or Bitbucket.

Step 2: Connect Netlify to Your Repo

Create a free account at Netlify.com. Once logged in:

1. Click the Add new site button, and select Import an existing project.
2. Choose GitHub (or your Git provider). You will be prompted to authorize Netlify.
3. Select your React project repository from the list.

Step 3: Configure Build Settings

Netlify needs to know how to turn your raw React code into production-ready static files. If you used Vite or Create React App, Netlify will usually auto-detect your settings, but ensure they look like this:

• Base directory: (Leave blank unless your app is in a subfolder)
• Build command: npm run build
• Publish directory: dist (If using Vite) or build (If using Create React App).

Click Deploy Site. Netlify will spin up a server, install your npm packages, run the build command, and push the resulting files to their global edge network. Your site is now live on a temporary `.netlify.app` URL!

Step 4: The Critical "React Router" Fix

Why does this happen? Because React is a Single Page Application. There is no actual `about.html` file on the server; React handles the routing purely in JavaScript via `index.html`. Netlify gets confused when a browser directly requests `/about`.

The Fix: We must tell Netlify to redirect all traffic back to `index.html`. In your React project's public folder, create a plain text file named exactly _redirects (no extension). Inside it, paste this single line:

/*    /index.html   200

Commit this file to GitHub and push. Netlify will automatically trigger a new deployment, and your React Router links will now work flawlessly on refresh.

Step 5: Adding a Custom Domain

Finally, let's get rid of that ugly `.netlify.app` domain. Go to your Netlify site dashboard, click Domain Management, and click Add custom domain. Enter a domain you own (e.g., `myreactapp.com`). Netlify will provide you with DNS records (an A record and a CNAME) to paste into your domain registrar (like Namecheap or Cloudflare). Once DNS propagates, Netlify will automatically generate a free SSL certificate, securing your site with HTTPS.