This project includes configuration and tooling that conforms to Crema's baseline best-practices for a Web Application.
π§° Tools Used
- Create React App for simple configuration π
- Cypress for end-to-end testing
- ESLint for code linting
- Hygen for component and util generators
- Jest for unit tests
- Loki for visual testing
- Prettier for code formatting (via ESLint plugin)
- Storybook for component playground (and used by Loki)
- TypeScript for Static Typing in JavaScript (Learn)
- Install Node/NPM
- Install NVM (Node Version Manager)
nvm install 'lts/*' && nvm use
npm i
(install project dependencies)- Install the ESLint plugin for
your editorVS Code - Enable "Auto-Fix on Save" in
settings.json
:
// There will likely be other settings within this JSON object...
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}
Run the following scripts with npm run <SCRIPT_HERE>
:
start
- start appnew:component
- generate a new componentnew:util
- generate a new util(ity)test:analyze
- run bundle analyzertest:deps
- run dependency validation teststest:e2e
- run end-to-end teststest:lint:fix
- run linter and fix if possibletest:lint
- run lintertest:playground
- run component playground (storybook)test:unit:coverage
- run unit tests with coveragetest:unit
- run unit teststest:visual:approve
- approve visual changestest:visual:update
- update or create visual referencestest:visual
- run visual tests (loki)deps:graph
- run dependency validation and generate an SVG representing the dependency graph (requiresgraphviz
to be installed on your device)deps:report
- run dependency validation and generate an HTML report
These scripts are located in
package.json
and do not represent the entirety of available scripts, but are the most commonly used.
The src
directory is where the meat of your app is located. Below is a printout of its file-tree with a description for each part.
src
βββ assets // Fonts, Images, Etc.
β βββ logo.svg
βββ components // Create a new one with `npm run new:component`
β βββ App
β βββ __snapshots__ // Generated by Jest from `test.tsx`
β β βββ test.tsx.snap
β βββ README.md // Documentation
β βββ index.css // Styles
β βββ index.tsx // Main Module Code
β βββ stories.tsx // Playground stories (npm run test:playground)
β βββ test.tsx // Unit Tests (Jest)
βββ types // Centralize Type Definitions
β βββ Entity.ts // Base Type
β βββ EntityThing.ts // A Sub-Type
β βββ Id.ts // A Type Alias of `string`
β βββ MapStateToProps.ts // Includes our `State`
β βββ State.ts // Redux state interface
β βββ Thing.ts // Silly example used by `EntityThing`
βββ utils // Create a new one with `npm run new:util`
β βββ mySpecialUtil
β β βββ __snapshots__ // Generated by Jest from `test.ts`
β β β βββ test.tsx.snap
β β βββ README.md // Documentation
β β βββ index.tsx // Main Module Code
β β βββ test.tsx // Unit Tests (Jest)
β βββ decoratorCentered // Used in stories.tsx
β βββ shallowRender // Used to render components in test.tsx
βββ index.css // Root Styles
βββ index.tsx // Root Module
βββ react-app-env.d.ts // Definitions from create-react-app
βββ serviceWorker.ts // Documentation
- Use the code generators:
npm run new:component
npm run new:util
- When prompted for a name, prefer
camelCase
for utils andCamelCase
for components
- Fill out the
README.md
to describe what your code does - Run your unit tests
npm run test:unit
while working to see immediate feedback - If you get stuck at any point, just log an issue and we'll figure it out together π.