Deploying React tutorial Grocery List app to Github pages

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html . 

Procedure followed by tutorial to deploy to GitHub pages which I tried to repeat

1) Run npm i gh-pages -D

2) Add to package.json after version: "homepage": "https://{username}.github.io/{reponame}",

I added: "homepage": "https://ravisiyer.github.io/react_deploy_gh",

3) In package.json, before start property, add predeploy and deploy properties to scripts:

I added:

"predeploy": "npm run build",

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

4) Ensure that .gitignore file is present and setup properly. Then run:

git init

git add .

git commit -m "first commit"

5) In GitHub, create new repository with same name as reponame in package.json entry added earlier.

I created react_deploy_gh repo in GitHub.

6) In VSCode terminal, run commands listed under "…or push an existing repository from the command line" in github page shown just after repo creation. In my case, these commands are:

git remote add origin https://github.com/ravisiyer/react_deploy_gh.git

git branch -M main

git push -u origin main

7) In VSCode terminal run: npm run deploy

This takes some time to finish.

8) Now visit the homepage url that we have specified in package.json file - https://ravisiyer.github.io/react_deploy_gh - in a browser. This should run the app.

In my case, it did run the app, which ran as expected (on mobile as well as on Chrome in desktop)

Deploying a React App* to GitHub Pages, https://github.com/gitname/react-gh-pages#deploying-a-react-app-to-github-pages