monorepo-boilerplate
monorepo-boilerplate copied to clipboard
emunhoz
A monorepo boilerplate built with React, Typescript, yarn workspaces, vite app, storybook, styled-components, semantic release, Conventional Commits and GitHub Actions
Monorepo frontend boilerplate
Getting started
This is a monorepo repository using yarn workspaces, Commitzen and Conventional Commits to maintain and manage component versions and for documentation, we use Storybook.
💥 Features
- ⚡️ Vite 2.0 - (React 18)
- 📖 Storybook 6
- 📦 Yarn Workspaces
- ✨ Host Multiple CRA Apps, Vite apps, Component Libraries & Storybooks in one monorepo
- 🔥 Hot Reload all Apps, Components & Storybooks
- 👨🔬 Test all workspaces with Eslint & Jest using one command
🌐 Samples
Spotifood
Code: https://github.com/emunhoz/spotifood
Find movies
Code: https://github.com/emunhoz/find-movies
🌐 Links
Storybook live demo:
- ➡️ https://monorepo-boilerplate-storybook.vercel.app/?path=/docs/
Vite App live demo:
- ➡️ https://monorepo-boilerplate-web.vercel.app/
Backend server:
- ➡️ https://monorepo-boilerplate-server.vercel.app/api/
⚠️ Requirements
- Node > v18
- NPM > v8
In order to use semantic release with github actions, you need to add a new secrets in your github repository. This is needed in order for Semantic Release to be able to publish a new release for the Github repository.
Create a token for Github. You need to give the token repo scope permissions.
Check out this file: https://github.com/emunhoz/monorepo-boilerplate/blob/main/.github/workflows/release.yml#L32
You need to change this value with you new secrets: GH_MONOREPO_TOKEN
🚀 Quick start
In the root folder run following commands (all the below commands need to run on root folder):
Install all dependecies with:
yarn
Run the front end application @monorepo-boilerplate/web and back end server application @monorepo-boilerplate/server :
yarn start
Storybook @monorepo-boilerplate/ui-components :
yarn storybook
🗂 Monorepo structure
| Package | Description |
|---|---|
@monorepo-boilerplate/design-tokens |
Design tokens (colors, typography, attributes...) |
@common/** |
Common functions, images, lints (eslint, stylelint, prettier) and other generics setup |
@monorepo-boilerplate/ui-components |
React library components with stories |
@monorepo-boilerplate/web |
Front end application create with vite app |
🚨 Code standard
- JavaScript Standard Style - Javascript styleguide
- Prettier - Code formatter
- ESLint - Lint to quickly find problems
- Stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles
⌨️ Commands
| Command | Description |
|---|---|
yarn |
Install all dependencies |
yarn start |
Run frontend/backend server |
yarn test:ci |
Run all tests |
yarn storybook |
Run storybook doc components |
yarn watch:tokens |
Hot reload design-tokens package |
yarn watch:components |
Hot reload ui-components package |
yarn build-app |
Build of front app(@monorepo-boilerplate/web) and generate a directory with all assets in the following path: packages/web/build |
yarn build-storybook |
Build of storybook with components(@monorepo-boilerplate/ui-components) and generate a directory with all assets in the following path: packages/ui-components/storybook-static |
emunhoz