Getting started
Quick startβ
To create a simple PoC for a quick start, visit create micro-frontends.
Manual startβ
You will want to manually start a composable apps project when you have an existing monolith. This is the expected path.
Recommended setupβ
Turn your monolith into a monorepoβ
Skip this step if your already have a monorepo.
Create directory
apps/my-monolith
and move all your code thereKeep also a copy of your
package.json
at the rootmy-monorepo/
ββ apps/
β ββ my-monolith/
β β ββ package.json π same
ββ package.json π sameMake all the
dependencies
in the package.json inmy-monorepo/apps/my-monolith
point to version*
. We are enabling a single-version policy for the entire monorepo.Add the following field
workspaces: ["apps/*"]
in the root package.json:my-monorepo/
ββ apps/
β ββ my-monolith/
β β ββ package.json
ββ package.json π root
Create a packages
workspaceβ
Skip this step if your already have a monorepo.
Packages are used to share code between composable apps and/or the monolith.
Add "packages/*" to the following field
workspaces: ["apps/*", "packages/*"]
in the root package.json.my-monorepo/
ββ apps/
β ββ my-monolith/
β β ββ package.json
ββ package.json π hereCreate a
packages
folder at the root of your monorepo, e.g.my-monorepo/
ββ apps/
ββ packages/ π here
ββ package.jsonCreate a package inside the
packages
folder. You must include apackage.json
in your package.my-monorepo/
ββ apps/
ββ packages/
β ββ my-package/
β β ββ package.json π here
ββ package.json
Use the same scope in all the package.json
s of your monorepo, e.g. @my-org:
- apps/my-monolith/package.json
{ "name": "@my-org/my-monolith" }
- packages/new-package/package.json
{ "name": "@my-org/new-package" }
Add the lean
cliβ
Create a lean.config.js
file at the root of your monorepo:
my-monorepo/
ββ apps/
ββ packages/
ββ lean.config.js π here
ββ package.json
Add some config, for example:
const { createReactWebpackConfig } = require("@leanjs/webpack-react");
module.exports = {
devServer: { port: 43210 },
webpack: {
// replace the following config with your custom Webpack config
react: createReactWebpackConfig(),
},
};
Execute the following command at the root directory of your monorepo:
yarn add -W -D @leanjs/cli @leanjs/webpack
Create a composable-apps
workspaceβ
Add "composable-apps/*" to the following field
workspaces: ["apps/*", "packages/*", "composable-apps/*"]
in the root package.json.my-monorepo/
ββ apps/
ββ packages/
β ββ my-monolith/
β β ββ package.json
ββ package.json π hereCreate a
composable-apps
folder at the root of your monorepo, e.g.my-monorepo/
ββ apps/
ββ composable-apps/ π here
ββ packages/
ββ package.jsonCreate a composable app inside the
composable-apps
folder. You must include apackage.json
in your new composable app:my-monorepo/
ββ apps/
ββ composable-apps/
β ββ my-app/
β β ββ package.json π here
ββ packages/
ββ package.jsonCreate a composable app based on your UI library: