DEV Community

frontendexp
frontendexp

Posted on • Originally published at frontendexp.Medium on

How to Deploy your React App to GitHub Pages (FREE Hosting)

how to deploy react app with github pages

Hi there fellow developer! You probably already use github.com but do you know you can use github for hosting your webapp? Well good news, you most certainly can! I did it with this simple app! Click in the link to see it!
React App
Web site created using create-react-app
acoss22.github.io

Official documentation can be found here: https://pages.github.com/
If you prefer to see this tutorial on a video format, here is my youtube channel! https://youtu.be/ANyJeSocM70
What do you need?
Your app!
A GitHub account!
Two Repositories in GitHub
git and nodejs installed in your machine!
Let’s begin:
Create your repository and upload a brand new create-react-app.

  1. Run the command in this app: npm install gh-pages — save-dev You do this to install the GitHub package as a dev dependency.
  2. Edit the package.json, You will need this “homepage”: “http://.github.io/" and this “scripts”: { //… “predeploy”: “npm run build”, “deploy”: “gh-pages -d build” }
  3. Create a second GitHub repository and initialize it and add it as a remote in your local git repository
  4. Run the command npm run deploy And congratulations your app in available on world wide web! 👏 Now in order to find the link and actually see it there is a tip: Go to your GitHub repo where the app is supposed to be, go to settings and search for pages! You will be able to find the URL here!

Discussion (0)