Monorepo in Typescript, using npm workspaces
libs
are meant to be published to npm and installed, apps
are meant to be executed.
Apps | Description |
---|---|
web-notification-SaaS-dashboard | UI to showcase Web Notification SaaS. Web Notification SaaS allows you to easily send web push notifications to users with just a single API call. |
react-ts-webpack-starter | React starter template with manually configured webpack, without Create React App |
Libraries | Description |
---|---|
web-notification | Service worker functions for web push notification |
- Execute commands specific to a workspace with the
--workspace
flag option, see here
npm --workspace=@eugbyte-monorepo/webnotify-dashboard run test
- npm workspace is only available from npm -v > @16. Enforce the version via the
engine
field ofpackage.json
- Refer to this guide for resolving path resolutions outside a workspace root directory.
- For CRA, need to configure babel loader to recognise such paths
- Remember to do
npm i
to symlink the workspaces each time you create a new workspace. - In order for the monorepo linting to work, need to have a
.eslintrc.js
file in each workspace, thatextends
the base.eslintrc.js
.
module.exports = {
extends: ["../../.eslintrc.js"],
ignorePatterns: [
"service-worker.js"
]
};
- To share the tailwind theme config, load the
presets
with the base config like so
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}", // for tailwind to work in the workspace
"../../libs/components/**/*.{jsx,tsx}" // for tailwind to work for directories outside the workspace root dir
],
presets: [require("../../tailwind.base.config.js")] // inherit the base tailwind config
}
- For the respective repo CI to run only when the corresponding repo's files change, use Github's Action
paths field
to configure a workflow to run based on what file paths are changed