How to deploy React app on Netlify for free (5 minutes)

TL;DR: Build → Drag & Drop → Live. No credit card. No terminal headaches.

---

Why Netlify?

Platform	Free Tier	Easy to use	Custom Domain
Netlify	✅ Unlimited	✅ Super easy	✅ Free SSL
Vercel	✅ Good	✅ Easy	✅ Free
AWS S3	⚠️ Complex	❌ Hard	⚠️ Extra setup
GitHub Pages	✅ Free	⚠️ Manual	⚠️ Limited

Winner: Netlify for beginners.

---

Prerequisites

• [x] A React app on your computer
• [x] A GitHub account (free)
• [x] A Netlify account (free — sign in with GitHub)

That's it. No credit card needed.

---

Step 1: Build your React app

Open your React project in terminal and run:

bash
npm run build
This creates a build folder. That folder = your entire website.

Pro tip: If you get an error, check your package.json has "build": "react-scripts build" in scripts.

Step 2: Push to GitHub
If you haven't already:

bash
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main
Don't know Git? Just drag your project folder to GitHub's web interface. Works fine.

Step 3: Connect Netlify to GitHub
Go to netlify.com and click "Sign up" → "GitHub"

Click "Add new site" → "Import an existing project"

Click "Deploy with GitHub"

Authorize Netlify (read-only access — safe)

Select your repository

Build settings:

Build command: npm run build

Publish directory: build

Click "Deploy site"

Wait 30-60 seconds.

Step 4: See it live
Netlify gives you a random URL like:

https://random-name-12345.netlify.app

Click it. Your app is LIVE on the internet. 🌍

Step 5: Custom domain (optional)
You can buy a domain from:

Namecheap ($8-12/year)

Cloudflare ($8-10/year)

GoDaddy (not recommended)

To connect:

Netlify dashboard → Domain management

Add custom domain → type your domain

Go to your domain provider → add Netlify's nameservers:

text
dns1.p01.nsone.net
dns2.p01.nsone.net
dns3.p01.nsone.net
dns4.p01.nsone.net
Netlify auto-adds free HTTPS/SSL. No extra cost.

Common Problems & Fixes
Problem Fix
Blank white page    Check package.json → add "homepage": "."
Routes not working  Add _redirects file in public/ folder with: /* /index.html 200
Images not showing  Use relative paths: ./images/logo.png not /images/logo.png
Build fails Run npm run build locally first. Fix errors locally.
Pro Tips (For Brownie Points)
Auto-deploys: Every git push → Netlify rebuilds automatically

Branch deploys: git push origin staging → staging--your-site.netlify.app

Environment variables: Site settings → Build & deploy → Environment

Forms: Netlify has free form handling (no backend needed)

What's Next?
Now that your app is live:

✅ Share your URL on LinkedIn/X

✅ Add Google Analytics for traffic

✅ Set up a custom domain

✅ Show your friends "I built this"

Quick Recap (60 seconds)
Step    Command/Action
1   npm run build
2   Push to GitHub
3   Import to Netlify
4   Done. Live.
Your Turn
Deploy your React app TODAY. It takes 5 minutes.

Then reply with your URL in the comments. I'll hype you up. 🔥

Found this helpful? Follow me for more tutorials on React, DevOps, and building stuff that actually works.

#react #netlify #webdev #deployment #beginners