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.
You’ve successfully subscribed to Sunghyun Cho
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.