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:
- Firstly, visit the https://github.com/login and log in there.
- 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:
"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 deploySo 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:
