Recently I came across the idea of publishing a React App on GitHub Pages. That way, I can distribute my React App using GitHub, further saving server bandwidth and simplifying the API server structure. I have created a boilerplate for this structure.

Key points

  • GitHub has a feature that automatically posts the docs folder into a small landing page.
  • Create-React-App builds its results into a build folder.
  • So if I can automatically move files from /build to /docs whenever I build the app, it would work as if I have set up a CI/CD structure.

Implementation

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && rm -rf docs && mv build docs",
  "test": "react-scripts test --verbose",
  "eject": "react-scripts eject"
},

The yarn build command will replace the docs folder with a newer build of the app.

Result

React App
Web site created using create-react-app
anaclumos/react-on-github-pages
Contribute to anaclumos/react-on-github-pages development by creating an account on GitHub.