A minimal and uncomplicated base to get started building a bundled React web app!

• Yarn Berry (for node package management)
• Vite (as the module bundler)
• React (as the web UI library)
• TypeScript (as the preferred scripting language due to its type safety and ecosystem maturity)
• Jest (for automated testing)
• GitHub Actions deployment workflow for GitHub Pages
• No CSS preprocessor.

If you don’t want to deploy to GitHub pages, delete the .github folder to disable the GitHub Actions workflow.

First, you need to install node and npm. On Debian, this can be done with:

sudo apt-get install nodejs npm

Afterwards, you’ll need to clone and enter the repo:

git clone https://github.com/simshadows/bundled-react-web-app-boilerplate.git
cd bundled-react-web-app-boilerplate

Optionally, set up npm with a globals directory (and reopen your terminal session):

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc

Now, install yarn globally (and optionally, check its version):

npm install -g yarn
yarn --version

Now you’re good to go! Build and serve the app using:

yarn build
yarn serve

Or, you can use the development server:

yarn start

Please avoid modifying the following files by hand:

• Anything in .yarn/
• Anything in _generated/
• .pnp.cjs
• .pnp.loader.mjs
• yarn.lock

These files are automatically managed by Yarn and Jest.

In trying to figure out the nicest and most well-supported ways of doing things, I’ve run into a couple features that I’m not sure how to include in this boilerplate. These are:

• Moving all tooling configuration into internals.
• Mobile icons.
• I have no idea why internals/global.d.ts works even though I haven’t explicitly referenced it anywhere.
  • If I add "include": ["internals/global.d.ts"], to tsconfig.json, type checking no longer works. I have no idea why.

All original source code is licensed under the The Unlicense (Unlicense).

All original images are licensed under the CC0 1.0 Universal (CC0 1.0).