patricklizon/react-typescript-core-boilerplate

Simple boilerplate for TypeScript and React SPAs

react-core-boilerplate · Simplest SPA

< short description >

Table of content

• Prerequisites
• Setup
• Stack
• Scripts

Prerequisites

• Node - version specified in .nvmrc file.
• corepack - loads package manager defined in project without installing it

It's recommended to use node version manger (ie. fnm), for easier switching between different projects.

Setup

# switch to correct node version
fnm use

# Setup correct version of npm using corepack
corepack install
corepack enable

# Copy environmental variables
cp .env.example .env

# Install dependencies
npm ci

# Start dev server
npm start

Stack

Frontend

• TypeScript - typed language build on top of JavaScript,
• React - ui library used for development,

Tools

• vite - bundler and dev server,
• eslint - static code analysis,
• prettier - code formatter

Testing

• vitest - 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 performance debugging mode
serve	serves built application

Test

Script	Description
test	run unit tests
test:coverage	run test and generate coverage report
test:watch	run test in watch mode

Checks

Script	Description
check:types	validates TS types
check:format	validates code formatting
check:lint	validates linting rules
check:imports	checks for unimported code

Fix

Script	Description
fix:format	tries to fix formatting
fix:lint	tries to fix linter issues