core-boilerplate · most basic SPA boilerplate
< short description >
Table of content
Prerequisites
It's recommended to use node version manger (ie. fnm), for easier switching between different projects.
Setup
# Copy environmental variables
cp .env.example .env
# Install dependencies
npm ci
# Start dev server
npm startResources
< section description >
Stack
Frontend
- TypeScript - typed language build on top of JavaScript,
- React - ui library used for development,
- CSS modules - scoped css
Tools
- webpack - bundler
- swc - javascript / typescript compiler
- eslint - static code analysis
- prettier - code formatter
- autoprefixer - PostCSS plugin to parse CSS and add vendor prefixes to CSS rules
Testing
- jest - test runner
- chai - assertion library
- testing-library - testing utilities
- user-event - more advanced simulation of browser interactions
Scripts
Summary of npm scripts.
General
| Script | Description |
|---|---|
start |
starts application in DEV mode |
build |
builds app in PROD mode |
build:perf |
builds app in react performance debugging mode |
serve |
serves build application |
Test
| Script | Description |
|---|---|
test |
run unit tests |
test:coverage |
run test in watch mode |
test:watch |
run test and generate coverage report |
Checks
| Script | Description |
|---|---|
check:types |
validates TS types |
check:format |
validates code formatting |
check:lint |
validates linting rules |
check:lint-staged |
run fix:format and fix:lint on staged files |
check:imports |
checks for unimported code |
Fix
| Script | Description |
|---|---|
fix:format |
tries to fix formatting |
fix:lint |
tries to fix linter issues |