DEV Community 👩‍💻👨‍💻

Cover image for Deploy your React App on Github in 5 minutes
Yongchang He
Yongchang He

Posted on

Deploy your React App on Github in 5 minutes

  • 1. At your app root directory, run the command:
npm install gh-pages
Enter fullscreen mode Exit fullscreen mode
  • 2. Publish your app to GitHub:

Ether button is OK.
Ignore this step if you have already published your app

Image description

  • 3. Add the following to the first line of package.json:

"homepage": "https://GIT_USERNAME.github.io/REPOSITORY_NAME",

For the URL string, you will need to replace it with your git user name and your current repository name.
TIPS: click the gear icon on the GitHub page, and the URL will show up:

Image description

Image description

  • 4. Add the following in "scripts" in package.json:

"predeploy":"npm run build",

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

Image description

  • 5. Save the app and commit the change to update your remote repo.

Alternatively, you can directly update your JSON file on the GitHub webpage and commit changes.

  • 6. Deploy the app by running:
npm run deploy
Enter fullscreen mode Exit fullscreen mode

Image description

After the deployment, some changes exist. Just commit these changes again.

  • 7. Find your app URL at General > Pages:

Image description

Image description

  • 8. Have fun!~

This is my React app Demo I used for this tutorial and welcome to play
Git Repo for this game

Image description

Reference

Cover Page from:
https://akhtarvahid.medium.com/setup-git-and-deploy-react-app-to-github-pages-7b5c4180fdaf

Top comments (0)

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!