How to Deploy a React App to Netlify

Posted on by Panther

Netlify is a popular hosting platform that specializes in hosting static websites and web applications. It offers a simple and intuitive interface for deploying static websites, making it ideal for hosting React applications. In this tutorial, you will learn how to deploy a React app to Netlify in a few simple steps.

Prerequisites

Before getting started, make sure you have the following:

  • A React app that is ready for deployment. If you don’t have an existing React app, you can create a new one by running the following command in your terminal:
npx create-react-app my-app

This will create a new directory called my-app with a basic React app.

  • A GitHub account. Netlify integrates seamlessly with GitHub, so you will need a GitHub repository to connect to your Netlify account.

Step 1: Create a GitHub Repository

If you don’t have a GitHub repository for your React app, go to GitHub and create a new repository.

  1. Click on the “New” button to create a new repository.
  2. Give your repository a name and an optional description.
  3. Choose whether you want your repository to be public or private.
  4. Click on the “Create repository” button to create your new repository.

Make sure to keep the repository URL handy, as you will need it later.

Step 2: Push Your React App to GitHub

To deploy your React app to Netlify, you need to push your app’s source code to a GitHub repository.

  1. Open a terminal window and navigate to your React app’s directory.
  2. Initialize a new Git repository by running the following command:
git init
  1. Add all the files in your directory to the Git repository by running the following command:
git add .
  1. Commit your changes by running the following command:
git commit -m "Initial commit"
  1. Link your local Git repository to the GitHub repository you created in the previous step by running the following command:
git remote add origin <repository-url>

Replace <repository-url> with the URL of your GitHub repository.

  1. Push your changes to the GitHub repository by running the following command:
git push -u origin master

Make sure to provide your GitHub username and password if prompted.

Step 3: Sign up for Netlify

If you don’t have a Netlify account, go to the Netlify website and sign up for a free account.

  1. Click on the “Sign Up” button on the top right corner of the page.
  2. Sign up using your GitHub account by clicking on the “Sign up with GitHub” button.
  3. Grant Netlify access to your GitHub account by clicking on the “Authorize netlify” button.

Once you have signed up and authorized Netlify to access your GitHub account, you will be redirected to the Netlify dashboard.

Step 4: Connect Your GitHub Repository to Netlify

Now that you have a Netlify account, you need to connect your GitHub repository to Netlify.

  1. On the Netlify dashboard, click on the “New site from Git” button.
  2. Choose GitHub as your Git provider.
  3. Select the repository you created earlier from the list of available repositories.

Netlify will automatically fetch the latest code from your GitHub repository.

Step 5: Configure the Build Settings

Before deploying your React app, you need to configure the build settings in Netlify.

  1. On the Netlify dashboard, click on the “Build & deploy” tab.
  2. Scroll down to the “Build settings” section.
  3. Click on the “Edit settings” button.

Netlify uses a file called netlify.toml at the root of your project to specify the build settings. If you don’t have this file in your project, you can create it by running the following command in your terminal:

touch netlify.toml
  1. Open the netlify.toml file in a text editor and add the following configuration:
[build]
  command = "npm run build"
  publish = "build"

This configuration tells Netlify to run the npm run build command to build your React app and serve the build files from the build directory.

  1. Save the netlify.toml file.

Step 6: Deploy Your React App

It’s finally time to deploy your React app to Netlify!

  1. On the Netlify dashboard, go back to the “Overview” tab if you’re not already there.
  2. Scroll down to the “Deploy” section and click on the “Trigger deploy” button.

Netlify will start the deployment process and build your React app based on the build settings you configured earlier.

  1. Once the deployment is complete, you will see a unique URL for your deployed app in the “Deploy details” section.

Clicking on this URL will open your React app in a new tab.

Congratulations! You have successfully deployed your React app to Netlify.

Step 7: Automatic Deployments (Optional)

One of the great features of Netlify is the ability to set up automatic deployments whenever you push changes to your GitHub repository.

  1. On the Netlify dashboard, go back to the “Overview” tab.
  2. Scroll down to the “Deploy” section.
  3. Click on the “Deploy settings” button.

  4. Under the “Build hooks” section, click on the “Add build hook” button.

  5. Choose a name for your build hook and click on the “Add” button.

Netlify will generate a unique build hook URL for you.

  1. Copy the build hook URL.

  2. Go to your GitHub repository’s settings page.

  3. Click on the “Webhooks” tab.

  4. Click on the “Add webhook” button.

  5. Paste the build hook URL you copied earlier into the “Payload URL” field.

  6. Choose “application/json” as the “Content type”.

  7. Select the “Just the push event” option under “Which events would you like to trigger this webhook?”.

  8. Click on the “Add webhook” button to save your webhook settings.

Now whenever you push changes to your GitHub repository, Netlify will automatically trigger a new deployment of your React app.

Conclusion

Deploying a React app to Netlify is a straightforward process that can be done in a few simple steps. By following this tutorial, you have learned how to create a GitHub repository, push your React app to GitHub, sign up for Netlify, connect your GitHub repository to Netlify, configure the build settings, and deploy your React app.

Netlify also offers additional features such as custom domains, forms, and serverless functions that can further enhance your static website or web application. Explore the Netlify documentation to learn more about these features and make the most out of your deployed React app.

Related Post