Can We Host a Web App on GitHub? How to Deploy React App on GitHub?

What is Web Deployment?

Web deployment is the process of deploying the code (HTML, CSS, javascript, and server code) from source control or source artifacts to a hosting platform. This is usually in the cloud or on a local server.

The process can either be manual or automated.

A manual process is can be as simple as copying files from one server to another server.

In an ideal world, this process is automated, especially as the application grows. You want a reliable automated repeatable process. This eliminates human error and allows other processes access to the deployment pipeline. A popular process added to the deployment pipeline is testing. After completing a feature, a series of tests are created testing the use cases. This serves two functions. First, it tests if the new feature works in a production-like environment, and second, it guards against future breaking changes. Other examples of activities added to a deployment pipeline are, asset minimization (compressing javascript, HTML, and CSS files) and deployment of database changes.

Can we host a web app on GitHub?

Yes, you can host a web app on GitHub. There are a few different ways to do this, and we’ll go over a few of them here.

First, you can use GitHub Pages to host a static website. This is great for websites that don’t need any server-side code or databases. All you need is a GitHub account and a repository for your website’s code.

If you need to host a more complex web app that requires a server, you can use GitHub as a deployment platform. This means that you can host your web app on any server, and then use GitHub to deploy your code to that server. This is a great option for developers who want to use GitHub’s collaborative features, but need to host their web app on a more powerful server.

Finally, you can use GitHub to host your web app’s code, but not the actual app itself. This is a good option if you want to use GitHub’s collaborative features, but don’t want to use their servers to host your web app. You can use any server you want, and simply push your code to GitHub when you want to deploy it.

No matter which option you choose, GitHub is a great platform for hosting web apps. If you’re looking for a powerful and flexible platform, GitHub is a great choice.

Procedure to Deploy React app:

1. Create an empty repository on GitHub

1. Sign into your GitHub account.
2. Visit the Create a new repository form.
3. Fill in the form as follows:

   • Repository name: You can enter any name you want*.

     * For a project site, you can enter any name you want. For a user site, GitHub requires that the repository's name have the following format: {username}.github.io (e.g. gitname.github.io)

     The name you enter will show up in a few places: (a) in references to the repository throughout GitHub, (b) in the URL of the repository, and (c) in the URL of the deployed React app.

     In this tutorial, I'll be deploying the React app as a project site.

     I'll enter: react-gh-pages

   • Repository privacy: Select Public (or Private*).

     * For GitHub Free users, the only type of repository that can be used with GitHub Pages is Public. For GitHub Pro users (and other paying users), both Public and Private repositories can be used with GitHub Pages.

     I'll choose: Public

   • Initialize repository: Leave all checkboxes empty.

     That will make it so GitHub creates an empty repository, instead of pre-populating the repository with a README.md, .gitignore, and/or LICENSE file.

4. Submit the form.

At this point, your GitHub account contains an empty repository, having the name and privacy type that you specified.

2. Create a React app

1. Create a React app named my-app:

   In case you want to use a different name from my-app (e.g. web-ui), you can accomplish that by replacing all occurrences of my-app in this tutorial, with that other name (i.e. my-app --> web-ui).

   $ npx create-react-app my-app

   That command will create a React app written in JavaScript. To create one written in TypeScript, you can issue this command instead:

   $ npx create-react-app my-app --template typescript

   That command will create a new folder named my-app, which will contain the source code of a React app.

   In addition to containing the source code of the React app, that folder is also a Git repository. That characteristic of the folder will come into play in Step 6.

2. Enter the newly-created folder:

   $ cd my-app

At this point, there is a React app on your computer and you are in the folder that contains its source code. All of the remaining commands shown in this tutorial can be run from that folder.

3. Install the gh-pages npm package

1. Install the gh-pages npm package and designate it as a development dependency:

   $ npm install gh-pages --save-dev

At this point, the gh-pages npm package is installed on your computer and the React app's dependence upon it is documented in the React app's package.json file.

4. Add a homepage property to the package.json file

1. Open the package.json file in a text editor.

   $ vi package.json

   In this tutorial, the text editor I'll be using is vi. You can use any text editor you want; for example, Visual Studio Code.

2. Add a homepage property in this format*: https://{username}.github.io/{repo-name}

   * For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You can read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.

   {
     "name": "my-app",
     "version": "0.1.0",
   + "homepage": "https://gitname.github.io/react-gh-pages",
     "private": true,

At this point, the React app's package.json file includes a property named homepage.

5. Add deployment scripts to the package.json file

1. Open the package.json file in a text editor (if it isn't already open in one).

   $ vi package.json

2. Add a predeploy property and a deploy property to the scripts object:

   "scripts": {
   +   "predeploy": "npm run build",
   +   "deploy": "gh-pages -d build",
       "start": "react-scripts start",
       "build": "react-scripts build",

At this point, the React app's package.json file includes deployment scripts.

6. Add a "remote" that points to the GitHub repository

1. Add a "remote" to the local Git repository.

   You can do that by issuing a command in this format:

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

   To customize that command for your situation, replace {username} with your GitHub username and replace {repo-name} with the name of the GitHub repository you created in Step 1.

   In my case, I'll run:

   $ git remote add origin https://github.com/gitname/react-gh-pages.git

   That command tells Git where I want it to push things whenever I—or the gh-pages npm package acting on my behalf—issue the $ git push command from within this local Git repository.

At this point, the local repository has a "remote" whose URL points to the GitHub repository you created in Step 1.

7. Deploy the React app to GitHub Pages

1. Deploy the React app to GitHub Pages

   $ npm run deploy

   That will cause the predeploy and deploy scripts defined in package.json to run.

   Under the hood, the predeploy script will build a distributable version of the React app and store it in a folder named build. Then, the deploy script will push the contents of that folder to a new commit on the gh-pages branch of the GitHub repository, creating that branch if it doesn't already exist.

   By default, the new commit on the gh-pages branch will have a commit message of "Updates". You can specify a custom commit message via the -m option, like this:

   $ npm run deploy -- -m "Deploy React app to GitHub Pages"

   GitHub Pages will automatically detect that a new commit has been added to the gh-pages branch of the GitHub repository. Once it detects that, it will begin serving the files that makeup that commit — in this case, the distributable version of the React app — to anyone that visits the homepage URL you specified in Step 4.

That's it! The React app has been deployed to GitHub Pages! ????

At this point, the React app is accessible to anyone who visits the homepage URL you specified in Step 4. For example, the React app I deployed is accessible at https://gitname.github.io/react-gh-pages.