Hosting React Apps on Netlify

🚀 Why Choose Netlify for React Hosting?

Netlify is a powerful and beginner-friendly platform to deploy and host static sites and single-page applications (SPAs) built with React. It offers features like drag-and-drop deployment, continuous deployment via Git, free SSL, and custom domain support—all at no cost for most personal projects. 💡

🧱 Step 1: Build Your React App

If you're using Create React App (CRA), your code is already structured for Netlify. Simply build your project to prepare the production-ready files.

npm run build
  

This creates a build/ folder with your static assets (HTML, CSS, JS). These files are what Netlify will serve. 📁

📤 Step 2: Deploy via Drag & Drop

For a super quick deploy:

1. Go to Netlify Drop
2. Drag and drop your build/ folder into the browser window
3. Netlify will deploy your site instantly with a live preview URL 🌐

While this is perfect for testing, Git-based deployment is better for ongoing projects.

🔗 Step 3: Deploy With GitHub

To set up continuous deployment using GitHub:

1. Push your React project to GitHub
2. Login to Netlify
3. Click “Add new site → Import from Git”
4. Authorize Netlify and select your repository
5. For build settings:
   • Build command: npm run build
   • Publish directory: build
6. Click Deploy site 🚀

🌍 Step 4: Custom Domain & HTTPS

Want to use your own domain like myapp.dev? Here's how:

1. Go to Site settings → Domain management → Add custom domain
2. Follow DNS instructions or update records in your registrar
3. Netlify automatically enables HTTPS with Let’s Encrypt 🔒

🛣️ React Router Fix: Avoid 404 on Refresh

If you're using React Router and refreshing a route like /about shows a 404, you'll need a rewrite rule.

Create a file named _redirects in your public/ folder:

/*    /index.html   200
  

Netlify will redirect all routes to index.html so React Router can handle them. 🎯

🔐 Step 5: Add Environment Variables

To use API keys or config values securely:

1. Go to Site settings → Environment variables
2. Add variables like REACT_APP_API_KEY
3. Re-deploy the site for changes to take effect

// Example usage
const apiUrl = process.env.REACT_APP_API_URL;
  

âš¡ Bonus Features on Netlify

• Instant Rollbacks — Revert to any previous deployment
• Deploy Previews — View staging versions on pull requests
• Serverless Functions — Backend APIs with no setup
• Form Handling — Native support for form submissions
• Analytics — Track traffic and performance easily

🧪 Pro Tip: Add CI/CD with GitHub Actions

For custom pipelines, you can set up GitHub Actions to run tests and build before deploying to Netlify using the Netlify CLI or API.

- name: Deploy to Netlify
  uses: nwtgck/actions-netlify@v1
  with:
    publish-dir: ./build
    netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
    netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
  

✅ Final Thoughts

Netlify makes hosting React apps incredibly smooth—whether you're just dragging and dropping a folder or setting up full Git-based CI/CD. 🧠🔥

With features like preview environments, form handling, and free SSL, Netlify is a top choice for developers who want a fast, scalable, and hassle-free deployment experience.

---