innovation-clusters-public

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

innovation-clusters-public

(★ 16)

This repo builds the publicly released Sveltekit application for the Innovation Clusters map version 2 (see https://www.innovationclusters.dsit.gov.uk/).

innovation-clusters-public Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🗺️ DSIT Innovation Clusters Svelte web app 🗺️

> [!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](https://www.innovationclusters.dsit.gov.uk/), 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.

## Contribution and Issue Policy

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](mailto:innovationclusters@dsit.gov.uk). If you identify any security vulnerabilities, please also report them by emailing this address.

## Setup

### Prerequisites
Before getting started ensure you have installed:
* [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)
* [Docker](https://docs.docker.com/engine/install/)
* [Node.js and npm](https://www.npmjs.com/)

### Installing repository requirements

To set up dependencies to be able to run the app, you should run

```sh
npm install
```

## Data

In 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.

## Running the app

This project is built with [`Svelte`](https://github.com/sveltejs/cli).

Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev
```

### Building the app

To preview a production version of the app in your local environment, run:

```bash
npm run build
npm run preview
```

To 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.](https://docs.docker.com/build/concepts/dockerfile/) 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.

## Logging

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`.

## Data

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.

## End-to-End Testing with Playwright

This project uses [Playwright](https://playwright.dev/) 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`.

### Setting Up Playwright

1. **Install Playwright and dependencies:**

```sh
    npm install --save-dev @playwright/test
    npx playwright install
    ```

2. **(Optional) Install browsers for Playwright:**
    Playwright will prompt you to install browsers if not present. You can install all supported browsers with:

```sh
    npx playwright install
    ```

### Running E2E Tests

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.

1. **Start the development server:**

```sh
    npm run dev
    ```

(Or ensure the server is running on the port specified in `playwright.config.ts`.)

2. **Run Playwright tests:**

```sh
    npx playwright test
    ```

### Viewing Test Reports

After running tests, you can view the HTML report:
```sh
npx playwright show-report
```

### Licence
This code is licensed under the MIT Licence. See the [LICENCE](LICENCE.txt) file for details.
The [Innovation Clusters app](https://www.innovationclusters.dsit.gov.uk/) itself is licensed under [OGL](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/)

Inspiration for this map came from https://www.ons.gov.uk/census/maps/ and https://github.com/ONSdigital/svelte-maps/tree/main.

innovation-clusters-public

innovation-clusters-public Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

innovation-clusters-public

innovation-clusters-public Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README