@madgex/fert 6.3.3 → 7.0.1

package/bin/cli.js

@@ -29,6 +29,7 @@ const run = () => {
     .command('build', 'Build project. Can supply a branding directory if running FERT standalone')
     .option('--only <task>', `Only run part of the build [ 'assets', 'tokens']`)
     .option('--config [dir]', 'Use custom rollup config file')
+    .option('--target <env>', 'Environment to build for, "dev" or "production"')
     .option('--service-name <serviceName>', '[string] run a single service')
     .action((...args) => serviceCommandBootstrap('build', ...args));
 

package/bin/commands/build-tasks/build-templates.js

@@ -0,0 +1,40 @@
+// eslint-disable-next-line n/no-unsupported-features/node-builtins
+import { glob } from 'node:fs/promises';
+import path from 'path';
+import fs from 'fs';
+import { log } from '../../utils/logging.js';
+import chalk from 'chalk';
+
+export async function buildTemplates(fertConfig, assetsPath) {
+  const { rootDir, serviceName } = fertConfig;
+  const templateFiles = await Array.fromAsync(
+    glob(`**/${serviceName}/dist/templates/**/*.njk`, {
+      cwd: path.resolve(rootDir),
+    }),
+  );
+
+  let processedCount = 0;
+
+  for (const filePath of templateFiles) {
+    try {
+      const originalContent = fs.readFileSync(filePath, 'utf8');
+      // Update paths from `./public`, `/public` or `public` to the `assetsPath`
+      // We use positive lookbehind and lookahead to ensure we only match those paths
+      // They are preceded by `"`,`'` or `(` and followed by `/` to ensure we're targetting something that looks like a url
+      // e.g src="./public/..." or url(/public/...)
+      // We also optionally match a leading `./` or `/` to cover all cases
+      const updatedContent = originalContent.replaceAll(/(?<=["'(])\.?\/?public(?=\/)/gm, `${assetsPath}`);
+      if (originalContent !== updatedContent) {
+        fs.writeFileSync(filePath, updatedContent, 'utf8');
+        processedCount++;
+      }
+    } catch (err) {
+      log.error(err);
+      throw err;
+    }
+  }
+
+  log.success(
+    `${chalk.cyan(`[${fertConfig.serviceName}]`)} updated asset paths in ${processedCount} of ${templateFiles.length} template${templateFiles.length === 1 ? '' : 's'}`,
+  );
+}

package/bin/commands/build-tasks/bundle-entry.js

@@ -4,6 +4,9 @@ import merge from 'lodash/merge.js';
 import * as vite from 'vite';
 import { buildExternalAssets } from './build-external-assets.js';
 import { log } from '../../utils/logging.js';
+import { getAssetsPath } from '../../utils/get-assets-path.js';
+import { buildTemplates } from './build-templates.js';
+import { createAbsoluteManifest } from './create-absolute-manifest.js';
 
 export async function bundleEntry(fertConfig, options = {}) {
   let dynamicOptions = {};
@@ -17,9 +20,11 @@ export async function bundleEntry(fertConfig, options = {}) {
     viteConfig = viteConfigPkg.default;
   }
 
+  const assetsPath = await getAssetsPath(fertConfig, options.target);
+
   dynamicOptions = {
     root: path.resolve(fertConfig.workingDir),
-    base: `/_/${fertConfig.serviceName}/assets/`,
+    base: assetsPath.href,
     build: {
       cssCodeSplit: false, // important: to get a single, style.css file output
       outDir: path.resolve(fertConfig.workingDir, 'dist'),
@@ -33,6 +38,10 @@ export async function bundleEntry(fertConfig, options = {}) {
 
   await vite.build(viteConfig);
 
+  createAbsoluteManifest(fertConfig.workingDir, assetsPath.href);
+
+  await buildTemplates(fertConfig, assetsPath.href);
+
   await buildExternalAssets(fertConfig);
 
   log.success('Assets built.');

package/bin/commands/build-tasks/create-absolute-manifest.js

@@ -0,0 +1,34 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { log } from '../../utils/logging.js';
+
+/**
+ * Writes a new file based on Vite's `manifest.json`, but re-write the file paths to be absolute URLs pointing using `assetsPath`.
+ *
+ * @param {string} workingDir
+ * @param {string} assetsPath absolute URL to prefix all file paths in manifest
+ */
+export function createAbsoluteManifest(workingDir, assetsPath) {
+  const distDir = path.resolve(workingDir, './dist/');
+
+  if (!fs.existsSync(path.resolve(distDir, 'manifest.json'))) return;
+
+  const originalManifest = JSON.parse(fs.readFileSync(path.resolve(distDir, 'manifest.json'), 'utf8'));
+
+  for (const key in originalManifest) {
+    const entry = originalManifest[key];
+
+    // Update asset path to use asset-relay url
+    if (entry.file) {
+      entry.file = `${assetsPath}/${entry.file}`;
+    }
+  }
+
+  fs.writeFileSync(
+    path.resolve(distDir, 'manifest.absolute-urls.json'),
+    JSON.stringify(originalManifest, null, 2),
+    'utf8',
+  );
+
+  log.success('manifest.absolute-urls.json created');
+}

package/bin/commands/build.js

@@ -11,6 +11,12 @@ export { bundleEntry, buildExternalAssets };
 
 export async function build(options = {}) {
   const fertConfig = await resolveConfig(options);
+  const validTargets = ['dev', 'production'];
+
+  if (!validTargets.includes(options.target)) {
+    throw Error(`Missing or invalid --target option. Choose from [${validTargets}]`);
+  }
+
   await validateLocalConfigs({
     workingDir: fertConfig.rootDir,
     clientPropertyId: fertConfig.clientPropertyId,

package/bin/commands/publish.js

@@ -6,13 +6,13 @@ import { log } from '../utils/logging.js';
 import { getAwsParam } from './publish-tasks/get-aws-parameter.js';
 import { AssetStoreUploader } from './publish-tasks/asset-store-uploader.js';
 import { getCloudFrontDistributionsForDomain } from '../utils/lookup-cf-distribution-ids.js';
+import { getAssetsPath } from '../utils/get-assets-path.js';
 import {
   ASSET_STORE_API,
   AWS_PARAM_NAME,
   REMOTE_UPLOAD_BASE,
   UPLOAD_DIR,
   ASSET_STORE_INVALIDATION_PATH,
-  BRANDED_SITE_INVALIDATION_PATH,
 } from '../../constants.js';
 
 export async function publish(options) {
@@ -34,22 +34,19 @@ export async function publish(options) {
   }
 
   const templateCtx = {
-    env: options.target === 'dev' ? 'jb.dev' : 'job',
-    Environment_Name: options.target,
+    env: options.target,
     fertConfig,
   };
 
   const localDir = path.resolve(fertConfig.workingDir, UPLOAD_DIR);
-  const apiUrl = Hoek.reachTemplate(templateCtx, ASSET_STORE_API);
   const remoteBasePath = Hoek.reachTemplate(templateCtx, REMOTE_UPLOAD_BASE);
   const apiKeyParamPath = Hoek.reachTemplate(templateCtx, AWS_PARAM_NAME);
   const assetStoreInvPath = Hoek.reachTemplate(templateCtx, ASSET_STORE_INVALIDATION_PATH);
-  const brandedSiteInvPath = Hoek.reachTemplate(templateCtx, BRANDED_SITE_INVALIDATION_PATH);
 
   const apiKey = await getAwsParam(apiKeyParamPath);
 
-  const siteUrl = new URL(fertConfig.config.JobseekerSiteWebSitePath);
-  const clientCloudFrontDists = await getCloudFrontDistributionsForDomain(siteUrl.hostname, options);
+  const assetsPath = await getAssetsPath(fertConfig, options.target);
+  const clientCloudFrontDists = await getCloudFrontDistributionsForDomain(assetsPath.hostname, options);
 
   log.info(
     `\nPublishing ${chalk.cyan(localDir)} to ${chalk.green.bold(
@@ -60,7 +57,7 @@ export async function publish(options) {
   try {
     // send to S3 using the Asset Store API
     const assetStore = new AssetStoreUploader({
-      apiUrl,
+      apiUrl: ASSET_STORE_API,
       apiKey,
       basePath: remoteBasePath,
     });
@@ -76,7 +73,7 @@ export async function publish(options) {
     await assetStore.invalidatePaths([assetStoreInvPath]);
 
     for (let dist of clientCloudFrontDists) {
-      await assetStore.invalidatePaths([brandedSiteInvPath], dist.id);
+      await assetStore.invalidatePaths([`${assetsPath.pathname}/*`], dist.id);
     }
 
     log.info(`\nNote cloudfront invalidations may take upto ${chalk.yellow('30 seconds')} to complete.\n`);

package/bin/utils/get-assets-path.js

@@ -0,0 +1,44 @@
+import { ASSET_RELAY_API } from '../../constants.js';
+
+/**
+ * fetch the Absolute URL `publicUrl` from asset-relay API, for current client & service
+ *
+ * @param {object} fertConfig
+ * @param {object} environment
+ * @returns {URL} Absoloute Public URL for assets
+ */
+export async function getAssetsPath(fertConfig, environment) {
+  const { clientPropertyId, serviceName, client, config } = fertConfig;
+
+  // Try to get existing mapping
+  const getUrl = new URL(ASSET_RELAY_API);
+  getUrl.searchParams.set('clientPropertyId', clientPropertyId);
+  getUrl.searchParams.set('serviceName', serviceName);
+
+  let response = await fetch(getUrl);
+
+  // Create mapping if it doesn't exist
+  if (!response.ok) {
+    response = await fetch(ASSET_RELAY_API, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        clientPropertyId,
+        rootClientPropertyId: client.rootClientPropertyId,
+        serviceName,
+        siteName: config.SiteName,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to create asset path mapping: ${response.status}`);
+    }
+  }
+
+  const data = await response.json();
+  const { publicUrl } = Array.isArray(data) ? data[0] : data;
+
+  // TODO: temporarily removing environment for production until all repos are on new version
+  // return new URL(`${publicUrl}/${environment}`);
+  return new URL(`${publicUrl}${environment === 'dev' ? '/dev' : ''}`);
+}

package/bin/utils/index.js

@@ -89,10 +89,7 @@ export async function resolveConfig(options = {}) {
 
   fertConfig.externalAssets = resolveExternalAssets(fertConfig.externalAssets);
 
-  fertConfig.config = await getConfig(fertConfig.clientPropertyId, [
-    'JobseekerSiteWebSitePath',
-    // 'SiteName',
-  ]);
+  fertConfig.config = await getConfig(fertConfig.clientPropertyId, ['JobseekerSiteWebSitePath', 'SiteName']);
 
   return {
     ...fertConfig,

package/constants.js

@@ -24,7 +24,7 @@ export const ASSETS_API_URL = 'https://asset-store.job.madgexhosting.net';
 export const BRAND_JSON_FILENAME = 'brand.json';
 export const FERT_CONFIG_FILENAME = 'fert.config.js';
 export const FERT_SERVICE_CONFIG_FILENAME = 'fert.service.config.js';
-export const ASSET_STORE_API = 'https://asset-store-api.{env}.madgexhosting.net/';
+export const ASSET_STORE_API = 'https://asset-store-api.job.madgexhosting.net/';
 export const UPLOAD_DIR = 'dist';
 /**
  * use `jobseekers-frontend` AWS keys for asset-store access, even for all services (e.g. recruiterservices-frontend).
@@ -32,24 +32,17 @@ export const UPLOAD_DIR = 'dist';
  * Possibly one to refactor in the future.
  * */
 export const AWS_PARAM_NAME =
-  '/{Environment_Name}/jobboard/kong/internal/consumer-key/jobseekers-frontend_{fertConfig.client.rootClientPropertyId}';
+  '/production/jobboard/kong/internal/consumer-key/jobseekers-frontend_{fertConfig.client.rootClientPropertyId}';
 /**
  * important to have the correct service name and cpid so assets are uploaded to the correct unique place per-service.
  */
-export const REMOTE_UPLOAD_BASE = '/api/assets/{fertConfig.serviceName}/{fertConfig.clientPropertyId}';
+export const REMOTE_UPLOAD_BASE = '/api/assets/{fertConfig.serviceName}/{fertConfig.clientPropertyId}/{env}';
 /**
  * invalidates the real asset store key path, which is related to `REMOTE_UPLOAD_BASE`
  * asset-store puts things in `rootClientPropertyId` based on the AWS_PARAM_NAME used, and the rest of the path relates to `REMOTE_UPLOAD_BASE`
  */
-export const ASSET_STORE_INVALIDATION_PATH = `/{fertConfig.client.rootClientPropertyId}/{fertConfig.serviceName}/{fertConfig.clientPropertyId}/*`;
-/**
- * cloud backend cache busting for updated assets.
- * assumption that assets are accessed on each service via a similar root.
- * e.g.
- * www.bigworkbag.com/_/jobseekers-frontend/assets/my-asset.png
- * recruiter.bigworkbag.com/_/recruiterservices-frontend/assets/my-asset.png
- */
-export const BRANDED_SITE_INVALIDATION_PATH = `/_/{fertConfig.serviceName}/assets/*`;
+export const ASSET_STORE_INVALIDATION_PATH = `/{fertConfig.client.rootClientPropertyId}/{fertConfig.serviceName}/{fertConfig.clientPropertyId}/{env}/*`;
+
 export const ASSET_STORE_USER_GUID = 'a386d4b6-f2df-4b80-ad1f-0349e23f530b';
 
 export const CONFIG_API =
@@ -94,3 +87,5 @@ export const MOCK_AUTH_OBJECT = {
     },
   },
 };
+
+export const ASSET_RELAY_API = 'https://asset-relay.job.madgexhosting.net/api/v1/clients';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/fert",
-  "version": "6.3.3",
+  "version": "7.0.1",
   "description": "Tool to help build the V6 branding",
   "bin": {
     "fert": "./bin/cli.js"
@@ -31,8 +31,8 @@
     "@hapi/inert": "^7.1.0",
     "@hapi/vision": "^7.0.3",
     "@hapipal/toys": "^4.0.0",
-    "@madgex/design-system": "^10.1.2",
     "@madgex/config-api-sdk": "^1.11.0",
+    "@madgex/design-system": "^10.1.2",
     "@private/header-footer-podlet-server": "github:wiley/madgex-header-footer-podlet",
     "axios": "^1.11.0",
     "cac": "^6.7.14",

package/shared/Dockerfile.brandingRepoPublish

@@ -5,6 +5,7 @@ ENV HOME=/app/
 ARG NPM_TOKEN
 ARG GIT_USERNAME
 ARG GIT_PASSWORD
+ARG ENVIRONMENT
 
 RUN apk add git
 
@@ -25,4 +26,4 @@ RUN echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc && \
   npm install && \
   rm -f .npmrc
 
-RUN npm run build
+RUN npm run build --target=${ENVIRONMENT}

package/tests/fixtures/manifest.absolute-urls.json

@@ -0,0 +1,34 @@
+{
+  "public/fonts/mdgx-icons.eot": {
+    "file": "https://asset-relay.madgexjb.com/big-work-bag-6tORXNlh/assets/mdgx-icons-nszT880f.eot",
+    "src": "public/fonts/mdgx-icons.eot"
+  },
+  "public/fonts/mdgx-icons.svg": {
+    "file": "https://asset-relay.madgexjb.com/big-work-bag-6tORXNlh/assets/mdgx-icons-CLXOai0m.svg",
+    "src": "public/fonts/mdgx-icons.svg"
+  },
+  "public/fonts/mdgx-icons.ttf": {
+    "file": "https://asset-relay.madgexjb.com/big-work-bag-6tORXNlh/assets/mdgx-icons-dLFZ0BjQ.ttf",
+    "src": "public/fonts/mdgx-icons.ttf"
+  },
+  "public/fonts/mdgx-icons.woff": {
+    "file": "https://asset-relay.madgexjb.com/big-work-bag-6tORXNlh/assets/mdgx-icons-CmuOtNp9.woff",
+    "src": "public/fonts/mdgx-icons.woff"
+  },
+  "src/index.js": {
+    "file": "https://asset-relay.madgexjb.com/big-work-bag-6tORXNlh/assets/index-PBIhszZ7.js",
+    "name": "index",
+    "src": "src/index.js",
+    "isEntry": true,
+    "assets": [
+      "assets/mdgx-icons-nszT880f.eot",
+      "assets/mdgx-icons-CmuOtNp9.woff",
+      "assets/mdgx-icons-dLFZ0BjQ.ttf",
+      "assets/mdgx-icons-CLXOai0m.svg"
+    ]
+  },
+  "style.css": {
+    "file": "https://asset-relay.madgexjb.com/big-work-bag-6tORXNlh/assets/style-BzoEQQhI.css",
+    "src": "style.css"
+  }
+}

package/tests/fixtures/manifest.json

@@ -0,0 +1,34 @@
+{
+  "public/fonts/mdgx-icons.eot": {
+    "file": "assets/mdgx-icons-nszT880f.eot",
+    "src": "public/fonts/mdgx-icons.eot"
+  },
+  "public/fonts/mdgx-icons.svg": {
+    "file": "assets/mdgx-icons-CLXOai0m.svg",
+    "src": "public/fonts/mdgx-icons.svg"
+  },
+  "public/fonts/mdgx-icons.ttf": {
+    "file": "assets/mdgx-icons-dLFZ0BjQ.ttf",
+    "src": "public/fonts/mdgx-icons.ttf"
+  },
+  "public/fonts/mdgx-icons.woff": {
+    "file": "assets/mdgx-icons-CmuOtNp9.woff",
+    "src": "public/fonts/mdgx-icons.woff"
+  },
+  "src/index.js": {
+    "file": "assets/index-PBIhszZ7.js",
+    "name": "index",
+    "src": "src/index.js",
+    "isEntry": true,
+    "assets": [
+      "assets/mdgx-icons-nszT880f.eot",
+      "assets/mdgx-icons-CmuOtNp9.woff",
+      "assets/mdgx-icons-dLFZ0BjQ.ttf",
+      "assets/mdgx-icons-CLXOai0m.svg"
+    ]
+  },
+  "style.css": {
+    "file": "assets/style-BzoEQQhI.css",
+    "src": "style.css"
+  }
+}