Deploy Your React App to Netlify

Great going, buddy! You’ve built a fully functional and stylish To-Do List App using React. But what good is a project if no one can use it? This module walks you through the process of deploying your app online so that anyone in the world can access it via a live URL — using GitHub and Netlify.

Upload Your Project to GitHub

Before deploying, your code needs to live somewhere on the internet — and GitHub is the perfect place. Here’s how to upload your project step by step.

Step-by-Step: Push to GitHub Using Terminal

1. Open your project folder in your terminal (VS Code terminal or any command prompt).
2. Run these commands:

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/yourusername/todo-react-app.git

git push -u origin main

Make sure to replace yourusername with your actual GitHub username and change the repo name if needed.

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.