Building the Frontend Package for Backend Integration

This page covers the frontend side of the integration handover: which environment values matter, what bun inte produces, and why the output is meant for backend integration rather than direct static-site deployment.

This guide focuses on preparing the frontend output that the backend team will later integrate. If you only need the short version, set the correct integration paths, run bun inte, and hand over the generated assets and patterns without tweaking them afterwards.

Configuration

Inside the /PreciseAlloy.Frontend/.env.production file, set the following values:

VITE_BASE_URL
Set this to / unless the backend site is served from a sub-folder. If it is, include the sub-folder with both a leading and trailing slash, for example /portal/.
VITE_INTE_ASSET_DIR
The asset folder inside the backend project.
This is where the generated JavaScript, CSS, icons, and related frontend assets will be written.
VITE_INTE_PATTERN_DIR
The pattern folder.
This is where the generated HTML snapshots are written. They are not required to run the site, but they are useful when the backend team needs to compare markup changes during reintegration.

Integration

Once those values are set, generate the integration package locally with:

bun inte

When frontend changes are pushed to or merged into the master branch, the repository builds the integration package automatically and opens a pull request with the generated output. After that pull request is merged, the backend team can start integrating the updated markup and assets.

Notes

bun eshn and bun inte are close cousins, but they are not interchangeable.

The bun eshn build writes hash values directly into the rendered HTML for static-site deployment. The bun inte build writes those hashes into hashes.json instead.

That difference matters because the backend team usually needs clean HTML snapshots to review markup changes. If hashes are baked into every rendered page, the diffs become noisy very quickly and stop being useful. The asset hashes are still important for CDN cache invalidation, but they belong in hashes.json, not sprinkled across every pattern file like confetti.

Therefore:

Use bun eshn to deploy the frontend static site.
Use bun inte to build the frontend package for backend integration.

If you are using Azure DevOps, set CUSTOM_REVIEWER_ID in /PreciseAlloy.Frontend/.build/integration.yml. You can find the value by opening the Azure DevOps repository in a browser and running this script in the Developer Tools console:

(() => {
  const data = window.dataProviders?.data;
  if (!data) {
    console.log('No data');
    return;
  }

  const teamContext = data['ms.vss-tfs-web.team-context-data-provider'];
  if (teamContext) {
    console.log('CUSTOM_REVIEWER_ID:', teamContext.id);
    return;
  }

  const project = data['ms.vss-tfs-web.page-data']?.project;
  if (!project) {
    console.log('No project');
    return;
  }

  const projectImageUrl = project.imageUrl;
  if (!projectImageUrl) {
    console.log('No project image url');
    return;
  }

  const id = projectImageUrl.replace(/^.*MemberAvatars\/([a-z0-9_-]+).*$/gi, '$1');
  console.log('CUSTOM_REVIEWER_ID:', id);
})();