This template follows https://adrianhall.github.io/javascript/react/2020/03/29/parcel-typescript-react/
- Added React library for building components
- Added Typescript for type-checked scripting
- Added SCSS for styling
- Added Parcel for asset bundling, don't need to power of webpack for simple projects
- Added ESLint for linting (I have the VSCode Prettier plugin so haven't added here though I should)
- Added Storybook with addon (addon-actions) for demos
- Added jest test runner+assertion library and react-testing-library rendering engine for testing
- TODO add bem for css naming
Why build template from ground up and not just use create-react-app?
- We can’t alter the tsconfig.json except in some non-important ways.
- It uses webpack underneath, and cannot change.
- It uses jest and testing-library. Difficult to change.
Linting rules
This linting config has been inspired mainly by the rules used at AirNZ. Still a WIP as more complex projects are built with this template.
Feel free to modify with your needs. Just change the "rules" in eslintrc.js or change the base rules it "extends" in the same file.
This project should be generic enough to setup on any web host. So far tested with:
To build all dist assests in production branch, keeping master with source code only:
git checkout --orphan production
git rm -rf .
git commit --allow-empty -m "Init empty branch"
git push origin production
git checkout master
git worktree add dist production
-
On GitHub go into Settings -> GitHub Pages -> Select 'production' as the source. OR Pick any other provider for deployment (Netlify, Azure, AWS)
-
Run
yarn buildandyarn deployto publish the app.
-
A test runner allows you to run the tests and report on the results.
-
An assertion library allows you to decide if the test is successful or not.
-
A rendering engine renders your components into a DOM so you can test them.