How to deploy your react app to git hub pages

Introduction

I am going to walk with you through a very simple step by step procedure of how you can deploy your react app to a git hub page

What is github?

GitHub is a code hosting platform for version control and collaboration for developers

Github makes it easier to deploy your projects as a developer to begin

You can begin with here check link here

Before you start on react

Setting up your environment is more important for you as a developer to avoid future errors

Lets set up our environment

Installing node and npm

First you need to install node then run the command below to check the version

node --version

The following command will show on the CLI depending on the version

v6.10.1

Second install npm(node package manager) of which it comes with node already installed

to check on the npm version run the following command

npm --version

The following command will show depending on the version

3.10.10

Now create a react app by running the following command in your command line interface then change the directory

npx create-react-app appname

run

npx create-react-app appname

then

cd my-app

Make sure you have a github account and created a repository

Installing gh-pages

Now Install the gh-pages package as a “dev-dependency” of the app run the command and give it some time to complete

npm install gh-pages --save-dev

Now some properties to the app’s package.json file in the react app created ,

Configuring the environment for deployment

edit the package.json file and add homepage property.

Define its value to be the string http://{username}.github.io{repo-name},

where {username} is your GitHub username, and {repo-name} is the name of the

GitHub repository you created

see the code below

//some code at the top
"homepage": "http://<gitname>.github.io/<repo name>"

changed to my code example

{
  "name": "chuck-norris",
  "homepage": "http://ian-yitzhak.github.io/chuck-norris-api",
  "version": "0.1.0",
  "private": true,
  "dependencies": {

In the code snippet below ian-yitzhak is my git name while chuck-norris-api is the repo name

In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

"scripts": {
  //some code
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Deployment

Now Create a git repository in the app’s folder. run

git init
Initialized empty Git repository in ........

Add the GitHub repository as a “remote” in your local git repository.

git remote add origin <git repository url>

Now deploy your app to the github pages

run

npm run deploy

Now your app is now accesible check your url specified in the step above as

"homepage": "http://<git name>.github.io/<repo name>",

In my case its presented as mylink

Now your right there and that ALL on How to deploy your react app to git hub pages