DEV Community

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

Posted on

6 1

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs