Example build orchestration using multiple nx 14 repos, docker, and netlify.
haightfillmore/
├─ apps/
│ ├─ cart/ * mysite.com/cart
│ ├─ catalog/ * mysite.com/catalog
│ ├─ shell/
somamission/
├─ apps/
│ ├─ about/ * mysite.com/about
│ ├─ shell/ * mysite.com/
Dockerfile
cd somamission
nx build about --configuration=production
cd dist/apps/about/
open .
open https://app.netlify.com/drop
# drag and drop files
# store "Site ID" from: https://app.netlify.com/sites/my-deployed-site/settings/generalCreate volumes for quicker builds
docker volume create mfe-npm-cache
docker volume create mfe-yarn-cache
Modify orchestration environment variables
touch .env.local
# copy contents of sample-env.local .env.local to and modify values
docker build --tag nx-builder .
docker run --env-file .env.local -v mfe-npm-cache:/tmp/npm-cache -v mfe-yarn-cache:/tmp/yarn-cache --rm nx-builder(Optional) Deploying other apps
- Manually upload Nx output to Netlify
- Update
.env.local
# ie:
# modify .env.local to deploy another monorepo app, ie: catalog
# DEPLOY_APP=haightfillmore
# DEPLOY_ROUTE=catalog
# CATALOG_SITE_ID=my-site-id- Deploy using docker
// somamission/apps/shell/webpack.prod.config.js
remotes: [
[
'about',
'https//my-netlify-site.netlify.app/remoteEntry.mjs',
],
// [
// 'catalog',
// 'https://my-netlify-site.netlify.app/remoteEntry.mjs',
// ],
], RouterModule.forRoot(
[
{
path: 'about',
loadChildren: () =>
import('about/Module').then((m) => m.RemoteEntryModule),
},
// {
// path: 'catalog',
// loadChildren: () =>
// import('catalog/Module').then((m) => m.RemoteEntryModule),
// },
],cd somamission
nx serve shell --configuration=production --open
# or deploy
nx deploy shell
nx build shell --configuration=production
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent