Host React App with Netlify

Challenge: find a free way for hosting a React application

Solution: use the Netlify command interface

React, the open-source JS library, was released in 2013 by Facebook (Meta). React 16.8 was released on 2019-02-16, introduced hooks, which improve code reusability and allow to write fewer lines of code. Since the introduction of hooks, we can use functional components instead of Classes.

Do you have a simple React App and would like to show it to the world? Or perhaps, do you want to test your application using a public url? It’s possible with Netlify manual deploy!

Netlify, founded in 2014 by the Danish entrepreneur Mathias Biilmann, offers hosting and serverless backend services. With the current value of $2 billion, Netlify offers an easy way of deploying a React app. It’s free for personal and hobby projects. More info in this tutorial.

Adding a package

It’s a one-time step. We need to add the Netlify CLI, which will grant the ability to use the command line to control deployment. It requires Node.js version 12 or above.

npm install netlify-cli -g

Create the app build

Every time you want to deploy changes, the production build needs to be created. React will create an optimized production build. Static compiled files will be placed in the /build directory. There will also be information about the gzipped size of all files.

Just execute:

npm run build

Follow the Netlify wizard

To initialize deployment, we need to use:

netlify deploy

If it’s the first time, the wizard will ask about a deployment url and build directory. Next time, the settings will be saved without the need to choose it again.

The Wizard can be followed in your Console application (the same you’re using for the React application build). To select wizard steps, use arrows on your keyboard and accept using ENTER.

The Wizard will help with configuration. You can create a new site or choose an existing one. When asked about the ‘Published directory’, answer ‘build’ (typical React directory).

root@DESKTOP-GN3O9B5:/home/projects/ct_blog_posts# netlify deploy
This folder isn't linked to a site yet
? What would you like to do? Link this directory to an existing site
netlify link will connect this folder to a site on Netlify
? How do you want to link this folder to a site? Search by full or partial site name
? Enter the site name (or just part of it): abc
Looking for sites with names containing 'abc'...
Directory Linked
Admin url: https://app.netlify.com/sites/abc321abc
Site url:  https://abc321abc.netlify.app
Site id saved to /home/projects/ct_blog_posts/.netlify/state.json
You can now run other `netlify` cli commands in this directory
Please provide a publish directory (e.g. "public" or "dist" or "."):
/home/projects/ct_blog_posts
? Publish directory /home/projects/ct_blog_posts/build
Deploy path: /home/projects/ct_blog_posts/build
Deploying to draft URL...
✔ Finished hashing 15 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!
Website Draft URL: https://621c9b6d83b7b20d56e5d4b8--abc321abc.netlify.app

Success! Deployment is live using the draft url. We can inspect the page and check the logs. If everything looks good on the draft URL, we can deploy it to the main site URL with the –prod flag.

netlify deploy --prod

Here is the full console information when working on production deployment to Netlify:

root@DESKTOP-GN3O9B5:/home/projects/ct_blog_posts# netlify deploy --prod
Please provide a publish directory (e.g. "public" or "dist" or "."):
/home/projects/ct_blog_posts
? Publish directory /home/projects/ct_blog_posts/build
Deploy path: /home/projects/ct_blog_posts/build
Deploying to main site URL...
✔ Finished hashing 15 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!
Logs:              https://app.netlify.com/sites/abc321abc/deploys/621c9b80ae1b82234a39a535
Unique Deploy URL: https://621c9b80ae1b82234a39a535--abc321abc.netlify.app
Website URL:       https://abc321abc.netlify.app

That’s it! Our React app is live using the public url and an HTTPS connection.

If something goes wrong, we can inspect the logs. After logging in to the Netlify account, more info about the issues will be visible.

Troubleshoot

Q: I would like to reset my Netlify settings and start the configuration wizard from the beginning.

A: To be able to run the wizard again, execute:

netlify unlink

netfliy deploy

Q: I don’t see the new changes after Netlify deployment

A: Make sure to create a new React build (npm run build)

Q: I’ve got an email: [Netlify] Alert: Insecure mixed content detected

A: Netlify url uses a secure HTTPS connection, but some file/files in your app are loaded via HTTP which causes the “Insecure mixed content” alert.

That’s it for today’s tutorial. Make sure to follow us for other useful tips and guidelines, and don’t forget to subscribe to our newsletter.