Aakanksha
How to deploy React App to GitHub Pages

How to deploy React App to GitHub Pages

Aakanksha's photo
Aakanksha
·

4 min read

Hello everyone!

If you want to host your amazing ReactJs projects, that you are currently working on, but don’t know how to then you have come to the right place.

In this blog, we will see how to create a ReactJs application deploy it to GitHub pages.

Prerequisite

These are enough. I’ll explain what to do next.

A brief introduction to the tools & technologies:

React:

React is a JavaScript library for building user interfaces.

Git & GitHub:

Git is a version control system that lets you manage and keep track of your source code history.

GitHub is a cloud-based hosting service that lets you manage Git repositories.

npm:

npm is a package manager for the JavaScript programming language.

GitHub Pages:

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub

Let’s get started!

Step 1

Create a ReactJS project using create-react-app.

$ npx create-react-app react-ghpages-demo

react-ghpages-demo is the project name. After creating the application, start the local development server, and check if it's up and running.

# go inside the newly created application folder
$ cd react-ghpages-demo
# run react app in a development environment
$ npm start

If you see this page on your browser, congratulations, you are ready for the next step.

Step 2

Install gh-pages package

# inside the project we have just created
$ npm install gh-pages --save-dev

Step 3

After installing the gh-pages, we will modify the package.json file as mentioned below -

  • homepage - the URL where you want to host your application. The format will be -
"http://[username].github.io/[repo-name]"

  • predeploy - the command to build your project before deployment.

  • deploy - which branch and directory to deploy.

Step 4

Now it’s time to move your react app to a GitHub repo.

Create a new repository

Note — It should be a public repository in order to deploy it on gh-pages.

Push your local changes to the repository -

# initiate git inside your project
$ git init

# add all your changes to staging
$ git add .

# commit all staged changes
$ git commit -m 'initial commit'

# add the remote repository
$ git remote add origin https://github.com/aakanksha-02/react-ghpages-demo.git

# OR, if you are getting any permission issue with above
# delete the .git from your project then repeat the above steps but use the below instead.
$ git remote add origin https://<user-name>:<password>@github.com/aakanksha-02/react-ghpages-demo.git

# push your local changes on GitHub repo
$ git push origin master

Step 5

As of now, all the setups are done. Now we will deploy our application.

# to deploy the ReactJs app
$ npm run deploy

A successful deployment will look like below. It should have published at the bottom.

Step 6

Now go to your favorite browser and paste the URL you have configured as homepage in package.json

Congratulations. It’s live now. You can skip the next step.

Step 7

In case your website is still not live, go to your respective GitHub repo.

Navigate to the Pages section under Setting tab. Make sure the things mentioned below are in place -

  • your branch should be gh-pages

  • folder should be root.

  • And you see the something like — Your site is published at [https://aakanksha-02.github.io/react-ghpages-demo/](aakanksha-02.github.io/react-ghpages-demo)

💡A brief explanation for the above -

In general, we need to upload the build folder to deploy any website. Here it is done by gh-pages for us. When we run the deploy command, it creates a build and uploads it to gh-pages branch. GitHub takes index.html (entry point of react app) from the build and renders it.

Thanks for reading ❤️

If you have built something and deployed it on gh-pages feel free to share it in the comment section and let everyone see it.

See you in my next post, Take care :)

JavaScriptReactGitHub