Hosting your React App on Netlify

This article walks through deploying your React application to Netlify. If you would like to host your app on Github Pages read my post here.

Recently I created a React app as a part of my application process for an internship. When it came to hosting, I deployed it to both Netlify and Heroku to get experience with their platforms. This article however, will focus on Netlify.

Getting Started

To get started make sure you have the following set up before getting started

• A Netlify account
• Application ready to deploy

Procedure

1. Create or log into your account.

• One can log in through Github, Gitlab, Bitbucket, or Email.

2. Before deploying, create a build of your application.

$ yarn run build
OR
$ npm run build

• By running this command a build folder containing files that are ready for production is created.

3. Decide which way you’d like to deploy.

• Netlify offers two options for deployment, drag and drop or through CLI.
• Drag and drop is self-explanatory, so I’ll focus on Netlify. If you choose to deploy through drag and drop you can skip to the end.

4. Install Netlify CLI (command line interface)

$ yarn add netlify-cli -g
OR
$ npm install netlify-cli -g

• By installing Netlify CLI, you can run Netlify commands straight from your terminal.

5. Authorization

$ netlify login

• By entering this, a window in your browser will open. Make sure to log in and grant Netlify CLI access.

6. Deployment

$ netlify deploy

• After entering this command, you’ll seeLive Draft Url, a link to preview and test your site. If everything is to your liking enter the following command:

$ netlify deploy --prod

Conclusion

Congratulations, your site is now live! Netlify is a very user friendly platform that allows for deployment of a site, regardless of the level of experience. Next I’ll cover how the API I used in my project stopped working after deployment and the easy solution. I hope you found this tutorial helpful! Don’t hesitate to ask any questions or leave a comment!