Dojo Project - Learning the Build Process for a React Web App

Date created: Tuesday, April 28, 2020

Date last modified: Wednesday, June 10, 2020 (security patch lodash July 23, 2020)

Summary

• This is an open-source, lightweight, maintainable React app template.
• It's built with as few dependencies and configurations as possible.
• Toolchain is built from scratch with yarn, Parcel, React & GitHub Pages.
• Official documentation of all tech is heavily referenced through the tutorial for best-practices.
• Latest versions of all tech is used to reduce vulnerabilities.

Who is this for?

• Junior devs who have finished a bootcamp and want to know how to build a React web app all the way from scratch and understand things like .gitignore, a new, more secure package manager (yarn) other than npm, the package.json file, creating a dev environment, and deploying to production.
• Devs who want to use Parcel & yarn to build any kind of website, whether React (this tutorial), or Bootstrap & Sass static site (this doc), etc.

Good things to know before you start

• This tutorial is for building a React app with one page and hosting on GitHub Pages (without a custom domain).
• Note that this tutorial works with a GitHub Pages site, and not a GitHub user site (I tried, but it seems there's currently a bug).
• I wanted to add multi-page SPA functionality with react-router-dom, but couldn't get react-router-dom BrowserRouter fully working. I think if you try a custom domain with GitHub Pages and configure the sitemap, it could possibly work. This is explained more in 9. react-router-dom experiment.

Sites built with this tutorial

• This tutorial's open-source React web app template
• My open-source portfolio
• Yuna Han's Bored API web app

Table of Contents:

1. Project goals
2. Dependency choices
3. Set up local files
4. Set up development environment
5. Set up build process
6. Deploy to production
7. Verify the build
8. Dockerize experiments
9. react-router-dom experiment
10. End of sprint reflection