About dyna-ts-module-boilerplate

Boilerplate with Webpack setup for ES6/ESNEXT for React TypeScript Component Libraries/Packages.

• Develop in TypeScript
• Debug with Chrome Dev Tools
• Write tests with Jest
• Lint
• Build
• Deploy on Git and npm

This boilerplate includes minimal configuration and dependencies for creating one or multiple modules written in TypeScript.

It can export one module or multiple for explicit imports.

Happy coding!

Not react, just Web or Node library?

This boilerplate is designed for developing React components. However, if you need a lighter boilerplate for node utils, or web utils without react, you can use the the dyna-ts-module-boilerplate, which is a similar boilerplate but lighter.

Again this supports React and JSX but hasn't StoryBook, react ESList etc.

How to use this boilerplate

To use it and create your own module:

• Clone it into a folder named after your module, like my-module.
• Run pnpm bootstrap to unlink it from this git repo.

Example:

git clone https://github.com/aneldev/dyna-ts-react-module-boilerplate.git my-module
cd my-module
pnpm bootstrap

Your repo will now be ready, and you can git init under your own account.

Why is create-react-app different?

It is different because create-react-app creates React applications and includes everything an application needs.

The dyna-ts-react-module-boilerplate creates React modules (reusable components). It creates React components that will be used in React applications or other modules.

Features

• Uses the powerful pnpm as a packager, but you can easily replace it with another one
• Written in TypeScript, .tsx, .ts
• Supports CSS, SCSS & LESS at the same time
• Advanced ESLint
• Tested with Jest
• Debugged with Chrome Dev Tools
• Distributes with TypeScript definitions
• Supports distribution of one or multiple modules for explicit import
• Supports distribution of modules for Web and Node
• Analyzes the distribution
• Exports ESNext modules
• Exports Typescript declarations
• Detects circular dependencies (which can lead to undefined or null imports)
• Monorepo friendly

Specs

• Webpack 5
• TypeScript v5 with higher restrictions
• Supports ES2019 lib
• React JSX syntax
• Less/Scss module CSS or other loaders
• Image loaders
• ESLint configuration for React and rules
• Webpack analyzer for package content with the webpack-bundle-analyzer

Scripts