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:

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:

"deploy" : "gh-pages -d build"

5. Now we can Publish this app to Github:

So open up your terminal and write the following commands:

git remote add origin https://github.com/yourusername/TodoReactApp.gitgit remote set-url origin https://github.com/yourusername/TodoReactApp.gitnpm run build

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:

npm install gh-pages --save-dev

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

npm run deploy

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.