How to Deploy React Projects on Netlify

A Simple Guide on deploying React apps on Netlify.

Photo by Antonio Batinić from Pexels

Intro

Netlify is definitely my favorite way to deploy my React projects due to it’s ease of use and it’s free starter bandwidth plan. Today I will show you how to deploy your React apps to Netlify through a few different ways. I will cover how to quick deploy and how to connect your Git projects to Netlify for continuous deployment.

warning — must have a Netlify account to deploy and a Git account for continuous deployment

Before we get started we need to install Netlify to your React project, you can do so by going into your project directory and running

npm i netlify-cli

Once Netlify is done installing, we will need to create a production version of your app by running

npm run build

This will create a folder in your project directory named “build” with your production ready app.

You will need to install Netlify and make a production build for any of these following deployment guides.

Easy Deploy — classic

Let’s start with the classic way to deploy through your terminal, after installing Netlify and creating a production build, now we run

netlify deploy

If its your first time using Netlify you will get promped with this in your default browser

Once you’re finished with the authorization step, you can go back to your terminal and you will be prompted with two options. Today we will use

• Create & configure a new site

After choosing this option, you will be prompted to enter some basic info such as

• Team of your Netlify account
• Optional site name- will prompt you if name is already taken
• Publish directory-point to where the production ready app is( where our build folder is)

After you have finished the above steps you can preview your site by going to the Website Draft URL provided by the terminal and if everything is to your liking it’s time to finally deploy it with the following command

netlify deploy --prod

That’s it! If everything went smooth you will be provided with the deployed Website URL and you can go to the site section of Netlify to change settings on your the project if needed.

Easy Deploy-SUPER EASY

Here’s an even easier way of deploying your apps. Once you are on the Sites section of Netlify, you will see this Drag and drop option and it’s literally that simple.

Once you installed the Netlify cli and created a production build in your React directory, you can right click on the build folder and reveal in finder and you can simply just drag your build folder from your finder to Netlify and that’s it.

This process is the quickest and simplest way of deploying, although it starts with some randomly generated url, you can simply go into the Domain Settings to change your site’s settings.

Continuous Deploy

This is a more advanced way of deploying but it’s great since you can store your project in a Git repo and every time you push a commit to the repo, Netlify will automatically update your site with your newest commit.

You can find this option in the Site section of Netlify.

After you click “New site from Git”, you will be prompted to log in to Git and it will list all your repos and you will have the option to search for the repo you want to deploy

Once you selected your repo, you will get prompted with some site settings to configure.

IMPORTANT- if you want to deploy a continous repo you have to enter this as the build command

CI= npm run build

This command sets the repo as a Continuous Integrated repo in Netlify.

Once you click Deploy site, you will get directed to the Netlify site page and it will take a few minutes to build on Netlify’s servers.

After a few minutes, your site should be done building and you can check by going to your deployed site’s URL.

That’s it! If you want to change your site, you just have to make some changes and push the new commit to your repo and Netlify will work it’s magic and you will see it building on the Netlify UI.

Once again this will take a few minutes due to Netlify creating your new production build but after that is cleared you can go to your site and check out the new changes.

Conclusion

Deploying can be complicated so I hope this guide has helped! Feel free to share your deployed sites in the comments and reach out for help if needed.

Hope you enjoyed this React deployment guide! Please leave a comment if you do and follow for more coding guides.