This project includes configuration and tooling that conforms to Crema's baseline best-practices for a Web Application.
🧰 Tools Used
Run these commands from project root.
nvm install
(in new sessions run nvm use
to load version specified in .nvmrc
unless aliased to default)npm i -g npm@latest
(npm@v7+ required)npm i
(install project dependencies)settings.json
:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
To access
settings.json
in VS Code, typeshift + ⌘ + P
) then search "Open Settings (JSON)"—add the above settings within the existing JSON object."But I don't use VS Code." That's fine but you're on your own. 😅
Run the following scripts with npm run <SCRIPT_HERE>
:
start
- start appnew:component
- generate a new componentnew:util
- generate a new util(ity)new:type
- generate a new typetest: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 testsdeps:graph
- run dependency validation and generate an SVG representing the dependency graph (requires graphviz
to be installed on your device)deps:report
- run dependency validation and generate an HTML reportThese scripts are located in
package.json
and do not represent the entirety of available scripts, but are the most commonly used.
Below is the project's file-tree with notes added as inline comments.
Uninteresting info is denoted by
...
.
├── .github # 👈 PR/Issue Templates, workflows, and Renovate config
├── .storybook # 👈 Storybook config
├── cypress # 👈 Cypress integration testing
│ ├── fixtures # 👈 Test data
│ │ └── example.json
│ ├── integration # 👈 Tests go here
│ │ └── sample_spec.ts
│ └── ...
├── public # 👈 Static files
├── src
│ ├── assets # 👈 fonts, images, etc.
│ │ └── logo.svg
│ ├── components # 👈 Use `npm run new:component` to generate
│ │ ├── App
│ │ │ ├── README.md # 👈 Every component has a README
│ │ │ ├── index.tsx # 👈 Contains main implementation
│ │ │ ├── stories.tsx # 👈 Component stories; use `npm run test:playground` to run
│ │ │ ├── styles.css # 👈 Component styles (not included in generated code)
│ │ │ └── test.tsx # 👈 Component tests; use `npm run test:unit` to run
│ │ └── README.md # 👈 Every top-level directory in `src` has a README.md
│ ├── types # 👈 Type definitions go here; use `npm run new:type` to generate
│ │ └── README.md
│ ├── utils # 👈 Utilities go here; use `npm run new:util` to generate
│ │ └── README.md
│ ├── index.css # 👈 Root styles
│ ├── index.tsx # 👈 Root application file
│ ├── react-app-env.d.ts # 👈 Extends react-scripts TypeScript definitions
│ ├── reportWebVitals.ts # 👈 Useful, but not required
│ ├── serviceWorker.ts # 👈 Useful, but not required
│ └── setupTests.ts # 👈 Top-level setup for Jest test runs
├── .dependency-cruiser.js # 👈 Dependency Cruiser config
├── .eslintrc.js # 👈 ESLint - Run Commands
├── .gitattributes # 👈 Git meta information
├── .gitignore # 👈 Git ignore patterns
├── .nvmrc # 👈 Node Version Manager - Run Commands
├── .prettierrc.js # 👈 Prettier - Run Commands
├── LICENSE # 👈 LICENSE 😜
├── README.md # 👈 👈 👈 YOU ARE HERE
├── cypress.json # 👈 Cypress config
├── package-lock.json
├── package.json
└── tsconfig.json # 👈 TypeScript config and extends
npm run new:component
npm run new:type
npm run new:util
README.md
to describe what your code doesnpm run test:unit
while working to see immediate feedback