Deployment involves transferring our code from a source control system to a hosting platform where it may be offered as an application to end users. This is usually done on a local or cloud server.
Hosting was solely done by hosting companies that needed a reupload of all static assets (build files created after executing npm run build) every time you made a change before cloud services like Netlify. This upload was done using FTP software or cPanel, which may be difficult and complex.
That is Netlify’s responsibility! It has drag-and-drop functionality, project import, and React Native App Development. They are all fundamental, but each is tailored to a certain use case.
In this post, we’ll examine how to deploy a React project to Netlify and discuss its benefits and downsides. After that, we’ll briefly cover Netlify’s 404 Page Not Found problem.
Why Use Netlify?
Netlify hosts static websites with serverless backends. It maximises productivity by allowing developers (particularly frontend ones) and engineers to swiftly construct, test, and deploy websites/applications.
It pulls code from your GitHub repository. After that, a build process will pre-render our website/application pages into static files.
Netlify has several benefits, including these:
- Netlify saves money by hosting a static website. Global distribution and automatic pre-rendering speed up Netlify sites.
- Continuous deployment using GitHub, GitLab, or Bitbucket is the easiest method to deploy a website with Netlify.
- Netlify’s DNS administration makes website launch easier.
- We could simply deploy just a single branch of our Git project, which is handy for testing new features that may or may not make it to the master/main branch or rapidly assessing how a PR would influence your site.
- Netlify lets you and your team preview any deployment without needing to deploy it on your site.
- Netlify’s form submission lets us gather user data.
Starting Over
We’ll install a colour tints and shades application on Netlify in this tutorial. It’s a simple React app that uses tints and hues from the values.js library.
Before we begin, let’s go through some of the requirements for utilising Netlify:
- Have an account with one of the Git providers, such as GitHub, GitLab, or Bitbucket.
- Install npm – it comes preconfigured with Node or Yarn.
- Basic knowledge on how to utilise the terminal (optional).
Uploading Code to GitHub
We must first push our project to any Git service before we can deploy our applications to Netlify. In this tutorial, we’ll use the terminal to post our code on GitHub.
1. But first, let us create a GitHub repository. Then, fill up the required information and click Create repository:
2. Back at the console, let’s begin by staging all of our files so we can commit them to the repository, and then establish a new branch main using the instructions below:
- $ git init
- $ git add .
- $ git commit -m “first commit”
- $ git branch -M main
3. After that, we can use the following commands to push to the newly formed remote repository:
- $ git remote add origin https://github.com/username/git-repo.git
- $ git push -u origin main
4. When we reload the repository, our code should display! Moving on, there are three main ways to create Netlify installations. Let’s have a look at each strategy and compare them in the conclusion.
Installing an App to Netlify
Netlify provides a free plan that enables us to establish an account or log in using any of the choices given on the login page (as seen in the image below). After signing in, we’ll be led to our Netlify dashboard, where we’ll deploy our app to Netlify using both the drag and drop approach and the project import method.
Drag & Drop Application Deployment to Netlify
To begin, use the following command to generate a build of our application:
- $ npm run build
Once this is complete, our build folder will be created, including all of the production-ready files (these are the files we’ll submit to Netlify using the drag and drop approach).
On our Netlify Overview page, go to “Add New Site” > “Deploy Manually.” This will bring us to the page where we will place our static files. As long as we are signed in, we may also view the drop page from here.
The next step would be to drop the created build folder so that it is instantly deployed to a live URL, as seen below.
Deploy the application to Netlify using the Netlify CLI
The command-line interface (CLI) of Netlify enables us to deploy our app straight from the command line, as well as arrange continuous deployment so that Netlify automatically delivers new versions of our site when we push changes to our linked Git repository.
1. The first step would be to run the following command to install the CLI:
- $ npm install netlify-cli -g
2. Netlify will be installed globally with this command. If you wish to install Netlify CLI locally, use the following command from our project’s root directory:
- $ npm install netlify-cli –save-dev
3. The first step in deploying our react application development using Netlify CLI is to utilise the command line to authenticate and acquire an access token by running the following command from any directory:
- $ netlify login
4. This will launch a browser tab and authenticate us, giving us access to the Netlify CLI.
5. Once everything is complete, we can use the deploy command to deploy our app:
- $ netlify deploy
This will elicit several setup-related questions:
1. We just need to “Link this directory to an existing site” since our react app is already hosted on GitHub. This raises the following question.
2. This folder will be connected to the GitHub repository where we submitted our code, and it will appear automatically as long as the remote origin is added. Following that, our site will be constructed and deployed to a draft URL, which we can visit by copying and pasting the following URL into the browser.
3. “If everything appears okay on your draft URL, deploy it to your main site URL with the —prod parameter,” our console says. This enables us to preview any deployment so that we and our team can see how changes will appear in production without having to deploy them on our current site.
4. So, in order to make our programme active, we’ll run the following command:
- $ netlify deploy –prod
5. Two crucial URLs will be provided after this is finished: the Unique Deploy URL, which is different for each deployment, and the Live URL, which always shows your most recent deployment.
6. In this way, we’ll have a new URL for each time we deploy an updated version of our website. In essence, if we deploy more than once, we’ll have a number of different URLs that may be used to point people to a certain version of your application. However, our most current updates are always accessible at the same live URL.
Converting a Project into the Netlify Dashboard
- We’ve deployed React apps through drag and drop and Netlify CLI. Importing the project from your Git provider into our Netlify website lets us accomplish everything manually without the CLI. This does Netlify CLI-like functionality.
- Visit our Netlify team website and choose “Add new site” > “Import an existing project” as shown below.
- After that, we’ll choose your site/Git app’s provider. We choose GitHub. Authorised GitHub repositories may be searched.
- After project identification, we may deploy. If we’re testing a release, we may choose which branch to deploy on this page. This page lets us set the build command and file location (this is automatically handled by Netlify except we wish to change it). Click “Deploy Site” when done.
- A Live URL should follow successful deployment. On the settings overview page, we may change domain settings, deployment logs, etc.
Considering Deployment Alternatives
The first three techniques assist with deployment, while the latter two aid with continuous deployment, deploying particular branches, managing testing, and more.
The drag-and-drop interface lets you distribute build files without pushing code to Git. Netlify CLI and Dashboard share functionality. The Netlify CLI takes all commands via a clean terminal, so you don’t have to navigate and it changes less often than a website.
Developers favour the CLI because it’s clean, simple, and doesn’t change much.
Managing the Page Not Found Error
We’ll need to create redirects and rewrite rules for our URLs if we’re using a router, such as React Router. Because when we click on any navigation item to change the page (route) and refresh the browser, we receive a 404 error page.
As a consequence, Netlify makes setting up redirects and rewriting rules for our URLs a breeze. We’ll need to add a file named _redirects to our app’s build folder, and we’ll place it in the public folder to make it happen automatically. The file must have the following rewrite rule:
- /* /index.html 200
This rewrite rule will serve the index.html page instead of returning a 404 no matter what URL the browser queries. As a result, we must re-deploy using any of the suggested ways in order to view the most current updates on the live URL. After updating our path and reloading the app, we will no longer see the 404 error page.
Final Thought
Deployment involves transferring code from a source control system to a hosting platform where it may be used as an application by end users. Cloud or local servers are used for this. Before cloud platforms like Netlify, hosting providers needed a reupload of all static assets (build files created after executing npm run build) with every modification. FTP or cPanel were used to upload this, which may be difficult and complex.
In this article, we covered the different methods (drag-and-drop UI, CLI, and Dashboard) for deploying a React app to Netlify. Router 404 issues in the React app were also addressed.
If you are looking for React native developers for hire, CMARIX has some of the best in business .If you are in the market for a similar service, it is in your best interest to contact the provider directly.
