Frontend Monorepo Boilerplate

Frontend Monorepo Boilerplate is an open-source, 100% TypeScript boilerplate that scaffolds a Turborepo-based monorepo containing Vite and Next.js v14 apps, three interchangeable styling packages (vanilla CSS, Tailwind v3, Material UI v5), and preconfigured build, test, lint, and deployment tooling.

What is Frontend Monorepo Boilerplate?

This GitHub repository by mkosir provides a frontend-only monorepo template organized into apps and packages workspaces. It takes a new project's source code and produces a fully wired monorepo with build outputs in build and dist folders, Storybook builds, and automated CI/CD pipelines. It runs on Node.js v20+ and uses Turborepo as the build orchestrator, with Netlify for deploying apps, websites, and storybooks to prod and stage environments. The template is designed to be extended: it implements two workspaces, apps and packages, where configuration packages live in packages and are prefixed with config-.

Key Features

• Turborepo v1 — Uses Turborepo's remote caching for fast execution of build, lint, and test commands across all apps and packages; local cache can be removed with npm run remove-turbo-cache.
• TypeScript v5 with strict ESLint — The 100% TypeScript codebase applies typescript-eslint strict-type-checked and stylistic-type-checked configurations, along with Prettier for formatting.
• Vite and Next.js v14 apps — The monorepo includes both a Vite app and a Next.js v14 app, both available under the apps workspace and deployed to Netlify at prod and stage URLs.
• Three styling solutions — Shared UI packages implement vanilla CSS, Tailwind v3, and Material UI v5; each is importable into any app, so you can pick one and remove the others.
• Jest and React Testing Library — Unit and integration tests are preconfigured, and any single test can be run instantly via the VS Code Jest runner workflow.
• Git hooks and conventional commits — Husky and lint-staged run Prettier and ESLint on staged files, while Commitizen guides commit messages to conventional commits format; semantic-release automates versioning on merge or release.
• Storybook — Storybook is set up for all apps and packages with build and start scripts, and storybook deployments are hosted on Netlify.
• Automated deployment — Merging to main deploys to stage, and creating a new GitHub release deploys to production; CI is handled by GitHub Actions.

Who is it for?

• Frontend teams launching a new product or website that want a working monorepo with multiple apps, shared UI packages, and CI/CD from day one.
• TypeScript developers who want strict type checking, ESLint rules, and a style guide enforced across the codebase.
• Design system maintainers who need to develop and document UI components with Storybook and share them across apps via packages.
• Startups and agencies deploying to Netlify who want stage and prod environments for apps and websites wired to branches and releases.

What can you do with Frontend Monorepo Boilerplate?

• Scaffold a full project — Run npm i, npm run build, and npm run dev to start all apps locally; the apps are served at localhost:3100.
• Compare styling approaches — Use the three included UI packages (vanilla CSS, Tailwind, MUI) side by side in the same monorepo, then remove the ones you do not need.
• Automate releases — Configure semantic-release and GitHub Actions so merging to main deploys to stage and creating a GitHub release deploys to production.
• Build a component library — Develop UI components in packages/ui, packages/ui-tailwind, or packages/ui-mui and document them with Storybook across all apps and packages.

How does the monorepo work?

The monorepo uses Turborepo to run scripts across all apps and packages from a single command. After installing dependencies with npm i, run npm run build to compile everything, then npm run dev to start all apps in parallel. The workspace is organized into apps and packages: configuration packages (prefixed config-) are consumed directly from source without transpiling, while all other packages are built to a dist folder. Git hooks set up by Husky on npm install enforce linting and conventional commit messages before each commit.

Pros and cons

Pros:

• Single command setup: npm i, npm run build, npm run dev starts everything.
• Fast pipelines via Turborepo remote caching and parallel execution.
• Preconfigured tooling: ESLint, Prettier, Jest, Husky, Commitizen, semantic-release, Storybook.
• Explicit deployment rules: main branch deploys to stage, GitHub releases deploy to production.

Cons:

• Requires Node v20 or newer.
• Opinionated conventions: the README states the monorepo is opinionated, so teams must follow the TypeScript Style Guide principles (immutability, named exports, feature-based organization) or adjust them.

FAQ

Does the boilerplate work with Node 20 and npm?

Yes, Node v20+ is the only requirement; the setup uses npm for installs and scripts.

What styling libraries are included?

The monorepo ships three UI packages: a vanilla CSS package, a Tailwind v3 components library, and a Material UI v5 library. They share a common theme and can be imported into any app.

Does this monorepo include Storybook?

Yes, Storybook is set up for all apps and packages. You can start it with npm run storybook and build all storybooks with npm run storybook-build; storybook deployments are hosted on Netlify for the app and website workspaces.

What happens when I merge to main?

Merging to the main branch deploys to the stage environment, while creating a new GitHub release deploys to production, per the monorepo's deployment conventions.