☢️ Disclaimer: The configurations provided here are tailored to my individual coding style and workflow. They are based on my own experiences, preferences, and opinions about best practices in software development. However, please note that coding standards and best practices evolve over time, and as such, these configurations may be subject to frequent updates and changes. Users are encouraged to review and adapt these configurations according to their own requirements and preferences.
- Table of Contents
- Creating a GitHub repository
- Setup a npm Client
- Repo Management
- Versioning & Releases
- Typescript Support
- Bundling
- Testing
Create a new repository from the GitHub UI or the gh CLI.
Make it empty
Tip
Initialize it as an empty repository to make it easier for mono-repo management tools and to make consistent commit messages.
Use the .gitignore files that come with the monorepo management tools or boilerplates, or use one of the relevant ones from .gitignore folder.
Tip
Most .gitignore files generated by boilerplates doesn't exclude some files like MacOS .DS_Store, etc. Hence, I maintain a list of such common cases and append them to the generated ignore files if they doesn't include.
I use pnpm as my preferred npm client. It's fast and it saves disk space by using a single storage for all packages across projects.
Refer to the pnpm docs for installation instructions.
These days, I use turborepo as my go-to tool for managing monorepos. It's fast, easy to use, and has a great CLI.
pnpm dlx create-turbo@latest-
Answer with
.forWhere would you like to create your turborepo? .to initialize the repository from the root. -
Answer with
pnpm workspacesforWhich package manager do you want to use?.
Important
Refer to the turborepo docs for installation instructions since the above instructions are subject to change.
EditorConfig helps maintain consistent coding styles across various editors and IDEs.
Use the following .editorconfig file at the root of the mono-repo.
For nested packages, you can use a separate .editorconfig file tailored to the specific requirements of that package or just inherit the root ..editorconfig as shown in the following example configuration:
Warning
To use ESLint effectively, ensure you have it installed in your IDE or code editor. You can install ESLint via your editor's extension marketplace or by following the instructions on the ESLint website.
I've written my own ESLint plugin and it's available on npm as @brionmario/eslint-plugin.
Installation can be done using the following command:
pnpm add -D eslint @brionmario/eslint-pluginAdd the following npm script to run eslint on common files. (You may skip this if the monorepo management tool or the boilerplate adds their own script.)
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",Add the following .eslintrc.cjs file at the mono-repo root.
Add the following .eslintignore file at the mono-repo root.
Warning
Before using Prettier, make sure to install the Prettier plugin for your code editor. This ensures consistent code formatting across your project and enhances collaboration.
I've a custom prettier config that I use for all my projects. It's available on npm as @brionmario/prettier-config.
Installation can be done using the following command:
pnpm add -D prettier @brionmario/prettier-configAdd the following npm script to run prettier. (You may skip this if the monorepo management tool or the boilerplate adds their own script.)
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,css,json,md,mdx}\""Add the following prettier.config.cjs file at the mono-repo root.
Add the following .prettierignore file at the mono-repo root.
Add the following .prettierignore file at the root of the Node.js based package.
This section provides information on how to manage versioning and releases with my preferred toolchains.
I've been loving Changesets for release and versioning recently.
Installation can be done using the following command:
pnpm add -D @changesets/cliTo initialize Changesets:
npx changeset initInstall @changesets/changelog-github plugin for GitHub flavored Changelog generation.
pnpm add -D @changesets/changelog-githubAdd the following two npm scripts.
"publish:packages": "changeset publish",
"version:packages": "changeset version && pnpm install --lockfile-only"Replace the default .changeset/config.json file with this config file and adjust the configurations accordingly removing the comments.
To ensure consistent TypeScript configuration across the repository, use the following base configuration file:
Installation can be done using the following command:
pnpm add -D typescriptFor the monorepo root, use the following tsconfig.base.json. This file simplifies configuration by setting up paths for easy navigation to the source code of your packages.
- tsconfig.base.json file
For Node.js based packages, use the following tsconfig.json files.
For React based packages, use the following tsconfig.json files.
Installation of the main rollup package can be done using the following command:
pnpm add -D rolluppnpm add -D @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript rollup-plugin-dts rollup-plugin-peer-deps-external rollup-plugin-terser @rollup/plugin-terser rollup-plugin-preserve-directivesUse the following rollup.config.js configuration for bundling Node.js based projects.
If you prefer to use JavaScript for the configuration, use the following rollup.config.js configuration.
If you prefer to use TypeScript for the configuration, use the following rollup.config.ts configuration and install the relevant types.
pnpm add -D @types/nodeImportant
Rollup throws and error when the const declarations have a type in the config file.
Hence, I've used suppressed the @typescript-eslint/typedef rule for the config file.
pnpm add -D @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript rollup-plugin-dts rollup-plugin-peer-deps-external rollup-plugin-terser @rollup/plugin-terser rollup-plugin-preserve-directivesUse the following Rollup configurations for bundling React based projects.
If you prefer to use TypeScript for the configuration, use the following rollup.config.ts configuration and install the relevant types.
pnpm add -D @types/nodeImportant
Rollup throws and error when the const declarations have a type in the config file.
Hence, I've used suppressed the @typescript-eslint/typedef rule for the config file.
Use the following configurations for Jest.
If you prefer to use TypeScript for the configuration, use the following jest.config.ts configuration and install the relevant types.
pnpm add -D ts-jest ts-node @jest/types @types/jest @types/nodeInstall jest to use Jest for unit testing.
pnpm add -D jestUse the following jest.config.js configuration for unit testing pure JavaScript projects.
Install ts-jest and @jest/types to use TypeScript in Jest configuration.
pnpm add -D ts-jest ts-node @jest/types @types/jest @types/nodeUse the following jest.config.ts configuration for unit testing pure JavaScript projects.
Use the following tsconfig.spec.json configuration for unit testing pure JavaScript projects.
Add the following npm script to run tests. (You may skip this if the monorepo management tool or the boilerplate adds their own script.)
"test": "pnpm jest --passWithNoTests"Add the following setup-test.ts file to the root directory of the package.
pnpm add -D @testing-library/react @testing-library/dom @types/react @types/react-dom jest-environment-jsdom