How to deploy a React application to Netlify?

Introduction

To access our application on the web, we have to first deploy the web application on the web. We have to transfer our code from local storage or a version control system (like GitHub) to a hosting platform so that it can be stored there and can be made accessible to users as a web application. This process is known as Deployment. Usually, the cloud, as well as the local server, is used for this purpose.

When cloud services like Netlify were not introduced, deploying or hosting was exclusively accomplished through hosting companies that needed all static files(files produced after executing npm run build, known as build files) to be reuploaded each time you made a change. The files were uploaded via the FTP software or a complicated, stressful, and technically demanding web hosting administration system such as cPanel.

Netlify solves the above-mentioned problem. Netlify offers many techniques for deploying your web application while keeping certain use cases in mind.

Pre-Requisites

Let us review the requirements before we begin our how to deploy react app on netlify tutorial:

• GitHub, GitLab, or Bitbucket accounts are required.
• A Netlify account is required.
• Ensure npm is installed, which comes preinstalled with Node (version 12 or higher is required) or yarn.
• Basic familiarity with using the terminal (optional).

Why Use Netlify?

Netlify is a remote-first cloud computing firm that provides a development platform for web apps that includes build, deploy, and serverless backend services. It is made to maximise productivity by making it possible for engineers and developers to create, test, and deploy websites and applications rapidly (especially those that are frontend centric).

Your GitHub repository is connected to Netlify and the source code is pulled from there. Then a build process will be launched so that static files can be generated from your website or application's pages.

The following are just a handful of the many benefits that Netlify provides.

• Netlify is a little bit cheaper; in the long term, building and running a static website is going to cost less. Also, there is a free plan which will fulfill all the needs of personal projects and hobby sites.
• Through automatic pre-rendering and global distribution, Netlify significantly increases site speed.
• The most straightforward approach to deploying a website is to utilise GitHub, Bitbucket, or GitLab to configure continuous deployment, which Netlify makes really easy. With its integrated DNS management system, Netlify makes the process of launching a website extremely simple.
• Every time you publish your project from a Git repository, Netlify turns on Continuous Deployment for you automatically. As a result, each time you push a new commit to your repository, Netlify automatically builds it for you and updates your project to the most recent version. All of this is accomplished without the need to write a lengthy set of rules or a configuration file.
• Only a particular branch of our project on Git may very easily be deployed at a time. This is useful for immediately determining how a Pull Request(PR) will impact your website and for testing brand-new features that could or might not be pushed to the main/master branch.
• With Netlify, you and your team can can view beforehand the deployment you are about to make so that you can see how the changes will appear finally without pushing the changes onto the live application.
• We can get submissions from users using Netlify's convenient form submission tool. Without writing any backend programming or paying for any third-party services, you can quickly set up a form on your static website and receive submissions. You can even customise your own success page and have the option to activate reCAPTCHA.
• With the help of Netlify, you may automatically optimise assets for your project. With a few simple clicks, you can enhance the efficiency of your website with options like image compression, CSS and JS minification, and nice URLs.

Pushing Your Code to GitHub

Prior to deploying your applications to Netlify, your project must be pushed to a Git provider. In this tutorial, we will use GitHub to push our React application on to via the terminal.

Let us begin by setting up a repository on GitHub. Make sure to complete the required fields, then click on the Create repository button.

Open the folder in which you have your react app.

As soon as we return to the terminal, all the files need to be staged so that we can commit those files to the repository. After that, a new branch called main is to be created using the following methods:

After completing this, we can use the following commands to push our files to the remote repository that we have created earlier:

The repository needs to be reloaded to view your code. The three main ways to deploy apps on Netlify are as follows. Let us examine each approach individually before comparing them all.

Steps to Deploying Your React App

Let us begin and see, in detail, the different methods and the steps describing how to deploy react app on netlify.

With Netlify's free plan, we can either login or set up an account using any of the methods mentioned on the login page of Netlify(GitHub, GitLab, etc.).

Once logged in, you will be sent to your Netlify dashboard, where you can deploy your app to Netlify using either the drag-and-drop approach or the project import method.

Deploy Application to Netlify with Drag-and-Drop

Firstly, open the folder which contains your react app. Then use the following command to produce a build of your application.

After this command has been executed successfully, your build folder, containing all the files that are ready for production(the files that will be uploaded to Netlify via drag-and-drop), will be created.

Comparing Deployment Options

The first three strategies, mentioned in this how to deploy react app on netlify tutorial, all help with deployment, but the latter two also help with other aspects like deploying specific branches, continuous deployment, managing testing, and so on.

When you want to rapidly publish build files without having to upload your code to any Git provider, the drag-and-drop interface comes in handy. The Netlify CLI and Dashboard provide the same functions under the hood. You would not have to deal with unnecessary navigation because the Netlify CLI receives all commands via a clean terminal and changes less frequently than a webpage.

The ideal option depends on the developer's own preferences. Many prefer the CLI because of the lesser overhead needed, the fact that you can use it from the IDE, and the fact that it does not change as much over time.

Handling Page Not Found Error

You must set up redirects and rewrite rules for your URLs if you plan to deploy an app using a router such as React Router. Because a 404 error page appears when we click on any navigation link to change the page, that is route, and refresh the browser.

Therefore, Netlify makes it easier to set up redirects and rewrite rules for your URLs. We must include a file called _redirects in our app's build folder. The following rewrite rule needs to be placed inside the file.

Regardless of the URL that the browser requests, this rewrite rule will provide the index.html file instead of returning a 404 error page. Therefore, we must re-deploy using any of the recommended techniques in order to see the most recent updates in the live URL. After altering our path in the URL and refreshing the app, we would not see the 404 error page anymore.