-
Notifications
You must be signed in to change notification settings - Fork 0
Deployment Guide
This page covers different ways to host and distribute the tool, from simply sharing the HTML file to hosting it on a web server. It also covers customisation options for environments with specific requirements.
The simplest deployment is to save the HTML file to a shared location and tell your team where to find it.
Suitable shared locations include:
- A shared network drive accessible to all engineers on the team
- A SharePoint document library
- A Teams channel file tab
- A project folder in a cloud storage service (OneDrive, Dropbox, Google Drive)
Each engineer opens their own copy of the file in their browser. Because data is stored in each person's browser local storage, each engineer maintains their own state.
To share progress between engineers, use the JSON export and import workflow described in the Task Tracking page.
This option requires no server, no configuration, and no technical setup.
Storing the HTML file in a git repository (such as this GitHub repository) provides several benefits:
- A permanent, versioned record of the tool file itself
- A natural mechanism for distributing updates — engineers pull the latest version of the file
- A place to store JSON config exports alongside the tool, creating a versioned history of compliance progress
To use this approach:
- Clone or download the repository
- Open the HTML file in your browser
- Work through tasks and export JSON configs regularly
- Commit JSON exports to the repository with meaningful commit messages (for example, "Monthly compliance snapshot - March 2026 - NIST CSF 2.0 complete")
This approach is particularly effective for teams where compliance progress needs to be tracked and audited over time. The git history becomes a documented record of when controls were completed.
If you want the tool to be accessible via a URL without engineers needing to download a file, you can host it on a web server. Because the tool is a single HTML file with no server-side components, almost any hosting option works.
Suitable hosting options include:
GitHub Pages — free hosting directly from this repository. In the repository settings, enable GitHub Pages and set the source to the main branch. The tool will be available at a URL like https://username.github.io/repository-name/mde-multi-audit-dashboard.html.
Azure Static Web Apps — free tier available. Upload the HTML file and it is served over HTTPS at a generated Azure domain. Optionally configure a custom domain.
Netlify — free tier available. Drag and drop the HTML file into the Netlify dashboard and it is deployed immediately at a Netlify domain. Free HTTPS included.
SharePoint Online — embed the file as a document in a SharePoint site. Users can download and open it from there. Note that SharePoint cannot run the HTML file directly as a page — users need to download and open it in their browser.
Internal web server — place the HTML file in the root or a subdirectory of any web server. No server-side configuration is needed beyond serving static files.
When hosting on a web server, note that the data each user enters is stored in their browser's local storage tied to the URL origin (the domain and path of the page). Two engineers using the tool from the same hosted URL will each see their own data, not each other's. This is the same behaviour as using the file locally.
By default, the tool loads three fonts from Google Fonts when first opened with internet access. If your environment does not have internet access, or if external requests to Google's servers are not permitted by your security policy, you can embed the fonts directly in the HTML file.
To embed fonts:
- Download the font files for Syne, JetBrains Mono, and DM Sans from Google Fonts
- Convert each font file to base64 encoding
- Replace the Google Fonts link element in the HTML file's head section with CSS @font-face rules that reference the base64-encoded font data
This process increases the file size but ensures the fonts load correctly in all environments. If you would like assistance with this, raise a request in the GitHub Issues page.
Alternatively, if you are comfortable with the tool using system fonts rather than the designed fonts, you can simply remove the Google Fonts link element from the HTML file. The tool will display correctly using the default system font of each engineer's device.
The tool is a single HTML file containing all HTML, CSS, and JavaScript. Engineers who are comfortable reading code can make customisations directly to the file.
Common customisations include:
Adding a company name or logo — the header area at the top of the file can be edited to include your organisation's name or branding. Look for the section in the HTML that contains the "MDE Audit Tracker" text.
Adjusting task priorities — each task in the JavaScript data section has a pri property set to high, med, or low. These can be adjusted to reflect your organisation's own prioritisation of different controls.
Adding custom tasks — additional tasks can be added to any framework by following the existing data structure. Each task requires an id, name, ref, pri, and desc property, and a corresponding entry in the REMEDIES object. If you add tasks, export and document the customised file separately from the original so you can track what was changed.
Changing colour schemes — the colours for each framework are defined as CSS custom properties at the top of the style section. They can be changed to match your organisation's brand colours if desired.
If you make changes that would benefit other users, consider contributing them back to the repository. See the Contributing page for guidance.
When a new version of the tool is released, download the updated HTML file from the repository. Your saved data in browser local storage is not affected by updating the file — it persists separately. When you open the new version, your previous progress will load automatically.
If a new version adds tasks to a framework, those new tasks will appear with a status of Not Started. Existing task statuses are preserved.
Check the Changelog page when updating to understand what has changed and whether any new frameworks or features require your attention.