chore: Tenanted ready mfe builds (#219)

* wip: Tenanted lazy modules

* wip: Tenanted lazy modules

.changeset/plenty-parents-visit.md

@@ -0,0 +1,6 @@
+---
+'gdu': patch
+'@autoguru/utilities': patch
+---
+
+GDU: Added support for building for a tenant

packages/gdu/commands/build/buildSPA.ts

@@ -5,12 +5,12 @@ import { GuruConfig } from '../../lib/config';
 import { run } from '../../lib/runWebpack';
 import { getHooks } from '../../utils/hooks';
 
-export const buildSPA = async (guruConfig: GuruConfig) => {
+export const buildSPA = async (guruConfig: GuruConfig, tenant: string) => {
 	const hooks = getHooks();
 
 	// eslint-disable-next-line unicorn/prefer-prototype-methods
 	const webpackConfigs: Configuration[] = hooks.webpackConfig.call(
-		makeWebpackConfig(void 0, false),
+		makeWebpackConfig(void 0, false, tenant),
 	);
 
 	const compiler = webpack(webpackConfigs);

packages/gdu/commands/build/index.ts

@@ -9,19 +9,19 @@ import { buildSPA } from './buildSPA';
 import { buildSSR } from './buildSSR';
 import { buildWebComponents } from './buildWebComponents';
 
-export default async () => {
+export default async ({ tenant }) => {
 	setEnvProd(true);
 
 	const guruConfig = getGuruConfig();
 
-	banner('Building');
+	banner(tenant ? `Building for tenant: ${tenant}` : 'Building untenanted');
 
 	await buildSupportedBrowsers();
 
 	let stats;
 	switch (guruConfig?.type) {
 		case 'spa':
-			stats = await buildSPA(guruConfig);
+			stats = await buildSPA(guruConfig, tenant);
 			break;
 		case 'ssr':
 			stats = await buildSSR(guruConfig);

packages/gdu/commands/index.ts

@@ -68,6 +68,7 @@ export default (app: Sade) => {
 	// === BUILD
 	app.command('build')
 		.describe('Builds the target app ready for production')
+		.option('-t, --tenant', 'Tenant to build the mfe for', '')
 		.action(deferredAction(async () => import('./build'), IS_NOT_ROOT));
 
 	// === FORMAT

packages/gdu/config/index.ts

@@ -1,2 +1 @@
-export {Manifest} from "./webpack/plugins/GuruBuildManifest";
-
+export { Manifest } from './webpack/plugins/GuruBuildManifest';

packages/gdu/config/webpack/index.ts

@@ -4,11 +4,15 @@ import { getBuildEnvs } from '../../utils/configs';
 
 import { baseOptions, makeWebpackConfig } from './webpack.config';
 
-const buildConfigs = (env = process.env.APP_ENV, isDebug): Configuration[] => {
+const buildConfigs = (
+	env = process.env.APP_ENV,
+	isDebug: boolean,
+	tenant?: string,
+): Configuration[] => {
 	const buildEnvs = getBuildEnvs(env);
 	return buildEnvs.map((buildEnv) => ({
 		...baseOptions(buildEnv, buildEnvs.length > 1, isDebug),
-		...makeWebpackConfig(buildEnv, buildEnvs.length > 1),
+		...makeWebpackConfig(buildEnv, buildEnvs.length > 1, tenant),
 	}));
 };
 

packages/gdu/config/webpack/webpack.config.ts

@@ -388,29 +388,67 @@ export const baseOptions = (
 	};
 };
 
-const { outputPath } = getGuruConfig();
-
 type BuildEnv = ReturnType<typeof getBuildEnvs>[number];
+
+const getPublicPath = ({
+	buildEnv,
+	isTenanted,
+	tenant,
+	isDev,
+	projectFolderName,
+}: {
+	buildEnv: BuildEnv;
+	isTenanted: boolean;
+	tenant?: string;
+	isDev: boolean;
+	projectFolderName: string;
+}): string => {
+	if (isDev) return '/';
+
+	if (buildEnv === 'prod') {
+		if (isTenanted) {
+			const prodTenant = tenant || '#{AutoGuru.Tenant}';
+			const prodAppPath = isTenanted
+				? `${prodTenant}/${projectFolderName}`
+				: `${projectFolderName}`;
+			return `#{PUBLIC_PATH_BASE}/${prodAppPath}/`;
+		} else {
+			return `#{PUBLIC_PATH_BASE}/${projectFolderName}/`;
+		}
+	}
+
+	const folderPath = tenant
+		? `${tenant}/${projectFolderName}`
+		: `${projectFolderName}`;
+
+	return `https://static-mfe-${buildEnv}.autoguru.io/${folderPath}/`;
+};
 export const makeWebpackConfig = (
 	buildEnv: BuildEnv,
 	isMultiEnv: boolean,
-): Configuration => ({
-	name: buildEnv,
+	tenant?: string,
+): Configuration => {
+	const { outputPath, isTenanted } = getGuruConfig();
+	return {
+		name: buildEnv,
 
-	output: {
-		path: `${outputPath}/${
-			!isMultiEnv && buildEnv === 'prod' ? '' : buildEnv
-		}`,
-		publicPath: isDev
-			? '/'
-			: buildEnv === 'prod'
-			? `#{PUBLIC_PATH_BASE}/${getProjectFolderName()}/`
-			: `https://static-mfe-${buildEnv}.autoguru.io/${getProjectFolderName()}/`,
-		filename: `${fileMask}.js`,
-		chunkFilename: `chunks/${fileMask}.js`,
-		hashFunction: 'sha256',
-		crossOriginLoading: 'anonymous',
-		sourceMapFilename: 'sourceMaps/[file].map',
-		pathinfo: false,
-	},
-});
+		output: {
+			path: `${outputPath}/${
+				!isMultiEnv && buildEnv === 'prod' ? '' : buildEnv
+			}`,
+			publicPath: getPublicPath({
+				buildEnv,
+				tenant,
+				isDev,
+				projectFolderName: getProjectFolderName(),
+				isTenanted,
+			}),
+			filename: `${fileMask}.js`,
+			chunkFilename: `chunks/${fileMask}.js`,
+			hashFunction: 'sha256',
+			crossOriginLoading: 'anonymous',
+			sourceMapFilename: 'sourceMaps/[file].map',
+			pathinfo: false,
+		},
+	};
+};

packages/gdu/lib/config.ts

@@ -20,6 +20,7 @@ export interface GuruConfig {
 	mountDOMClass?: string;
 	octopusPackageId: string;
 	octopusProjectName: string;
+	isTenanted?: boolean;
 	isRoot?: boolean;
 	port?: number;
 	basePath?: string;

packages/gdu/lib/mfe.ts

@@ -13,20 +13,24 @@ interface Props {
 	 * The name of the MFE
 	 */
 	projectName: string;
-
 }
 
 export const getMfeMountPoint = ({
-									 mountDomId,
-									 mountDomClass,
-									 projectName,
-								 }: Props): HTMLElement | null => {
-	invariant(mountDomId || mountDomClass, 'You must provide a mountDomId or mountDomClass');
+	mountDomId,
+	mountDomClass,
+	projectName,
+}: Props): HTMLElement | null => {
+	invariant(
+		mountDomId || mountDomClass,
+		'You must provide a mountDomId or mountDomClass',
+	);
 	let point: HTMLElement | null = null;
 	if (typeof mountDomId === 'string') {
 		point = document.querySelector('#' + mountDomId);
 	} else if (typeof mountDomClass === 'string') {
-		const elements = Array.from(document.querySelectorAll('.' + mountDomClass));
+		const elements = Array.from(
+			document.querySelectorAll('.' + mountDomClass),
+		);
 		for (const element of elements) {
 			if (element.childNodes.length === 0) {
 				point = element as HTMLElement;

packages/utilities/package.json

@@ -1,32 +1,32 @@
 {
-  "name": "@autoguru/utilities",
-  "version": "1.1.1",
-  "description": "A collection of smallish things that help AutoGuru write code.",
-  "homepage": "https://github.com/autoguru-au/octane/tree/master/packages/utilities#readme",
-  "repository": "https://github.com/autoguru-au/octane/tree/master/packages/utilities",
-  "license": "MIT",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/utilities.esm.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "tsdx build",
-    "prepublish": "yarn run build"
-  },
-  "dependencies": {
-    "tiny-invariant": "^1.0.6",
-    "tiny-warning": "^1.0.3"
-  },
-  "devDependencies": {
-    "@autoguru/eslint-plugin": "*",
-    "@autoguru/jest-preset": "*",
-    "tsdx": "^0.14.1",
-    "typescript": "^4.4.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "@autoguru/utilities",
+	"version": "1.1.1",
+	"description": "A collection of smallish things that help AutoGuru write code.",
+	"homepage": "https://github.com/autoguru-au/octane/tree/master/packages/utilities#readme",
+	"repository": "https://github.com/autoguru-au/octane/tree/master/packages/utilities",
+	"license": "MIT",
+	"files": [
+		"dist"
+	],
+	"sideEffects": false,
+	"main": "./dist/index.js",
+	"module": "./dist/utilities.esm.js",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"build": "tsdx build",
+		"prepublish": "yarn run build"
+	},
+	"dependencies": {
+		"tiny-invariant": "^1.0.6",
+		"tiny-warning": "^1.0.3"
+	},
+	"devDependencies": {
+		"@autoguru/eslint-plugin": "*",
+		"@autoguru/jest-preset": "*",
+		"tsdx": "^0.14.1",
+		"typescript": "^4.4.3"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
 }