Menu

Deploy React JS application to Github Pages

RohitG 2 years ago 0 29

In this article, I will demonstrate how we deploy our application to GitHub Pages, using GUI and commands.

Github

GitHub, Inc. provides Git-based Internet hosting for software development and version control. It provides Git’s distributed version control and source code management (SCM) functions, as well as its own. For each project, it provides access control as well as various collaboration tools such as bug tracking, feature requests, task management, continuous integration, and wikis. It has been a Microsoft subsidiary since 2018, with headquarters in California.

It’s frequently used to house open-source projects. GitHub boasts of having over 73 million developers and more than 200 million repositories as of November 2021. (including at least 28 million public repositories). As of November 2021, it is the largest source code host.

Github Pages

GitHub Pages is a static site hosting service that accepts HTML, CSS, and JavaScript files directly from a GitHub repository optionally running them through a build process and then publishing a website. The GitHub Pages examples collection contains examples of GitHub Pages sites.

Your site can be hosted on GitHub’s github.io domain or on your own custom domain. See “Using a custom domain with GitHub Pages” for additional details.

You can configure access restrictions for your project site if it is published from a private or internal repository controlled by an enterprise that uses GitHub Enterprise Cloud. All GitHub Pages sites are privately published in an organization with controlled users. See “Changing the visibility of your GitHub Pages site” for additional details.

Note: We can only deploy static websites to GitHub Pages.

React Form UI

I will be deploying my already created React Form, you can download the code from here.

Deploy using Website GUI

Step 1: Go to your Github repository.

Step 2: Go to Settings

Step 3: Scroll down to GitHub Pages. Click on “Check it out here!”.

Step 4: Under source, select the branch and the folder, in my case I had root and docs. I selected ‘main’ and ‘root’, which is the default.

After that select the theme and domain(to which you want to publish), which are optional to select.

I want my site to be HTTP secure, hence I have selected “Enforce HTTPS”.

Step 5: After that, you save all the things.

In the image, you can see that my site is published. Sometimes it takes some time for your site to get live.

Deploy using gh-pages

Step 1: Open your code in any of the code editors. I am using Visual Studio Code.

Step 2: Open a terminal and execute the following command to install the gh-pages packages

npm install gh-pages --save-dev

We have added “–save-dev” since we want to have it as a development dependency. Hence it will not get installed on production.

Step 3: Add the following commands to the package.json file.

The first property we need to add at the top level homepage second we will define this as a string and the value will be 

"http://{username}.github.io/{repo-name}" 

  • {username} is your GitHub username
  • {repo-name} is the name of the GitHub repository you creeated

it will look like this :

"homepage": "https://github.com/Rohit-Gupta-IIC/gh-pages-demo"

Second in the existing scripts the property we to need to add predeploy and deploy.

"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

package.json will look like the following

Step 4: Now after that, we need to create a GitHub repo with the same name that we added as the value of “homepage” in package.json. You can skip the step if you already created one.

Step 5: Execute the following commands to add the GitHub repo remote to your project.

git init
git remote add origin https://github.com/Rohit-Gupta-IIC/gh-pages-demo.git

Step 6: Run the following command to deploy your React App to Github Pages.

npm run deploy

Conclusion

Thanks for reading, hope you got answers to some of your questions and learned how to deploy a React JS application to GitHub Pages.

Visit Let’s React to learn more about React.

– Advertisement – BuzzMag Ad
Written By

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *