Step-by-Step Guide to Deploying Your React App on Netlify

Deploying a React app on Netlify is a great choice for seamless deployment, as it provides continuous integration with Git and an easy setup. Below is a detailed guide on how to deploy a React app on Netlify, including both manual and Git-based deployment.

Prerequisites:

• React app: You need a working React app. If you don’t have one, you can create it using:

   npx create-react-app my-app

• GitHub/GitLab/Bitbucket account: If you want to use automatic deployment, ensure your project is in a Git repository.

• Netlify account: Sign up at Netlify.

Step 1: Build the React App for Production

Before deploying, you need to create an optimized build of your React app:

1. Navigate to your React app folder:

   cd my-app

1. Run the following command to build the app:

   npm run build

This creates a build folder in your project directory, which contains the optimized files ready for deployment.

Step 2: Deploy the React App on Netlify

There are two ways to deploy your React app on Netlify: Automatic Deployment via Git or Manual Deployment. Choose one of the methods below.

Option 1: Automatic Deployment via Git

In this method, every time you push changes to GitHub, GitLab, or Bitbucket, Netlify automatically redeploys your app.

2.1 Push the React App to GitHub (or GitLab/Bitbucket)

Make sure your React app is pushed to a Git repository. If you haven’t done so:

1. Initialize Git in your React project folder:

   git init

1. Add your files to the repository:

   git add .
   git commit -m "Initial commit"

1. Create a new repository on GitHub and link it:

   git remote add origin https://github.com/username/my-app.git
   git push -u origin master

2.2 Connect GitHub Repository to Netlify

1. Login to Netlify: Go to Netlify and log in (or sign up if you haven’t).

2. Create a new site: Once logged in, click "New Site from Git" on the Netlify dashboard.

3. Choose your Git provider: Select GitHub, GitLab, or Bitbucket and allow Netlify to access your repositories.

4. Select the repository: From the list of repositories, choose the one where your React app is located.

5. Configure the build settings:

   • Branch to deploy: Typically, this is master or main.
   • Build command: npm run build
   • Publish directory: build (this is the folder Netlify will deploy from).

6. Deploy the site: Click on "Deploy Site" and Netlify will automatically build and deploy your React app.

2.3 Automatic Redeployment

From now on, whenever you push changes to your GitHub repository, Netlify will automatically rebuild and redeploy your React app.

Option 2: Manual Deployment via Drag-and-Drop

If you prefer to deploy manually, or you don’t want to link your Git repository, you can upload the production build folder directly to Netlify.

2.1 Build the App Locally

Follow the same build step as before:

npm run build

This will create a build folder containing your production-ready files.

2.2 Deploy via Netlify’s Drag-and-Drop Interface

1. Login to Netlify: Go to Netlify and log in (or sign up).

2. Deploy manually: In the Netlify dashboard, click on "Sites", then drag and drop the entire build folder into the deployment area on the page.

Netlify will automatically upload the files and deploy your site. You will then be given a URL where your app is hosted.

Step 3: Setting Up a Custom Domain (Optional)

Once your React app is deployed, you might want to add a custom domain instead of using the default Netlify subdomain.

1. In the Netlify dashboard, go to Domain Settings for your site.
2. Under Custom Domains, click "Add custom domain".
3. Follow the instructions to point your custom domain (e.g., www.mycustomdomain.com) to your Netlify site.

If you don’t have a custom domain, you can use Netlify's provided subdomain (like my-app.netlify.app).

Step 4: Handling Routes in Single Page Applications (React Router)

If you are using React Router in your app, refreshing a page other than the homepage may lead to a 404 error on Netlify. This happens because React Router handles routing on the client side, while Netlify looks for actual files on the server.

Solution: Create a _redirects File

1. In your public folder, create a new file called _redirects.

2. Inside the _redirects file, add the following line:
   

   /* /index.html 200

This tells Netlify to redirect all requests to index.html, allowing React Router to handle the routes.

Step 5: Testing and Redeployment

Once your app is live, be sure to:

• Test the app for any issues like broken links or API calls.
• If you need to make updates, you can simply push new commits to your Git repository (if using automatic deployment) or manually upload the new build folder (if using manual deployment).

Summary

1. Build the React app using npm run build.
2. Deploy the app either:
   • Automatically via Netlify Git Integration (GitHub, GitLab, or Bitbucket).
   • Manually via Netlify’s Drag-and-Drop feature.
3. Fix routing issues with React Router by creating a _redirects file.
4. Optionally, set up a custom domain for your site.

That’s it! Your React app should now be successfully hosted on Netlify and accessible to the world.