You've spent hours building a beautiful React application on your local machine. Now it's time to share it with the world! Deployment can seem intimidating, but modern platforms like Netlify have made it incredibly simple, fast, and best of all, free for most personal projects.

This guide will walk you through the entire process of deploying a React app from your computer to a live URL. We'll leverage the power of GitHub and Netlify to set up a **Continuous Integration/Continuous Deployment (CI/CD)** pipeline. This means every time you push a change to your code, Netlify will automatically update your live website. It's magic!

Prerequisites

Before we start, make sure you have the following:

  • A completed React application on your local machine.
  • A GitHub account.
  • Git installed on your computer.

Step 1: Push Your React App to a GitHub Repository

Netlify deploys directly from your code's repository. If your project isn't already on GitHub, let's get it there.

Open your terminal in your React project's root directory and run these commands:

# Initialize a new Git repository if you haven't already
git init

# Add all files to the staging area
git add .

# Make your first commit
git commit -m "Initial commit: Ready for deployment"

Next, go to GitHub, create a new **public** repository (do not initialize it with a README). GitHub will give you commands to connect your local repo. They will look like this:

# Rename your branch to 'main' (modern standard)
git branch -M main

# Add the remote repository URL (copy this from your new GitHub repo page)
git remote add origin https://github.com/your-username/your-repo-name.git

# Push your code to GitHub
git push -u origin main

Your code is now on GitHub, ready for Netlify.

Step 2: Sign Up for Netlify

Navigate to Netlify.com and sign up. The easiest and recommended way is to **sign up with your GitHub account**. This will automatically grant Netlify the permissions it needs to see your repositories.

Step 3: Create a New Site from Git

Once you're logged into your Netlify dashboard:

  1. Click the **"Add new site"** button and select **"Import an existing project"**.
  2. You'll be prompted to connect to a Git provider. Click on **GitHub**.
  3. A window will pop up asking you to authorize Netlify. After authorizing, you'll see a list of your GitHub repositories.
  4. Find the repository for your React app and select it.

Step 4: Configure Your Build Settings

This is the most important step, but for a standard app created with `create-react-app`, Netlify is smart enough to figure it out for you. You should see the following settings pre-filled:

  • Branch to deploy: main
  • Build command: npm run build
  • Publish directory: build
The "Build command" tells Netlify how to create a production-ready version of your site. The "Publish directory" tells it where to find the optimized HTML, CSS, and JS files after the build is complete. For `create-react-app`, this is always the `build` folder.

Everything should be correct by default. Simply click the **"Deploy site"** button.

Step 5: Your Site is Live!

Netlify will now start the deployment process. You'll see a "Deploying your site..." message. This usually takes a minute or two. Once it's done, the status will change to "Published," and you'll see a live URL at the top of the page, like https://your-adjective-your-noun-12345.netlify.app.

Click it. Congratulations, your React app is now live on the internet!

Step 6: (Optional) A Nicer URL

You can easily change the random URL to something more memorable.

  1. In your site's dashboard on Netlify, go to **"Domain settings"**.
  2. Under "Custom domains," click the **"Options"** button next to your default URL and select **"Edit site name"**.
  3. Choose a new name. As long as it's not taken, your site will be available at https://your-new-name.netlify.app.

The Magic of Continuous Deployment

The best part is now set up. Go back to your local code, make a small change (e.g., change some text), and then commit and push it to GitHub:

git add .
git commit -m "Testing auto-deploy"
git push

Go back to your Netlify dashboard. You'll see that Netlify automatically detected the push and started a new deployment. In a minute, your changes will be live. This is CI/CD in action, and it's a game-changer for development workflow.

Conclusion

You've successfully mastered one of the most crucial parts of the development lifecycle: deployment. By connecting your GitHub repository to Netlify, you've created a powerful, automated workflow that takes your code from your local machine to a global audience in minutes, all for free. You can now confidently build and share any frontend project you create.