DEV Community

Aliyu Adeniji
Aliyu Adeniji

Posted on • Originally published at aviyel.com

How to Deploy a React Project on Netlify?

Introduction

Netlify is a developer’s platform designed for building and deploying web applications, e-commerce stores, and online campaigns. Netlify provides an easy-to-use and easy-to-maintain website deployment service for developers, and this gives them a high level of scalability and security.

Websites and applications Deployment on servers ensures that applications run effectively and optimally. These web servers also help to ensure that updates carried out on the applications are easily incorporated without affecting the functionality of such applications and websites.

A lot of hosting platforms are available, but Netlify uses serverless functions and deployment to deliver sites with higher speeds compared to some other configurations.

Netlify Build allows you to build, deploy, and manage web apps and projects through dedicated Git workflows for web development, which enables you to easily connect your git repo to Netlify and push your code directly to Netlify from git.

Netlify Dev increases your productivity by allowing you to locally build and test your code, site generator, serverless functions, and API integrations, all on a single development server.

And lastly, Netlify Edge allows you to include add-ons on your web apps, which include analytics, forms, identity, and lots more, and you can use them without being an experienced developer.

Step-by-step instructions for deploying a React App on Netlify.

Step 1: To be able to use Netlify, you must sign up for Netlify and have a developer account. Go to www.netlify.com and sign up for a free account.

netlifyimage

After successfully signing up on Netlify, you need to create a portfolio for your React App. You can do this using three different methods:

You can add your existing project from a Git repository by simply importing it directly from Git.

netlifyimage

To import an existing project from Git, connect to a Git provider from the options available below.

netlifyimage

The next thing to do is to select the Git repository that you want to deploy to Netlify. You must select from the list of the available repositories in your account. An example of what you should see is shown below.

netlifyimage

And lastly, select the deploy option to complete this process, and your site will be live on Netlify.

netlifyimage

You can also add a project to Netlify by building directly from templates provided by Netlify. These templates allow you to build any kind of website from absolute scratch.

netlifyimage

And you can also deploy your website without connecting to Git. You can do this by dragging and dropping your site build folder:

netlifyimage

To deploy your React App from your computer folder, open the terminal from your computer and change the directory to the React App that you want to deploy by using this syntax below:

cd --filename
Enter fullscreen mode Exit fullscreen mode

Then create a production build for the React App by compiling the app components into one single file. You can do this by running the syntax below:

npm run build
Enter fullscreen mode Exit fullscreen mode

This will compile all your App components into one single file that can be deployed to Netlify. The next step is to drag and drop this compiled build file into your Netlify account. The next step is to drag the file you want to deploy to Netlify and drop it, and your React App will go live on Netlify.

netlifyimage

As seen above, if you follow these steps, your React App will be deployed to Netlify, and you will be able to do things like choose a custom domain name, check your site analytics, and a whole bunch of awesome stuff.

Conclusion.

Deployment is the process of moving our code from a source control system to a hosting platform where it gets stored so that end users can access and use it. Historically, this process was performed manually by uploading assets through FTP or cPanel, which can be very stressful and technical. With Netlify, however, this process has become much easier. In this article, you learned how to deploy a sample React app on Netlify and manage other features of the platform.

Top comments (0)