♨️ React Minimal Boilerplate

A React boilerplate with mininal setup to help you quickly kickstart your applications.

Introduction

This setup is simplier than react-nostalgia-boilerplate version.

• Use Vite to develop locally and create bundle for production.
• Use Vitest to perform Unit test.

This boilerplate by default, targets browsers which support the native ES Modules, native ESM dynamic import, and import.meta. You can specify custom targets via Vite build.target config option, where the lowest target is es2015.

The setup is opinionated as it is based on my experience of working with difference React projects. It works very well to me and my team. I hope I can make you feel the same.

The Setup

• React v18
• React Router v6
• TypeScript
• Unit test with Testing-library
• Linting with Eslint and code formatting with Prettier
• Develop and build production with Vite

Get Started

• Use Boilertown CLI.

  # npm
  npm create boilertown@latest -- -b react-minimal-boilerplate
  
  # yarn
  yarn create boilertown -b react-minimal-boilerplate
  
  # pnpm
  pnpm create boilertown -b react-minimal-boilerplate
  
  # bun
  bun create boilertown/react-minimal-boilerplate [project-name]

• Click the green "Use this template" button to generate a new repository with the same structure and files.

  

  Ref: Github Docs

Development

• Run the app in development environment:

  pnpm dev

• Run components unit tests with jest:

  pnpm test

• Build the app in production mode:

  pnpm build

• Run the app in production mode. It uses static files from build folder.

  pnpm serve

GitHub Actions

This boilerplate uses GitHub Actions to perform unit test on Pull Request. You can see the details at pr-test.yml.

Contributing

react-minimal-boilerplate ❤️ your contributions. If you have any ideas, suggestions, fixes, feel free to contribute.