How to Deploy React app on GitHub?

GitHub is a Git repository hosting service, but it adds many of its own features. While Git is a command-line tool, GitHub provides a Web-based graphical interface. GitHub is an amazing platform for developers to work collaboratively and host their projects on it.

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is one of the most popular JS libraries.

Assuming that you have created the react app, let’s work on deployment on GitHub.

1. Open the terminal, move to the project’s directory, and install the gh-pages in your app.

$ cd my-react-app
$ npm install gh-pages --save-dev

2. Open package.json. At the top add a “homepage” property.

3. In package.json, in “scripts” property, add a “predeploy” property and “deploy” property as shown below.

4. Create a git repository in the app’s folder.

$ git init

5. Add the GitHub repository as a “remote” in your local git repository.

$ git remote add origin https://github.com/{username}/{repo-name}.git

6. Generate a production build of your app, and deploy it to GitHub Pages.

$ npm run deploy

7. That’s it. Your app is hosted on the “gh-pages” branch. Check your repository for confirmation. You can access your React app at https://{username}.github.io/{repo-name}/ .

8. Commit your source code to the “master” branch and push it to use it later.

$ git add .
$ git commit -m "deployed"
$ git push origin master

9. You can access your real code in the “master” branch.

You did it. Enjoy your website now.

Happy Learning!