Deploy React/Javascript App to Netlify in 2 Minutes

There are thousands of ways to deploy and maintain an application likes Heroku, AWS, or Azure. In this article, we will learn how to deploy a React/Javascript application using one of the easiest ways, Netlify. Netlify integrates with Let’s Encrypt and automatically provisions, distributes, and renews your certificate. Besides, your site or application is set up with Netlify’s true auto SSL for free.

We can use Version Control Github, Gitlab, or Bitbucket to support deploying our application to Netlify. However, we will focus on the Github version control system in this article.

At first, you should create a Github and a Netlify account. After successfully having a Github account, creating a new repository is the next step.

Now go to the directory of your local React/Javascript app, then follow the instruction on Github below.

Because you already have your app, so remember to do “git add .” before “git commit”.

Now after “git push” and see it run until 100%. Your application is successfully stored on Github. Refresh the Github page to see the change.

Now go to Netlify and create a new site. Choose Github as a host. Then authorize your Github account with Netlify.

If you can not find the repo you just deployed to Github, click to “Configure the Netlify app on Github”. Then click “select repositories”, find your repo and click “save”.

Back to Netlify and click “Deploy site”, then Netlify will start the deployment process for you.

If your app doesn’t have any potential problem, it will deploy in just a few minutes. But in case your app has some problems like below, it should be failed to deploy.

Now run your React app locally by using “npm start”. Then edit your app until seeing the “Compiled successfully!” message like this.

It can be still “fail to deploy” if you react app showing the yellow “Compiled with warnings.” like below:

Just follow the instruction to remove some unused variables or components in your React app. Then don’t forget to add, commit, and push to your Github repo.

Then go to Netlify and click “Clear cache and deploy site” to deploy your app again. Once you successfully deploy your app, it will look like this. Netlify will generate automatic a Netlify domain for you. You can change to your personal domain or just change the Netlify domain by click “Site settings”, then click “change site name” then change to whatever name you want but haven't been taken.

Congratulations on successfully deploy your application! Now your application will live on the domain you choose. Once you’re familiar with Netlify, it will only take 2 minutes to deploy your app.

Find out more about how to deploy your Rail backend app to Heroku here.

Happy Coding!