Skip to content

Latest commit

 

History

History
75 lines (59 loc) · 2.45 KB

NETLIFY_FIX.md

File metadata and controls

75 lines (59 loc) · 2.45 KB

Netlify Deployment Fix - Quick Reference

Problem

When deploying the React SPA to Netlify, users were getting the error:

"Looks like you've followed a broken link or entered a URL that doesn't exist on this site."

Root Cause

React is a Single Page Application (SPA) that handles routing client-side. When you refresh a page or access a non-root URL directly, Netlify's server tries to find that file and returns a 404 error because it doesn't exist on the server.

Solution Applied

1. Created frontend/public/_redirects file

/* /index.html 200

This tells Netlify to redirect all routes to index.html with a 200 status code, allowing React Router to handle the routing client-side.

2. Created netlify.toml configuration file

Added comprehensive Netlify configuration including:

  • Build settings (base directory, build command, publish directory)
  • Redirect rules
  • Security headers
  • Cache control headers

Deployment Instructions

Option 1: Netlify Dashboard (Recommended)

  1. Push your code to GitHub
  2. Go to Netlify
  3. Click "Add new site" → "Import an existing project"
  4. Select your GitHub repository
  5. Configure settings:
    • Base directory: frontend
    • Build command: npm run build
    • Publish directory: frontend/build
  6. Click "Deploy site"

Option 2: Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli

# Navigate to frontend
cd frontend

# Build
npm run build

# Deploy
netlify deploy --prod

Verification

After deployment:

  1. Visit your Netlify URL
  2. Try refreshing the page - should work without errors
  3. Try accessing the site with different URL paths - all should work

Files Modified/Created

  • ✅ frontend/public/_redirects - SPA redirect configuration
  • ✅ netlify.toml - Netlify build and deploy configuration
  • ✅ INSTALLATION.md - Comprehensive installation guide
  • ✅ README.md - Updated with quick deployment instructions

Backend (Optional)

The application can work without a backend for basic hashtag generation. The backend is only needed for:

  • Trending analytics
  • Persistent storage

For frontend-only deployment on Netlify, no backend setup is required.

Additional Resources