Deploying React App to GitHub pages

First Step of being a GEEK

Stuck with localhost:3000, have a static react app and want to deploy that, then ‘voila’ welcome aboard. Keep reading at the end of this you might end up knowing one more reason to fall in love with GitHub. Let’s get started:-

Well as prerequisites you need to have a GitHub account(nobody’s a free giver without authentication -_- ).Sign in or sign up in GitHub and proceed. Another basic requirement is installation of node.js in your Operating System. Well if you don’t have installed no problem just go to NodeJS and click on download depending upon our OS.

Lets Start:-

1. Creating the React Application (Skip this step if your application is already created)

npm install -g create-react-app
create-react-app my-app

Copy the previous code and paste it on your command prompt. Here the 1st line npm install -g create-react-app means you are creating a new React App. Here create-react-app my-app in place of my-app you can replace it with any name you prefer just change in the following codes likewise.

2. Adding GitHub Pages properties in my React App

cd my-app
npm install gh-pages --save-dev

cd my-app is the command for locating your my-app in the folder and opening it. npm install gh-pages --save-dev as the name suggests is used to install gh page properties which is essential to host your application.

3.Adding homepage and scripts in Package.json

The first property is we need to add the homepage which leads to the hosted link.

“https://[username].github.io/[reponame]”

[username] is the GitHub username, and [reponame] is the name of the GitHub repository. If you don’t have any code editors no problem just copy the below code, paste it on your command prompt. Enjoy :-)

"homepage": "http://gitname.github.io/react-gh-pages",' ./package.json
"predeploy": "npm run build",' ./package.json
"deploy": "gh-pages -d build",' ./package.json

If you want to edit with a code editor then you can download VS Code and just follow the screen:-

Check line 5,20,21 and make the changes

"homepage": "https;//[username].github.io/[reponame]",
.....
src{
.....
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},

4.Creating a new Git Repository

Just visit this website GitHub after you sign in to your account. Then it should look like the following page:-

Creating New Repository

You will see your GitHub name in place of the owner name. Add the repo name and copy the following code and paste it on you command prompt:-)

git init
git add .
git commit -m 'initial commit'
git remote add origin https://github.com/[username]/[reponame].git
git push origin master
npm run deploy 

The whole ‘npm run deploy’ statement

Congrats Geek for developing your first React Application and hosting it on GitHub. Here we have used ‘npm’ many use yarn and npx(which is a part of npm which makes sure that the version of your npm is updated to the latest one). If you need any more guidance you can go here to experiment more.

Congratulations :=)))