Easily Host a React app on Netlify from Github
In this tutorial, I will show you how to easily host a React app in just minutes using Netlify, a robust platform for hosting frontend applications with awesome supporting features like free HTTPS and easy branch-based CI/CD from Github.
For the purposes of completeness in this tutorial I will demonstrate with a basic React app made with Create React App, but this should work for any React app you have already made and wish to host. If you already have the React app you want to host, then feel free to skip right to step 3.
Step 1: Create a React app
Our app in this tutorial will be called “my-hosted-app”. To create the app, we will go to our terminal, navigate to our preferred development folder and run the npx create-react-app command followed by the name of our app:
npx create-react-app my-hosted-app
If this is your first time making a React app, you might see a message like the following:
Need to install the following packages:
Ok to proceed? (y) y
In which case just press
y to proceed. Now let the scripts run and do their thing, which may take a minute or two.
Next, we will cd into our newly created project:
Step 2: Create a github repository for your project
For hosting our project, we will take advantage of Netlify’s feature of hosting and CI/CD directly from a github repository. So we need a github repository for the project first.
To do this, simply create a new completely blank github repository and give it a name. Don’t check any other boxes, just click “Create repository”. Note: You can name your repository anything you want, but for simplicity we will name it the same name as our react app
Now back in the terminal, we will link our project to our repository we have just created. The
create-react-app command actually already initializes its own git repository in the project folder, so in order to link our project folder repository to our github repository all we have to do is follow the steps on Github under “…or push an existing repository from the command line”
So simply copy and run those commands in the terminal. Don’t forget of course that the url on line 1 in your case will include your own Github username:
git remote add origin https://github.com/<YOUR-GITHUB-USERNAME>/my-hosted-app.git
git branch -M main
git push -u origin main
You can now of course start coding and making the react app your own, adding your own components and markup etc. However, for simple illustration purposes in this tutorial, we are just going to host the react app on Netlify exactly as it is “out of the box”, iconic spinning atom and all.
Step 3: Hosting our app on Netlify
Next, on Netlify, make your free account by clicking sign-up and then simply choose to login with Github:
Once logged into Netlify with our Github account, we will navigate to “Sites”, and then click “Add new site”, and choose the first option “Import an existing project”. Netlify will then take you to a screen that asks you to connect to a git provider. Choose Github. (Although much the same process works for the others)
Next, you will be prompted to pick a repository from Github that you would like to host as a site. We will choose our “my-hosted-app” project we made in steps 1 and 2.
You will now see a screen with the following options:
To host our site right out of the box we can keep all of the defaults and simply click “Deploy site”. However, I think a short explanation of what these options do and one important caveat will be helpful:
What the settings mean:
The branch to deploy section tells us we will deploy from branch main. But you can choose whichever branch you want to be your “production branch”: once a site is deployed to Netlify from a github branch, it will automatically update and re-deploy (CI/CD) every time you commit and push changes to that branch from your local machine.
The Build command: We can also see that Netlify will automatically run the React build command
npm run build and create a build folder/production version of our React app for us, without us needing to manually run the build command on our local machine in the terminal.
Important caveat: If your React app has any linting errors, then you will need to replace the
npm run build line under Build command with the following line instead:
CI= npm run build
Linting errors in React are a long topic and constitute a range of different errors, but basically they are the kinds of errors that will not break your app altogether but instead will cause a warning to be issued when it does compile. One common example is variables that are declared but never used, or libraries that are imported into your application but never used.
You will know you have linting errors if instead of seeing
Complied successfully!at the top of your terminal as you are making local changes to your react app, you see
Compiled with warnings , followed by a list of the warnings, which include your linting errors. FYI: For more on linting errors checkout this detailed post from Dwayne Love.
Long story short: You should seek to fix and avoid all linting errors, but they need not prevent you from hosting your React app on Netlify.
Finally, for hosting our React app, we will keep the Publish directory as build, since this is essentially the React build folder.
4. Getting the URL for your hosted site
And thats it! Once you press “Deploy site” , you will see “deploy in progress”. It may take a few minutes for Netlify to build and deploy your React, and once finished the “deploy in progress” message will turn into a clickable url of your live hosted site. Here is the one we made in this tutorial.
Note: You need to pay for custom domains, but with the free tier of Netlify you can customize and rename the url and replace it with something meaningful instead of the random name they provide by default. Do this by clicking “Site settings” and then on the next screen “Change site name”:
Important Step 5: If you are using React Router:
A final important caveat: If you are using React Router in your project, then before hosting your React app on Netlify you will need to make sure to do the following:
Inside of your project, go to the
public folder, and in it create a file simply called
_redirects with no extension. Finally, inside of the
_redirects simply past the following on line 1:
/* /index.html 200
Since React applications are single page applications (SPA), even with React Router they still render the individual content of your different routes to the same single index.html file.
So as far as I understand from my own googling, what this line essentially does is make sure Netlify knows the individual routes in your site should not actually try to look for a new html file with the exact name as the route, files which in fact don’t exist — because this is a React application.
A further illustration of this is that if you do not include a
_redirects file in your project and use React Router, then as soon as you try to go to a route in your live Netlify React site, you will get a 404 not found.
Well, that’s all there is to it! Hopefully this blog post help demystify just how simple it is to get a site on the internet very fast using React and Netlify!
Thanks for reading!