/vite-react-boilerplate

Primary LanguageTypeScriptMIT LicenseMIT

Vite React Boilerplate

Table of Contents

Overview

Built with type safety, scalability, and developer experience in mind.

  • pnpm - A strict and efficient alternative to npm with up to 3x faster performance
  • TypeScript - A typed superset of JavaScript designed with large scale applications in mind
  • ESLint - Static code analysis to help find problems within a codebase
  • Prettier - An opinionated code formatter
  • Vite - Feature rich and highly optimized frontend tooling with TypeScript support out of the box
  • React - A modern front-end JavaScript library for building user interfaces based on components
  • Tailwind CSS - A utility-first CSS framework packed with classes to build any web design imaginable
  • Storybook - A frontend workshop for building UI components and pages in isolation
  • TanStack Router - Fully typesafe, modern and scalable routing for React applications
  • TanStack Query - Declarative, always-up-to-date auto-managed queries and mutations
  • TanStack Table - Headless UI for building powerful tables & datagrids
  • Zustand - An unopinionated, small, fast and scalable bearbones state-management solution
  • React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
  • Zod - TypeScript-first schema validation with static type inference
  • React Testing Library - A very light-weight, best practice first, solution for testing React components
  • Vitest - A blazing fast unit test framework powered by Vite
  • Playwright - Enables reliable end-to-end testing for modern web apps
  • Nivo - A rich set of data visualization components, built on top of D3 and React
  • Faker - Generate massive amounts of fake (but realistic) data for testing and development
  • Dayjs - A minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers
  • Husky + Commitizen + Commitlint - Git hooks and commit linting to ensure use of descriptive and practical commit messages
  • ts-reset - Improvements for TypeScripts built-in typings for use in applications
  • Docker - Containerization tool for deploying your app

A more detailed list of the included packages can be found in the Installed Packages section. Packages not shown above include Devtools, ui helper libraries, and eslint plugins/configs.

Requirements

If you'd like to use the included Dockerfile then Docker is required as well:

Getting Started

Getting started is a simple as cloning the repository

git clone --

cd supply-chain-solutions-frontend

pnpm install

And running the setup script (initializes husky and installs playwright)

pnpm run setup

Testing

Unit testing is handled by React Testing Library and Vitest while End-to-End (E2E) Testing is conducted by Playwright.

If you'd like to run all tests, Unit and E2E alike, execute the following command:


pnpm run test

Unit Testing

When running unit test scripts, it is assumed that unit tests will be colocated with the source files. Take a look at the placeholder README file in src/components for an example.

If you'd like to execute unit tests specifically, the below command will execute vitest:


pnpm run test:unit

If instead you are interested in coverage reporting, run:


pnpm run test:unit:coverage

All unit tests run in watch mode by default. If you'd like to disable watch mode, change the package.json test scripts with the following

before:


"scripts": {
"test:unit": "vitest src/",
"test:unit:coverage": "vitest --coverage src/"
}

After:


"scripts": {
"test:unit": "vitest run src/",
"test:unit:coverage": "vitest run --coverage src/"
}

Note: Faker is included to provide mock data. See the Important Notes section for crucial details regarding this package. Specifically, point 4.

End-to-End (E2E) Testing

Running E2E tests use a similar syntax to running unit tests:


pnpm run test:e2e

If you wish to see the reports, run:


pnpm run test:e2e:report

Preparing for Deployment

Instructions are provided for deploying both with and without Docker. Both options still require a platform to host the application.

Without Docker

Deploying is as easy as running


pnpm run build

and pointing your web server to the generated index.html file found at dist/index.html

With Docker

A Dockerfile with an NGINX base image is also provided for quick and easy deployments. Simply execute the following commands:

  1. pnpm run build
  2. docker build . -t <container_name>
    • Example: docker build . -t todo-app
  3. docker run -p <port_number>:80 <container_name>
    • Example: docker run todo-app -p 8080:80

Continuous Integration

Due to the vast array of tools, opinions, requirements and preferences a CI template is not included in this project.

Devtools

This project includes a set of Devtools. Some are additional package dependencies whereas others come built-in to the packages themselves.

Devtool dependencies:

A set of utility components are provided in src/components/utils/development-tools/. These wrapper components check whether the application is running in development or production mode and render the component or null respectively. In other words, you can confidently use them during development without having to worry about them showing up for end users in production.

Built-in Devtools:

  • Zustand

Zustand provides a built-in devtools middleware for use with Redux DevTools.

Installed Packages

A simplified list can be found in the Overview section.

Base

Routing

Linting & Formatting

State Management

UI

Forms

Data Visualization

Testing

Development Tools

Git

Other