How to Host a React App on GitHub Pages

GitHub Pages allows you to host static resources (HTML, CSS, and JavaScript) directly from your GitHub repositories.

There is an option for free hosting (limited to 1 repository per account using address username.github.io). You can also choose a paid account ($4 per user monthly) which in my option is a great choice.

Unfortunately, it is NOT possible to host server side rendering scripts, but for React you can export your react app to HTML/JS/CSS and host it on GitHub pages. Here is how it can be done:

1. Create a GitHub repository. Clone the repository locally (on your computer) and add your react app files.
2. Open command prompt (or terminal) and navigate to your react app folder. Then execute the following command:

npm install gh-pages --save-dev

3. Open package.json file for edit and apply the following changes:

At the beginning, insert the following:

"homepage": "https://your-organization-or-username.github.io/my-react-app"

and in scripts, add two lines for ‘predeploy’ and ‘deploy’:

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

4. Execute the following command:

npm run deploy

Note: It will create a new branch (gh-pages) with build files (HTML, JavaScript, and CSS) for the hosting

5. (Optional) commit and push your changes to main branch

And that’s all. Now your site is online. You can open your GitHub repo in browser, Settings -> Pages to see more details, add a custom domain, etc.)