Integration

One page summary of how to integrate Frontend into Backend.

Configuration

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

VITE_BASE_URL
Set this variable to / unless the backend website is served using a sub-folder. In that case, include the sub-folder with a leading and trailing / (e.g., /portal/).
VITE_INTE_ASSET_DIR
The assets folder inside the Backend project.
This folder will contain the JavaScript, CSS, icons, and other files generated by the Frontend that are needed to run the site.
VITE_INTE_PATTERN_DIR
The pattern folder.
This folder will contain the generated HTML contents output by the Frontend. It is not required to run the site, but it serves as a helpful resource for tracking changes during re-integration.

Integration

Locally, you can run following command:

bun inte

In the repository, merge the fe-develop branch into the fe-release branch. This will build the Frontend code and create a pull request into the develop branch. Once merged, the code is ready for integration.

Notes

The main difference between bun eshn and bun inte is that the former outputs the hashing value for static assets directly into the rendered HTML, while the latter outputs it to hashes.json.

Since the hash changes whenever the content of a static file changes, it is good for clearing the CDN cache. However, it is not suitable for tracking HTML changes, as the Backend team should only be concerned with actual changes in the HTML markup instead of many random-like changes in the asset paths.

Therefore:

Use bun eshn to deploy the frontend site.
Use bun inte to build the Frontend package for the Backend team.

Note: If you're using Azure DevOps, you need to provide a value for CUSTOM_REVIEWER_ID in /PreciseAlloy.Frontend/.build/integration.yml. You can obtain this value by opening the Azure DevOps repository in a browser, then running the following script in the Developer Tools console:

(() => {
  const dataProviders = document
    .getElementById('dataProviders');
  if (!dataProviders) {
    console.log('No dataProviders');
    return;
  }

  const data = JSON.parse(dataProviders.textContent)?.data;
  if (!data) {
    console.log('No data');
    return;
  }

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

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