ReactJs Step-By-Step Tutorial Series — Part 5 — Deploy ToDo Application to Github Pages

Hello Readers,

This is the Part-5 of our ReactJs tutorial series. In this article, we will publish and deploy ToDo Application, which we previously created, to Github pages.

Quick links for our ReactJs Series:

Tutorial #1 — Introduction and Installation of ReactJS

Tutorial #2 — ReactJS Components

Tutorial #3 — ReactJS Components Communication

Tutorial #4 — Build ToDo Application Using ReactJS

Tutorial #5 — Deploy ToDo Application to Github pages (This Tutorial)

Deploy ToDo Application to Github Pages

Here are the Steps to Publish your React application to Github:

  1. Firstly, visit the https://github.com/login and log in there.
  2. Create a New Repository and name it as ‘TodoReactApp’

3. Now open your ToDo app in Visual Studio Code and then open the package.json file.

Here in package.json, create a property as “homepage” and give it a value like — ”https://www.yourgithubusername.github.io/reponame

4. Now in this package.json also add one “deploy” property inside scripts:

5. Now we can Publish this app to Github:

So open up your terminal and write the following commands:

So now our Production Build is ready.

You can open the directory structure and you can see the Build folder is generated.

6. Finally, we will Deploy this Build, so write the following command:

(this is the gh-pages tool and we have given its reference in package.json)

So now our app is Published on github…. Yeah..!!

7. You can now go to the github.com and open to your Repository’s Settings, scroll down up to Github pages section and you can see the URL where your app is running live.!!

So, that’s all for this ReactJs tutorial series. I hope you find these articles useful. Thanks for reading!

You can find full code for this here:

https://github.com/jinalshah999/reactTodoApp

Jinal Shah is corporate trainer on different technology like node.Js, Angular,Ionic 2, BOT Framework etc.