Deploy Your React App to Netlify

Now that your code is on GitHub, let’s deploy the app using Netlify, a popular platform for hosting static websites (like React apps). You can deploy in two ways:

• Via GitHub Repo (Recommended)
• Drag & Drop method

Let’s cover the GitHub method first.

Option A: Deploy from GitHub

Step 1: Build Your App for Production

Before deploying, you need to create an optimized production build:

npm run build

This will generate a new /build folder that contains the static files Netlify needs.

Step 2: Login and Import Project to Netlify

1. Go to https://www.netlify.com and log in or sign up (it’s free).
2. Click “Add New Site” → “Import an Existing Project”.
3. Choose GitHub and authorize Netlify to access your repositories.
4. Select your repository (e.g. todo-react-app).

Step 3: Configure the Build Settings

When prompted for settings, enter:

Leave other fields as default and click Deploy Site.

Step 4: Get Your Live Link

Netlify will now build and deploy your app. Within a minute or two, your site will be live at a URL like:

https://todo-react-app.netlify.app/

You can also rename the site under:
Site Settings → Change Site Name

Option B: Deploy via Drag & Drop (Alternate Method)

If you prefer not to use GitHub:

1. Run npm run build in your terminal.
2. Go to Netlify Drop.
3. Drag the entire /build folder into the browser window.
4. Done! Netlify will host your app instantly and give you a live link.