Important
This repo is not currently under active development 🗺️.
This repository contains a snapshot of the code required to build the DSIT Innovation Clusters web app, developed by the DSIT Data Science team. As of October 2025 this repo is not under active development. It has been open-sourced to allow others to benefit from our work and build on it where useful.
The repository uses the Svelte and Sveltekit JavaScript frameworks, HTML, CSS and docker to construct a containerised application.
We welcome feedback and suggestions regarding the code in this repository. While this repo is not under active development, we will monitor it and welcome any Pull Requests or issues raised to flag bugs, problems or improvements. However, we cannot guarantee a response, and Pull Requests will not be reviewed/ accepted for merge.
Please note that issues unrelated to the codebase, such as those concerning the app itself, will not be addressed via GitHub. For such queries or questions, please contact us at innovationclusters@dsit.gov.uk. If you identify any security vulnerabilities, please also report them by emailing this address.
Before getting started ensure you have installed:
To set up dependencies to be able to run the app, you should run
npm installIn our production app, we use AWS to store our data. If for some reason the app cannot detect AWS or fetch data from AWS, then it will fall back on the local dummy_data directory contained within this repo. This data is structured like our real data and populates the map with examples.
This project is built with Svelte.
Once you've installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run devTo preview a production version of the app in your local environment, run:
npm run build
npm run previewTo retrieve any data from an s3 bucket, you will need to have SSO configured and be logged in before running the above. You will also need a .env file configured with the following:
AWS_REGION=<your-region>
AWS_PROFILE=<your-profile-alias>
S3_BUCKET=<your-bucket>
The app will first search the parameter store associated with the AWS account you are logged in with for the parameter S3_BUCKET, and if available will read data from this bucket. If this does not work it will instead read from the dummy_data directory. For local runs, at present this variable is not utilised as the dummy data in the dummy_data folder are referenced.
To deploy the app, we use node adapter, and deploy via a Docker container. The below is an example build command that, if you are located within the repo directory, will build the app.
docker build -t test:latest .
You can replace test:latest with a different name and tag if needed.
To view data in the app, we are using aws sso. This means that you need to log in before running the app or the Docker container locally.
To then run the container locally and give access to the data required, you pass the environment file and your aws credentials to the container, all in the following command:
docker run -it -v ~/.aws/credentials:/root/.aws/credentials:ro -v ~/.aws/config:/root/.aws/config:ro -v ~/.aws/sso/cache:/root/.aws/sso/cache:ro -v ~/.aws/cli/cache:/root/.aws/cli/cache:ro -v $(pwd)/.env:/app/.env:ro -e .env -p 127.0.0.1:8000:3000 test:latest
This will publish the container's port 3000 to localhost:8000 - and you'll be able to view the app in your browser. To exit in your terminal, hit ctrl+c and run docker stop.
To debug in Docker, e.g. if you want to view the files in a running container, you can build the image as above, then run:
docker run --name test -d -i -t test:latest /bin/sh
followed by
docker exec -it test sh
to investigate the container which here has been named test. Run crtl+C followed by ctrl+D to exit the interactive container, and don't forget to stop the container afterwards.
Read about these commands here. It's a good idea to learn the commands for bringing up a list of Docker containers or images, and how to prune those (i.e. remove old or test ones), as containers especially take up a lot of space.
We use console logging in development, which is native to javascript and implemented with e.g. console.log().
We use the package vite-plugin-remove-console to remove all console logs when npm run build is run - this means that console logging no longer shows up in deployment.
To ensure that important logging happens in deployment, we use pino to keep logs of important events. The pino logger is defined at src/ts/logging.ts and is exported throughout the app to create log statements, mainly to catch errors, e.g. with logger.error("message"). This ensures that logs will be captured when hosted.
When you are logging in development, use console.log() statements. If you are adding a feature or code that, if it fails, you believe should raise a warning or error (or for another reason, you think an info statement would be important to always log) in preprod or prod deployment, then use the logger with the appropriate level as defined in logging.ts.
To create the boundary data in topojson format, download the geojson boundary data e.g. for LADs (2024) from ONS's geography portal, then run the following code to convert it to topojson:
sudo npm install topojson-server -g
geo2topo LAD.geojson > LAD_topo.json
If you are using the map with dummy data, this will need to be in a directory at the root called dummy_data, and contain two further directories called boundaries and dummy_clusters which contain the relevant topojson files.
This project uses Playwright for end-to-end (E2E) testing of the web application. Playwright tests are located in the tests/ directory and are configured via playwright.config.ts.
-
Install Playwright and dependencies:
npm install --save-dev @playwright/test npx playwright install
-
(Optional) Install browsers for Playwright: Playwright will prompt you to install browsers if not present. You can install all supported browsers with:
npx playwright install
To test on different browsers, you can edit the projects array in playwright.config.ts. Each entry specifies a browser (e.g. Chromium, Firefox, WebKit) and its configuration. Adjust or add entries as needed to customise which browsers are used during E2E testing.
-
Start the development server:
npm run dev
(Or ensure the server is running on the port specified in
playwright.config.ts.) -
Run Playwright tests:
npx playwright test
After running tests, you can view the HTML report:
npx playwright show-reportThis code is licensed under the MIT Licence. See the LICENCE file for details. The Innovation Clusters app itself is licensed under OGL
Inspiration for this map came from https://www.ons.gov.uk/census/maps/ and https://github.com/ONSdigital/svelte-maps/tree/main.