react-webpack-starter-kit

Table of contents

• TOC
• About
• Available scripts
• Treemap sizes
• Q&A

About

Core

• React + Preact(as compatibility layer)
  • preact/compat
  • @prefresh/webpack
  • React-Router v6
• Redux + Redux Tool Kit
  • EntityAdapter
  • Query
• Typescript
• GraphQL
  • Apollo
  • Codegen
  • Cache
  • Auth
• Webpack
  • ForkTsCheckerWebpackPlugin
  • CopyPlugin
  • HtmlWebpackPlugin
  • TerserPlugin
  • TsconfigPathsPlugin
  • Sass/Scss
  • swc-loader
  • BundleAnalyzerPlugin
  • HotModuleReplacementPlugin
• PNPM

UI

• Chakra UI
• Chakra UI icons

Styles

• Chakra-UI style props
• Sass/Scss

Forms

• React Hook Form

Tests

• Cypress
  • Unit
  • e2e
  • Dashboard
• Run application before e2e using start-server-and-test
• Generate coverage report
  • Unit
  • e2e

Styleguide

• ESLint
• Prettier

CI

• Github Actions
  • Build
  • Unit tests
  • e2e tests
  • Coverage
  • Deploy

Utils

• Husky
  • Pre-commit(lint + format)

Available scripts

Start in dev mode

pnpm start

Build for production

pnpm build

Format via prettier

pnpm format

Lint via ESLint

pnpm lint

Run unit tests

pnpm unit

Run e2e tests

pnpm e2e

Build for production and run BundleAnalyzerPlugin

pnpm build:analyze

Treemap sizes

Generated via BundleAnalyzerPlugin

Stat

Chunk	Size
All	1.44 MB
vendors.js	1.39 MB
main.js	50.35 KB
runtime.js	1.49 KB

Parsed

Chunk	Size
All	462.61 KB
vendors.js	441.9 KB
main.js	19.22 KB
runtime.js	1.49 KB

Gzipped

Chunk	Size
All	147.12 KB
vendors.js	140.25 KB
main.js	6.08 KB
runtime.js	802 B

Questions and Answers

Why there is a tsconfig and webpack config under cypress folder?

Cypress requires independent configuration for some tools. For example, we dont need to use full webpack config for tests and we need to include cypress types for typescript.

Since(for this moment) kit uses swc-loader we also need to copy .swcrc file from root to the cypress folder. In the future there is could be the way to set path for .swcrc and use root config.

What about images and favicons?

I decided to focus on the tools and their configs. If you need to add some loaders or plugins feel free to customize webpack.config. For example you may want to add favicon-webpack-plugin. This plugin could generate different sets of favicons for you.

Why there is so much index.ts?

I'm using concepts from feature-sliced architecture. You could delete or replace content from src folder and use your own naming strategy or architecture. I like short paths in imports and index.ts + ts-paths works perfect for me.

Also check out atomic-design pattern.

Why do I need preact?

With Preact you could use all of React features with smaller bundle size. Thanks to preact/compat all we need to do is create aliases for webpack and use preact/compat instead of React. According to Preact website:

preact/compat is our compatibility layer that allows you to leverage the many libraries of the React ecosystem and use them with Preact.

Using this "compatibility layer", we combine a small bundle size(~100kb diff for demo app) with full support for all React ecosystem libraries such as: react-redux, react-router, etc.