DEV Community

Cover image for Host react app in GitHub Pages for free
Nitin Kumar
Nitin Kumar

Posted on

4

Host react app in GitHub Pages for free

So, today we'll see how to host our react-app in GitHub pages for free.

Pre-requisites

  • GitHub account
  • Project created in react js
  • Node installed
  • Code Editor [VS Code preferred]

Steps

  1. First of all, install node in your system.

  2. Navigate to your project root directory & open that in VS Code. First check whether node is installed in your system or not. Open New Terminal & put the command npm --version.

Image description

  1. Install the gh-pages npm package using following command - npm install gh-pages --save-dev

Image description

  1. Now, login to your GitHub account & create a new repo with any name. I'm using demo-react-host for mine.

Image description

  1. Navigate to VS Code now & open package.json file to edit the homepage property. The homepage's value should be in the format https://{username}.github.io/{repo-name}

Image description

  1. Add deployement scripts to the same file.
"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
},
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Add the remote to local git repo by putting following command
git remote add origin https://github.com/{username}/{repo-name}.git
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Upload all the files to GitHub repo.

Image description

  1. Deploy the site to GitHub repo using the command npm run deploy

Image description

  1. Now, navigate to the link given in the "homepage" property of package.json. You must see the homepage you've created.

In case you're getting error while doing remote origin follow below:

  1. Just put following command
git remote rename origin upstream
Enter fullscreen mode Exit fullscreen mode

; You can change name of upstream to any name[upstream1, upstream2 etc].

Image description

  1. Then add new remote origin by putting following command
git remote add origin https://username.github.io/repo_name
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Then, put the following command to push all commits
git push -u origin --all
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Now, deploy the site using following command
npm run deploy
Enter fullscreen mode Exit fullscreen mode

It should result in status as 'Published' at the end.

Image description

  1. Now, navigate to the link given in the "homepage" property of package.json. You must see the homepage you've created.

I've tried to explain how to host your react app in GitHub pages for free in the simplest manner possible. However, if you're facing any difficulty, do mention it in the comment. Will try to help.

You can follow me on LinkedIn, Instagram or check my latest projects on my GitHub. Also, you can check my portfolio too.

[Keep Coding] [Thanks]

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay