From 11373822240824036dd1a6278d0ae05699323f19 Mon Sep 17 00:00:00 2001
From: Michael Quested <michael.quested@arm.com>
Date: Fri, 8 Dec 2023 10:23:31 +0000
Subject: [PATCH 1/3] Add disabled button styling

---
 src/components/StandardButton.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/StandardButton.svelte b/src/components/StandardButton.svelte
index 16d4f39f0..6ca2b4de7 100644
--- a/src/components/StandardButton.svelte
+++ b/src/components/StandardButton.svelte
@@ -2,7 +2,7 @@
   (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
 
   SPDX-License-Identifier: MIT
- -->
+-->
 
 <style>
   .large {
@@ -17,6 +17,13 @@
   .small {
     padding: 1px 10px;
   }
+
+  :disabled {
+    background-color: transparent;
+    border-color: #ccc;
+    color: #ccc;
+    box-shadow: none;
+  }
 </style>
 
 <script lang="ts">

From 50e8e22f83d37aad307a85db1101783a77338f08 Mon Sep 17 00:00:00 2001
From: Michael Quested <michael.quested@arm.com>
Date: Fri, 8 Dec 2023 10:28:30 +0000
Subject: [PATCH 2/3] Update warning color to micro:bit red

---
 src/__viteBuildVariants__/ml-machine/windi.config.js   | 2 +-
 src/components/Gesture.svelte                          | 2 +-
 src/components/StandardButton.svelte                   | 4 ++--
 src/components/bottom/ConnectedLiveGraphButtons.svelte | 2 +-
 src/translations.ts                                    | 2 +-
 windi.config.js                                        | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/__viteBuildVariants__/ml-machine/windi.config.js b/src/__viteBuildVariants__/ml-machine/windi.config.js
index cabaaa362..f9daee663 100644
--- a/src/__viteBuildVariants__/ml-machine/windi.config.js
+++ b/src/__viteBuildVariants__/ml-machine/windi.config.js
@@ -19,7 +19,7 @@ export default {
         backgroundlight: '#ffffff',
         infolight: '#93c5fd',
         link: '#6c4bc1',
-        warning: '#ffaaaa',
+        warning: '#cd0365',
         disabled: '#8892A3',
         primaryborder: '#E5E7EB',
         infobglight: '#E7E5E4',
diff --git a/src/components/Gesture.svelte b/src/components/Gesture.svelte
index 617d0c430..8cc5d1d0f 100644
--- a/src/components/Gesture.svelte
+++ b/src/components/Gesture.svelte
@@ -292,7 +292,7 @@
             {$t('content.data.recording.description')}
           </p>
         </GestureTilePart>
-        <StandardButton onClick={() => (showCountdown = false)}
+        <StandardButton type="warning" onClick={() => (showCountdown = false)}
           >{$t('content.data.recording.button.cancel')}</StandardButton>
       </div>
     </BaseDialog>
diff --git a/src/components/StandardButton.svelte b/src/components/StandardButton.svelte
index 6ca2b4de7..d0445e064 100644
--- a/src/components/StandardButton.svelte
+++ b/src/components/StandardButton.svelte
@@ -42,8 +42,8 @@
 
   const classes: { [key in ButtonVariant]: string } = {
     primary: 'bg-primary text-white border-solid border-2 border-primary',
-    secondary: 'bg-transparent text-black border-solid border-2 border-primary',
-    warning: 'bg-warning',
+    secondary: 'bg-white text-black border-solid border-2 border-primary',
+    warning: 'bg-warning text-white',
     info: 'bg-info',
     infolight: 'bg-infolight',
   };
diff --git a/src/components/bottom/ConnectedLiveGraphButtons.svelte b/src/components/bottom/ConnectedLiveGraphButtons.svelte
index 3129b2dbe..b729c2ea7 100644
--- a/src/components/bottom/ConnectedLiveGraphButtons.svelte
+++ b/src/components/bottom/ConnectedLiveGraphButtons.svelte
@@ -33,7 +33,7 @@
   <div class="ml-2">
     {#if !$state.isInputConnected || $state.isInputReady}
       <!-- Input MB is not in the connection process -->
-      <StandardButton onClick={onInputDisconnectButtonClicked} type="warning"
+      <StandardButton onClick={onInputDisconnectButtonClicked} type="secondary"
         >{$t('footer.disconnectButton')}</StandardButton>
     {:else}
       <StandardButton onClick={TypingUtils.emptyFunction} disabled>
diff --git a/src/translations.ts b/src/translations.ts
index ec47bce97..d3691abe2 100644
--- a/src/translations.ts
+++ b/src/translations.ts
@@ -324,7 +324,7 @@ export const translations: TranslationMap = {
 		"content.data.controlbar.button.downloadData": "Download dataset",
 		"content.data.controlbar.button.uploadData": "Upload dataset",
 
-		"content.data.recording.button.cancel": "Cancel Recording",
+		"content.data.recording.button.cancel": "Cancel recording",
 		"content.data.recording.description": "Start action before the countdown finishes",
 
 		"content.data.trainDialog.title": "Train the model",
diff --git a/windi.config.js b/windi.config.js
index d85e6ae58..813ba6e6c 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -19,7 +19,7 @@ export default {
         backgroundlight: '#ffffff',
         infolight: '#93c5fd',
         link: '#6c4bc1',
-        warning: '#ffaaaa',
+        warning: '#cd0365',
         disabled: '#8892A3',
         primaryborder: '#E5E7EB',
         infobglight: '#E7E5E4',

From bff6c371850b05683885267185a2eaa82216211a Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <44397098+microbit-matt-hillsdon@users.noreply.github.com>
Date: Mon, 11 Dec 2023 14:45:57 +0000
Subject: [PATCH 3/3] Foundation deployment (#40)

I've deleted the upstream workflows rather than disable them for clarity. Will always be easy to
reinstate if needed.

Non-trivial aspects:
- The review/branch/PR previews model we use relies on a working base URL. There a few barriers to this:
    - A bespoke router redirects you to the root of the review domain so breaking refresh. I've added support for a base URL.
    - Absolute image paths. You can import images and have the bundler deal with them properly. This might be a bit disruptive though so perhaps we could do upstream
        - I've done it here for now. Quite a few images are in new UX.
    - Font paths. They're relative in the `all.min.css` source so not entirely clear what's going wrong.
        - They work by fluke upstream. In current use `all.min.css` is deployed to the root but references the fonts with ../webfonts/... this works because ../ at the root is ignored but at any other path it breaks.  Maybe it was always intended to have a CSS directory? I've done that for now.
- There's lots in public/ that will need to have suboptimal cache settings as the bundler isn't aware so output file names don't include a hash. Perhaps one to follow up on before we go live.
- I've moved the 3D model from public/assets/model to just model as it wasn't managed by the bundler so can't get the same cache settings as other files in assets. `public/assets` is probably just not a good idea.
---
 .github/workflows/build.yml                   |  53 +++++++++++++
 .github/workflows/main.yml                    |  72 ------------------
 .github/workflows/production.yml              |  71 -----------------
 .github/workflows/test.yml                    |  22 ------
 bin/print-ci-env.cjs                          |  23 ++++++
 deployment.cjs                                |  50 ++++++++++++
 index.html                                    |   4 +-
 public/{ => css}/all.min.css                  |   0
 public/{ => css}/global.css                   |   0
 public/{assets => }/models/license.txt        |   0
 public/{assets => }/models/microbit.bin       | Bin
 public/{assets => }/models/microbit.gltf      |   0
 src/App.svelte                                |   7 +-
 src/__tests__/license-identifiers.test.ts     |   6 +-
 src/components/3d-inspector/View3DUtility.ts  |   7 +-
 .../ConnectionOfflineWarning.svelte           |   2 +-
 src/components/Gesture.svelte                 |   3 +-
 src/components/LoadingSpinner.svelte          |   6 +-
 .../bottom/ConnectedLiveGraphButtons.svelte   |   5 +-
 .../BluetoothConnectingDialog.svelte          |   3 +-
 .../bluetooth/ConnectBatteryDialog.svelte     |   3 +-
 .../bluetooth/ConnectCableDialog.svelte       |   3 +-
 .../bluetooth/StartBluetoothDialog.svelte     |  12 ++-
 .../radio/ConnectCableDialogMB1.svelte        |   6 +-
 .../radio/StartRadioDialog.svelte             |  12 ++-
 .../usb/SelectMicrobitDialogUsb.svelte        |   3 +-
 .../usb/manual/ManualInstallTutorial.svelte   |  11 ++-
 .../RecordInformationContent.svelte           |   3 +-
 .../output/OutputGestureStack.svelte          |   9 ++-
 {public => src}/imgs/InputData.svg            |   0
 {public => src}/imgs/TestModel.svg            |   0
 {public => src}/imgs/TrainModel.svg           |   0
 {public => src}/imgs/blank_microbit.svg       |   0
 {public => src}/imgs/connect-cable.gif        | Bin
 .../imgs/data-trainer-thumpnail.png           | Bin
 {public => src}/imgs/down_arrow.svg           |   0
 {public => src}/imgs/led_off.svg              |   0
 {public => src}/imgs/led_on.svg               |   0
 {public => src}/imgs/loadingspinner.gif       | Bin
 {public => src}/imgs/microbit-logo.svg        |   0
 {public => src}/imgs/microbit2_blank.svg      |   0
 {public => src}/imgs/microbitV1.svg           |   0
 {public => src}/imgs/microbitV2.svg           |   0
 {public => src}/imgs/microbit_guide.svg       |   0
 {public => src}/imgs/microbit_icon.png        | Bin
 {public => src}/imgs/microbit_icon_dual.png   | Bin
 .../imgs/microbit_record_guide.svg            |   0
 {public => src}/imgs/microbit_unaltered.svg   |   0
 {public => src}/imgs/model.svg                |   0
 {public => src}/imgs/model_2.svg              |   0
 {public => src}/imgs/model_3.svg              |   0
 {public => src}/imgs/red_arrows.svg           |   0
 {public => src}/imgs/right_arrow.svg          |   0
 {public => src}/imgs/right_arrow_blue.svg     |   0
 {public => src}/imgs/select-microbit.png      | Bin
 {public => src}/imgs/sidebar_background.svg   |   0
 .../imgs/stylised-battery-pack.svg            |   0
 .../imgs/stylised-microbit-black.svg          |   0
 .../imgs/stylised-microbit-connected.svg      |   0
 {public => src}/imgs/stylised-usb-cable.svg   |   0
 {public => src}/imgs/stylised_computer.svg    |   0
 {public => src}/imgs/transfer_firmware.gif    | Bin
 .../imgs/transfer_firmware_chromeos.gif       | Bin
 .../imgs/transfer_firmware_macos.gif          | Bin
 .../imgs/transfer_firmware_windows.gif        | Bin
 {public => src}/imgs/v1.svg                   |   0
 {public => src}/imgs/v2.svg                   |   0
 src/menus/TrainingMenu.svelte                 |   3 +-
 src/pages/Homepage.svelte                     |  17 ++---
 src/pages/model/ModelPageStackView.svelte     |   3 +-
 src/router/Router.svelte                      |   5 +-
 tsconfig.json                                 |   2 +-
 vite.config.ts                                |   3 +-
 73 files changed, 207 insertions(+), 222 deletions(-)
 create mode 100644 .github/workflows/build.yml
 delete mode 100644 .github/workflows/main.yml
 delete mode 100644 .github/workflows/production.yml
 delete mode 100644 .github/workflows/test.yml
 create mode 100644 bin/print-ci-env.cjs
 create mode 100644 deployment.cjs
 rename public/{ => css}/all.min.css (100%)
 rename public/{ => css}/global.css (100%)
 rename public/{assets => }/models/license.txt (100%)
 rename public/{assets => }/models/microbit.bin (100%)
 rename public/{assets => }/models/microbit.gltf (100%)
 rename {public => src}/imgs/InputData.svg (100%)
 rename {public => src}/imgs/TestModel.svg (100%)
 rename {public => src}/imgs/TrainModel.svg (100%)
 rename {public => src}/imgs/blank_microbit.svg (100%)
 rename {public => src}/imgs/connect-cable.gif (100%)
 rename {public => src}/imgs/data-trainer-thumpnail.png (100%)
 rename {public => src}/imgs/down_arrow.svg (100%)
 rename {public => src}/imgs/led_off.svg (100%)
 rename {public => src}/imgs/led_on.svg (100%)
 rename {public => src}/imgs/loadingspinner.gif (100%)
 rename {public => src}/imgs/microbit-logo.svg (100%)
 rename {public => src}/imgs/microbit2_blank.svg (100%)
 rename {public => src}/imgs/microbitV1.svg (100%)
 rename {public => src}/imgs/microbitV2.svg (100%)
 rename {public => src}/imgs/microbit_guide.svg (100%)
 rename {public => src}/imgs/microbit_icon.png (100%)
 rename {public => src}/imgs/microbit_icon_dual.png (100%)
 rename {public => src}/imgs/microbit_record_guide.svg (100%)
 rename {public => src}/imgs/microbit_unaltered.svg (100%)
 rename {public => src}/imgs/model.svg (100%)
 rename {public => src}/imgs/model_2.svg (100%)
 rename {public => src}/imgs/model_3.svg (100%)
 rename {public => src}/imgs/red_arrows.svg (100%)
 rename {public => src}/imgs/right_arrow.svg (100%)
 rename {public => src}/imgs/right_arrow_blue.svg (100%)
 rename {public => src}/imgs/select-microbit.png (100%)
 rename {public => src}/imgs/sidebar_background.svg (100%)
 rename {public => src}/imgs/stylised-battery-pack.svg (100%)
 rename {public => src}/imgs/stylised-microbit-black.svg (100%)
 rename {public => src}/imgs/stylised-microbit-connected.svg (100%)
 rename {public => src}/imgs/stylised-usb-cable.svg (100%)
 rename {public => src}/imgs/stylised_computer.svg (100%)
 rename {public => src}/imgs/transfer_firmware.gif (100%)
 rename {public => src}/imgs/transfer_firmware_chromeos.gif (100%)
 rename {public => src}/imgs/transfer_firmware_macos.gif (100%)
 rename {public => src}/imgs/transfer_firmware_windows.gif (100%)
 rename {public => src}/imgs/v1.svg (100%)
 rename {public => src}/imgs/v2.svg (100%)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 000000000..5e507274a
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,53 @@
+name: build
+
+on:
+  release:
+    types: [created]
+  push:
+    branches:
+      - "**"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ startsWith(github.ref, 'refs/tags/v') && 'release' || github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && !startsWith(github.ref, 'refs/tags/v') }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: read
+    env:
+      AWS_DEFAULT_REGION: eu-west-1
+      PRODUCTION_CLOUDFRONT_DISTRIBUTION_ID: NOT_YET
+      STAGING_CLOUDFRONT_DISTRIBUTION_ID: E37K3V5Y65XQIX
+      REVIEW_CLOUDFRONT_DISTRIBUTION_ID: E3KUGPF02I4CJ4
+      VITE_FOUNDATION_BUILD: ${{ github.repository_owner == 'microbit-foundation' }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+          registry-url: "https://npm.pkg.github.com"
+      - run: npm ci
+      - run: npm install --no-save @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9 @microbit-foundation/npm-package-versioner@2
+        if: github.repository_owner == 'microbit-foundation'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - run: npx update-ci-version
+      - run: node ./bin/print-ci-env.cjs >> $GITHUB_ENV
+      - run: npm run test
+      - run: npm run check
+      - run: npx prettier --check src
+      - run: npm run build
+      - run: npx website-deploy-aws
+        if: github.repository_owner == 'microbit-foundation' && (env.STAGE == 'REVIEW' || success())
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.WEB_DEPLOY_ML_AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.WEB_DEPLOY_ML_AWS_SECRET_ACCESS_KEY }}
+      - run: npx invalidate-cloudfront-distribution
+        if: github.repository_owner == 'microbit-foundation' && (env.STAGE == 'REVIEW' || success())
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.WEB_DEPLOY_ML_AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.WEB_DEPLOY_ML_AWS_SECRET_ACCESS_KEY }}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
deleted file mode 100644
index d08948308..000000000
--- a/.github/workflows/main.yml
+++ /dev/null
@@ -1,72 +0,0 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-# GitHub recommends pinning actions to a commit SHA.
-# To get a newer version, you will need to update the SHA.
-# You can also reference a tag or branch, but the action may change without warning.
-
-name: Testing deployment
-
-env:
-  APP_LOCATION: "/" # location of your client code
-  APP_ARTIFACT_LOCATION: "/dist" # location of client code build output
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
-
-permissions:
-  issues: write
-  contents: read
-
-jobs:
-  Jest:
-    if: false
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Run Tests
-        run: |
-          npm install 
-          npm test
-  build_and_deploy:
-    if: false
-    # if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
-    runs-on: ubuntu-latest
-    name: Build and Deploy
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          submodules: true
-      - name: Branding
-        run: |
-          cp -f ./src/__viteBuildVariants__/ml-machine/windi.config.js ./windi.config.js
-      - name: Build And Deploy
-        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          action: "upload"
-          app_location: ${{ env.APP_LOCATION }}
-          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}
-        env:
-          VITE_TITLE: ML-Machine
-
-  close:
-    if: false
-    # if: github.event_name == 'pull_request' && github.event.action == 'closed'
-    runs-on: ubuntu-latest
-    name: Close
-    steps:
-      - name: Close
-        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
-          action: "close"
diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
deleted file mode 100644
index abd39d097..000000000
--- a/.github/workflows/production.yml
+++ /dev/null
@@ -1,71 +0,0 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-# GitHub recommends pinning actions to a commit SHA.
-# To get a newer version, you will need to update the SHA.
-# You can also reference a tag or branch, but the action may change without warning.
-
-name: Production deployment
-
-env:
-  APP_LOCATION: "/" # location of your client code
-  APP_ARTIFACT_LOCATION: "/dist" # location of client code build output
-
-on:
-  push:
-    branches:
-      - production
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - production
-
-permissions:
-  issues: write
-  contents: read
-
-jobs:
-  Jest:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Run Tests
-        run: |
-          npm install 
-          npm test
-  build_and_deploy:
-    if: false
-    # if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
-    runs-on: ubuntu-latest
-    name: Build and Deploy
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          submodules: true
-      - name: Branding
-        run: |
-          cp -f ./src/__viteBuildVariants__/ml-machine/windi.config.js ./windi.config.js
-      - name: Build And Deploy
-        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_PRODUCTION_TOKEN }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          action: "upload"
-          app_location: ${{ env.APP_LOCATION }}
-          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}
-        env:
-          VITE_TITLE: ML-Machine
-
-  close:
-    if: false
-    # if: github.event_name == 'pull_request' && github.event.action == 'closed'
-    runs-on: ubuntu-latest
-    name: Close
-    steps:
-      - name: Close
-        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_PRODUCTION_TOKEN }}
-          action: "close"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
deleted file mode 100644
index d6ab866d4..000000000
--- a/.github/workflows/test.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-name: Run tests & build
-
-on:
-  push:
-    branches: '*'
-  pull_request:
-    branches: '*'
-
-jobs:
-  test-and-build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          cache: 'npm'
-      - run: npm install
-      - run: npm run test
-      - run: npm run check
-      - run: npx prettier --check src
-      - run: npm run build
diff --git a/bin/print-ci-env.cjs b/bin/print-ci-env.cjs
new file mode 100644
index 000000000..2f33d7755
--- /dev/null
+++ b/bin/print-ci-env.cjs
@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+const ref = process.env.GITHUB_REF;
+let stage;
+if (ref === 'refs/heads/main') {
+  stage = 'STAGING';
+} else if (ref.startsWith('refs/tags/v')) {
+  stage = 'PRODUCTION';
+} else {
+  stage = 'REVIEW';
+}
+
+process.env.STAGE = stage;
+// STAGE must be defined before this is imported
+const { bucketName, bucketPrefix } = require('../deployment.cjs');
+const baseUrl = !bucketPrefix ? '/' : `/${bucketPrefix}/`;
+const fullUrl = `https://${bucketName}${baseUrl}`;
+
+console.log(`STAGE=${stage}`);
+console.log(`VITE_STAGE=${stage}`);
+console.log(`BASE_URL=${baseUrl}`);
+// This can be used for og:url and similar. Not quite right for review domain but we don't really care.
+console.log(`VITE_FULL_URL=${fullUrl}`);
diff --git a/deployment.cjs b/deployment.cjs
new file mode 100644
index 000000000..342be4a3b
--- /dev/null
+++ b/deployment.cjs
@@ -0,0 +1,50 @@
+const {
+  createDeploymentDetailsFromOptions,
+} = require('@microbit-foundation/website-deploy-aws-config');
+
+const { s3Config } = createDeploymentDetailsFromOptions({
+  production: {
+    bucket: 'ml.microbit.org',
+    mode: 'root',
+    allowPrerelease: false,
+  },
+  staging: {
+    bucket: 'stage-ml.microbit.org',
+  },
+  review: {
+    bucket: 'review-ml.microbit.org',
+    mode: 'branch-prefix',
+  },
+});
+
+module.exports = {
+  deploymentDir: './dist',
+  ...s3Config,
+  region: 'eu-west-1',
+  removeNonexistentObjects: true,
+  enableS3StaticWebsiteHosting: true,
+  errorDocumentKey: 'index.html',
+  redirects: [],
+  params: {
+    '**/**.html': {
+      CacheControl: 'public, max-age=0, must-revalidate',
+    },
+    '**/assets/**': { CacheControl: 'public, max-age=31536000, immutable' },
+    // There's lots in public/ that we'd ideally use the bundler for to improve caching
+    'css/**': {
+      CacheControl: 'public, max-age=0, must-revalidate',
+    },
+    'firmware/**': {
+      CacheControl: 'public, max-age=0, must-revalidate',
+    },
+    'imgs/**': {
+      CacheControl: 'public, max-age=0, must-revalidate',
+    },
+    'sounds/**': {
+      CacheControl: 'public, max-age=0, must-revalidate',
+    },
+    'webfonts/**': {
+      CacheControl: 'public, max-age=0, must-revalidate',
+    },
+  },
+};
diff --git a/index.html b/index.html
index 0aba02bf2..e97246757 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
     <title>&#65279;</title>
 
     <link rel="icon" type="image/png" href="/imgs/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/all.min.css" />
+    <link rel="stylesheet" href="/css/global.css" />
+    <link rel="stylesheet" href="/css/all.min.css" />
 
     <script
       src="https://shared-assets.microbit.org/common/v1/common.js"
diff --git a/public/all.min.css b/public/css/all.min.css
similarity index 100%
rename from public/all.min.css
rename to public/css/all.min.css
diff --git a/public/global.css b/public/css/global.css
similarity index 100%
rename from public/global.css
rename to public/css/global.css
diff --git a/public/assets/models/license.txt b/public/models/license.txt
similarity index 100%
rename from public/assets/models/license.txt
rename to public/models/license.txt
diff --git a/public/assets/models/microbit.bin b/public/models/microbit.bin
similarity index 100%
rename from public/assets/models/microbit.bin
rename to public/models/microbit.bin
diff --git a/public/assets/models/microbit.gltf b/public/models/microbit.gltf
similarity index 100%
rename from public/assets/models/microbit.gltf
rename to public/models/microbit.gltf
diff --git a/src/App.svelte b/src/App.svelte
index b9110a8a5..7b88e2d46 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -23,6 +23,7 @@
   import BottomPanel from './components/bottom/BottomPanel.svelte';
   import { t } from './i18n';
   import { consent } from './script/stores/complianceStore';
+  import microbitLogoImage from './imgs/microbit-logo.svg';
 
   ConnectionBehaviours.setInputBehaviour(new InputBehaviour());
   ConnectionBehaviours.setOutputBehaviour(new OutputBehaviour());
@@ -50,11 +51,7 @@
 
       <div class="w-full flex flex-col bg-backgrounddark">
         <ControlBar>
-          <img
-            class="mr-8"
-            src="/imgs/microbit-logo.svg"
-            alt="Micro:bit logo"
-            width="150px" />
+          <img class="mr-8" src={microbitLogoImage} alt="Micro:bit logo" width="150px" />
           <h1 class="text-xl font-thin whitespace-nowrap">{$t('content.index.title')}</h1>
           <div class="flex flex-row basis-full justify-end">
             <SelectLanguageControlBarDropdown />
diff --git a/src/__tests__/license-identifiers.test.ts b/src/__tests__/license-identifiers.test.ts
index a5c879bf3..e03a35aa8 100644
--- a/src/__tests__/license-identifiers.test.ts
+++ b/src/__tests__/license-identifiers.test.ts
@@ -12,7 +12,7 @@ import 'jest-expect-message';
 import * as path from 'path';
 
 // Place files you wish to ignore by name in here
-const ignoredFiles: string[] = ['.DS_Store'];
+const ignoredFiles: RegExp[] = [/^\.DS_Store$/, /\.(gif|svg|png|jpg|jpeg)$/];
 const directoriesToScan = ['./src/', './microbit/v2/source/', './microbit/v1/source/'];
 
 const licenseIdentifierStringSPDX = 'SPDX-License-Identifier:';
@@ -27,12 +27,12 @@ type DirectoryContents = {
   folders: string[];
 };
 
-const readDirectory = (directory: string, ignoreList: string[]): DirectoryContents => {
+const readDirectory = (directory: string, ignoreList: RegExp[]): DirectoryContents => {
   const files: string[] = [];
   const folders: string[] = [];
   const filesRead = fs.readdirSync(directory);
   filesRead.forEach(file => {
-    if (ignoreList.includes(file)) return;
+    if (ignoreList.some(ignoreRegExp => ignoreRegExp.test(file))) return;
     const fileLocation = path.join(directory, file);
     const stats = fs.statSync(fileLocation);
     if (stats.isFile()) {
diff --git a/src/components/3d-inspector/View3DUtility.ts b/src/components/3d-inspector/View3DUtility.ts
index e603c3b02..3d292b4e7 100644
--- a/src/components/3d-inspector/View3DUtility.ts
+++ b/src/components/3d-inspector/View3DUtility.ts
@@ -123,7 +123,12 @@ class Live3DUtility {
         resolve(group);
       };
 
-      this.loader.load('/assets/models/microbit.gltf', onFinished, onProgress, reject);
+      this.loader.load(
+        `${import.meta.env.BASE_URL}models/microbit.gltf`,
+        onFinished,
+        onProgress,
+        reject,
+      );
     });
   }
 }
diff --git a/src/components/ConnectionOfflineWarning.svelte b/src/components/ConnectionOfflineWarning.svelte
index 1f5e564b3..76019e6fb 100644
--- a/src/components/ConnectionOfflineWarning.svelte
+++ b/src/components/ConnectionOfflineWarning.svelte
@@ -17,7 +17,7 @@
   2 - Set favicon into it as src
   3 - Use onerror and onload to determine whether or not it was successfully loaded
    */
-  const pingDestination = '/imgs/favicon.png';
+  const pingDestination = import.meta.env.BASE_URL + 'imgs/favicon.png';
 
   const getAnimatedDots = (numOfDots: number) => {
     return `•`.repeat(numOfDots);
diff --git a/src/components/Gesture.svelte b/src/components/Gesture.svelte
index 8cc5d1d0f..6b020437f 100644
--- a/src/components/Gesture.svelte
+++ b/src/components/Gesture.svelte
@@ -45,6 +45,7 @@
   import ImageSkeleton from './skeletonloading/ImageSkeleton.svelte';
   import GestureTilePart from './GestureTilePart.svelte';
   import StaticConfiguration from '../StaticConfiguration';
+  import microbitRecordingGuideImage from '../imgs/microbit_record_guide.svg';
   import BaseDialog from './dialogs/BaseDialog.svelte';
 
   export let onNoMicrobitSelect: () => void;
@@ -313,7 +314,7 @@
             <ImageSkeleton
               height={95}
               width={140}
-              src="/imgs/microbit_record_guide.svg"
+              src={microbitRecordingGuideImage}
               alt="microbit recording guide" />
           </div>
           <p class=" text-center absolute w-60px right-23px top-30px">
diff --git a/src/components/LoadingSpinner.svelte b/src/components/LoadingSpinner.svelte
index 3dd46433c..306bf8bce 100644
--- a/src/components/LoadingSpinner.svelte
+++ b/src/components/LoadingSpinner.svelte
@@ -4,8 +4,10 @@
   SPDX-License-Identifier: MIT
  -->
 
-<script></script>
+<script>
+  import loadingSpinnerImage from '../imgs/loadingspinner.gif';
+</script>
 
 <div class="justify-center items-center self-center m-auto">
-  <img alt="loading" src="/imgs/loadingspinner.gif" width="150px" />
+  <img alt="loading" src={loadingSpinnerImage} width="150px" />
 </div>
diff --git a/src/components/bottom/ConnectedLiveGraphButtons.svelte b/src/components/bottom/ConnectedLiveGraphButtons.svelte
index b729c2ea7..9a662e09e 100644
--- a/src/components/bottom/ConnectedLiveGraphButtons.svelte
+++ b/src/components/bottom/ConnectedLiveGraphButtons.svelte
@@ -9,6 +9,7 @@
   import TypingUtils from '../../script/TypingUtils';
   import { state } from '../../script/stores/uiStore';
   import StandardButton from '../StandardButton.svelte';
+  import loadingSpinnerImage from '../../imgs/loadingspinner.gif';
 
   export let onOutputDisconnectButtonClicked: () => void;
   export let onInputDisconnectButtonClicked: () => void;
@@ -25,7 +26,7 @@
           >{$t('menu.model.disconnect')}</StandardButton>
       {:else}
         <StandardButton onClick={TypingUtils.emptyFunction} disabled>
-          <img alt="loading" src="imgs/loadingspinner.gif" style="height:24px" />
+          <img alt="loading" src={loadingSpinnerImage} style="height:24px" />
         </StandardButton>
       {/if}
     {/if}
@@ -37,7 +38,7 @@
         >{$t('footer.disconnectButton')}</StandardButton>
     {:else}
       <StandardButton onClick={TypingUtils.emptyFunction} disabled>
-        <img alt="loading" src="/imgs/loadingspinner.gif" style="height:24px" />
+        <img alt="loading" src={loadingSpinnerImage} style="height:24px" />
       </StandardButton>
     {/if}
   </div>
diff --git a/src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte b/src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte
index cf0abba94..9d4c93123 100644
--- a/src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte
+++ b/src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte
@@ -19,6 +19,7 @@
   import { DeviceRequestStates } from '../../../script/stores/connectDialogStore';
   import Environment from '../../../script/Environment';
   import StaticConfiguration from '../../../StaticConfiguration';
+  import loadingSpinnerImage from '../../../imgs/loadingspinner.gif';
 
   // callbacks
   export let deviceState: DeviceRequestStates;
@@ -114,7 +115,7 @@
     <!-- Show spinner while connecting -->
     <div class="w-650px flex flex-col justify-center items-center">
       <p>{$t('connectMB.bluetooth.connecting')}</p>
-      <img alt="loading" src="/imgs/loadingspinner.gif" width="100px" />
+      <img alt="loading" src={loadingSpinnerImage} width="100px" />
     </div>
   {/if}
 </main>
diff --git a/src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte b/src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte
index 034473e44..b1e4f7a97 100644
--- a/src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte
+++ b/src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte
@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitConnectedImage from '../../../imgs/stylised-microbit-connected.svg';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -19,7 +20,7 @@
     </p>
     <p>{$t('connectMB.connectBattery.subtitle')}</p>
     <img
-      src="/imgs/stylised-microbit-connected.svg"
+      src={microbitConnectedImage}
       alt="Showing the batteries need to go into the battery pack and the battery pack should be connected at the top left of the micro:bit."
       class="px-40 pt-5" />
   </div>
diff --git a/src/components/connection-prompt/bluetooth/ConnectCableDialog.svelte b/src/components/connection-prompt/bluetooth/ConnectCableDialog.svelte
index 4abbef6c7..3ff7faac2 100644
--- a/src/components/connection-prompt/bluetooth/ConnectCableDialog.svelte
+++ b/src/components/connection-prompt/bluetooth/ConnectCableDialog.svelte
@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import connectCableImage from '../../../imgs/connect-cable.gif';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -35,7 +36,7 @@
       {/if}
     </p>
     <img
-      src="imgs/connect-cable.gif"
+      src={connectCableImage}
       alt="USB cable being connected at the top, centre of the micro:bit."
       class="px-55 py-5" />
   </div>
diff --git a/src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte b/src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte
index 14efe8207..cbcf02be3 100644
--- a/src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte
+++ b/src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte
@@ -7,6 +7,10 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitImage from '../../../imgs/stylised-microbit-black.svg';
+  import computerImage from '../../../imgs/stylised_computer.svg';
+  import usbCableImage from '../../../imgs/stylised-usb-cable.svg';
+  import batteryPackImage from '../../../imgs/stylised-battery-pack.svg';
 
   export let onNextClick: () => void;
   export let onStartRadioClick: () => void;
@@ -22,7 +26,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised-microbit-black.svg"
+          src={microbitImage}
           alt={$t('connectMB.bluetoothStart.requirements1')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.bluetoothStart.requirements1')}
@@ -31,7 +35,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised_computer.svg"
+          src={computerImage}
           alt={$t('connectMB.bluetoothStart.requirements2')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.bluetoothStart.requirements2')}
@@ -40,7 +44,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised-usb-cable.svg"
+          src={usbCableImage}
           alt={$t('connectMB.bluetoothStart.requirements3')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.bluetoothStart.requirements3')}
@@ -49,7 +53,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised-battery-pack.svg"
+          src={batteryPackImage}
           alt={$t('connectMB.bluetoothStart.requirements4')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.bluetoothStart.requirements4')}
diff --git a/src/components/connection-prompt/radio/ConnectCableDialogMB1.svelte b/src/components/connection-prompt/radio/ConnectCableDialogMB1.svelte
index cd61668b7..e724f8b57 100644
--- a/src/components/connection-prompt/radio/ConnectCableDialogMB1.svelte
+++ b/src/components/connection-prompt/radio/ConnectCableDialogMB1.svelte
@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import connectCableImage from '../../../imgs/connect-cable.gif';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -19,10 +20,7 @@
       {$t('connectMB.connectCableMB1.heading')}
     </p>
     <p class="leading-normal">{$t('connectMB.connectCableMB1.subtitle')}</p>
-    <img
-      src="imgs/connect-cable.gif"
-      alt="GIF of connecting micro:bit"
-      class="px-55 py-5" />
+    <img src={connectCableImage} alt="GIF of connecting micro:bit" class="px-55 py-5" />
   </div>
   <div class="flex">
     <p class="self-center w-full hover:cursor-pointer" on:click={onSkipClick}>
diff --git a/src/components/connection-prompt/radio/StartRadioDialog.svelte b/src/components/connection-prompt/radio/StartRadioDialog.svelte
index 9db11dd1e..5ddc146ce 100644
--- a/src/components/connection-prompt/radio/StartRadioDialog.svelte
+++ b/src/components/connection-prompt/radio/StartRadioDialog.svelte
@@ -7,6 +7,10 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitImage from '../../../imgs/stylised-microbit-black.svg';
+  import computerImage from '../../../imgs/stylised_computer.svg';
+  import usbCableImage from '../../../imgs/stylised-usb-cable.svg';
+  import batteryPackImage from '../../../imgs/stylised-battery-pack.svg';
 
   export let onNextClick: () => void;
   export let onStartBluetoothClick: () => void;
@@ -21,7 +25,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised-microbit-black.svg"
+          src={microbitImage}
           alt={$t('connectMB.radioStart.requirements1')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.radioStart.requirements1')}
@@ -30,7 +34,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised_computer.svg"
+          src={computerImage}
           alt={$t('connectMB.radioStart.requirements2')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.radioStart.requirements2')}
@@ -39,7 +43,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised-usb-cable.svg"
+          src={usbCableImage}
           alt={$t('connectMB.radioStart.requirements3')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.radioStart.requirements3')}
@@ -48,7 +52,7 @@
       <div class="flex flex-col">
         <img
           class="h-{imageHeight}"
-          src="/imgs/stylised-battery-pack.svg"
+          src={batteryPackImage}
           alt={$t('connectMB.radioStart.requirements4')} />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.radioStart.requirements4')}
diff --git a/src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte b/src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte
index f5559b9a9..251f93af0 100644
--- a/src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte
+++ b/src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte
@@ -8,6 +8,7 @@
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
   import Microbits from '../../../script/microbit-interfacing/Microbits';
+  import selectMicrobitImage from '../../../imgs/select-microbit.png';
 
   export let onBackClick: () => void;
   export let onFound: () => void;
@@ -29,7 +30,7 @@
       {$t('connectMB.webPopup')}
     </p>
     <img
-      src="/imgs/select-microbit.png"
+      src={selectMicrobitImage}
       alt="Screenshot of the browser window that will appear next.  Your connected micro:bit will be listed. Choose your micro:bit then select the Connect button."
       class="left-0 pt-5" />
     <p class="absolute left-3/4 transform -translate-x-1/2 top-1/2 -translate-y-28">
diff --git a/src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte b/src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte
index f37982ec2..2df5c08cd 100644
--- a/src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte
+++ b/src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte
@@ -11,6 +11,9 @@
   import Microbits from '../../../../script/microbit-interfacing/Microbits';
   import ImageSkeleton from '../../../skeletonloading/ImageSkeleton.svelte';
   import Bowser from 'bowser';
+  import transferFirmwareMacOSImage from '../../../../imgs/transfer_firmware_macos.gif';
+  import transferFirmwareChromeOSImage from '../../../../imgs/transfer_firmware_chromeos.gif';
+  import transferFirmwareWindowsImage from '../../../../imgs/transfer_firmware_windows.gif';
 
   export let onConnectBluetoothClick: () => void;
 
@@ -23,13 +26,13 @@
   const getIllustrationGif = (os: string) => {
     switch (os) {
       case 'Chrome OS':
-        return 'imgs/transfer_firmware_chromeos.gif';
+        return transferFirmwareChromeOSImage;
       case 'Windows':
-        return 'imgs/transfer_firmware_windows.gif';
+        return transferFirmwareWindowsImage;
       case 'macOS':
-        return 'imgs/transfer_firmware_macos.gif';
+        return transferFirmwareMacOSImage;
       default:
-        return 'imgs/transfer_firmware_macos.gif';
+        return transferFirmwareMacOSImage;
     }
   };
 
diff --git a/src/components/datacollection/RecordInformationContent.svelte b/src/components/datacollection/RecordInformationContent.svelte
index 865b622db..d616d0f17 100644
--- a/src/components/datacollection/RecordInformationContent.svelte
+++ b/src/components/datacollection/RecordInformationContent.svelte
@@ -8,6 +8,7 @@
   import { t } from '../../i18n';
   import ImageSkeleton from '../skeletonloading/ImageSkeleton.svelte';
   import { getInfoBoxColors } from '../information/InformationComponentUtility';
+  import recordingGuideImage from '../../imgs/microbit_record_guide.svg';
   export let isLightTheme = true;
 
   const colors = getInfoBoxColors(isLightTheme);
@@ -26,7 +27,7 @@
       <ImageSkeleton
         alt="microbit recording guide"
         height={134}
-        src="/imgs/microbit_record_guide.svg"
+        src={recordingGuideImage}
         width={200} />
     </div>
     <p class=" text-center absolute w-60px right-10px top-35px">
diff --git a/src/components/output/OutputGestureStack.svelte b/src/components/output/OutputGestureStack.svelte
index cb82300c6..149398235 100644
--- a/src/components/output/OutputGestureStack.svelte
+++ b/src/components/output/OutputGestureStack.svelte
@@ -35,6 +35,9 @@
   import { PinTurnOnState } from './PinSelectorUtil';
   import MBSpecs from '../../script/microbit-interfacing/MBSpecs';
   import Gestures from '../../script/Gestures';
+  import rightArrowImage from '../../imgs/right_arrow.svg';
+  import rightArrowBlueImage from '../../imgs/right_arrow_blue.svg';
+  import blankMicrobitImage from '../../imgs/blank_microbit.svg';
 
   type TriggerAction = 'turnOn' | 'turnOff' | 'none';
 
@@ -255,13 +258,13 @@
       <img
         class="m-auto"
         class:hidden={wasTriggered}
-        src={'imgs/right_arrow.svg'}
+        src={rightArrowImage}
         alt="right arrow icon"
         width="30px" />
       <img
         class="m-auto"
         class:hidden={!wasTriggered || !$state.isInputReady}
-        src={'imgs/right_arrow_blue.svg'}
+        src={rightArrowBlueImage}
         alt="right arrow icon"
         width="30px" />
     </div>
@@ -271,7 +274,7 @@
       <div
         class="w-177px relative rounded-xl bg-transparent h-full border-1 border-primaryborder">
         <ImageSkeleton
-          src="imgs/blank_microbit.svg"
+          src={blankMicrobitImage}
           alt="microbit guide"
           width={177}
           height={144}
diff --git a/public/imgs/InputData.svg b/src/imgs/InputData.svg
similarity index 100%
rename from public/imgs/InputData.svg
rename to src/imgs/InputData.svg
diff --git a/public/imgs/TestModel.svg b/src/imgs/TestModel.svg
similarity index 100%
rename from public/imgs/TestModel.svg
rename to src/imgs/TestModel.svg
diff --git a/public/imgs/TrainModel.svg b/src/imgs/TrainModel.svg
similarity index 100%
rename from public/imgs/TrainModel.svg
rename to src/imgs/TrainModel.svg
diff --git a/public/imgs/blank_microbit.svg b/src/imgs/blank_microbit.svg
similarity index 100%
rename from public/imgs/blank_microbit.svg
rename to src/imgs/blank_microbit.svg
diff --git a/public/imgs/connect-cable.gif b/src/imgs/connect-cable.gif
similarity index 100%
rename from public/imgs/connect-cable.gif
rename to src/imgs/connect-cable.gif
diff --git a/public/imgs/data-trainer-thumpnail.png b/src/imgs/data-trainer-thumpnail.png
similarity index 100%
rename from public/imgs/data-trainer-thumpnail.png
rename to src/imgs/data-trainer-thumpnail.png
diff --git a/public/imgs/down_arrow.svg b/src/imgs/down_arrow.svg
similarity index 100%
rename from public/imgs/down_arrow.svg
rename to src/imgs/down_arrow.svg
diff --git a/public/imgs/led_off.svg b/src/imgs/led_off.svg
similarity index 100%
rename from public/imgs/led_off.svg
rename to src/imgs/led_off.svg
diff --git a/public/imgs/led_on.svg b/src/imgs/led_on.svg
similarity index 100%
rename from public/imgs/led_on.svg
rename to src/imgs/led_on.svg
diff --git a/public/imgs/loadingspinner.gif b/src/imgs/loadingspinner.gif
similarity index 100%
rename from public/imgs/loadingspinner.gif
rename to src/imgs/loadingspinner.gif
diff --git a/public/imgs/microbit-logo.svg b/src/imgs/microbit-logo.svg
similarity index 100%
rename from public/imgs/microbit-logo.svg
rename to src/imgs/microbit-logo.svg
diff --git a/public/imgs/microbit2_blank.svg b/src/imgs/microbit2_blank.svg
similarity index 100%
rename from public/imgs/microbit2_blank.svg
rename to src/imgs/microbit2_blank.svg
diff --git a/public/imgs/microbitV1.svg b/src/imgs/microbitV1.svg
similarity index 100%
rename from public/imgs/microbitV1.svg
rename to src/imgs/microbitV1.svg
diff --git a/public/imgs/microbitV2.svg b/src/imgs/microbitV2.svg
similarity index 100%
rename from public/imgs/microbitV2.svg
rename to src/imgs/microbitV2.svg
diff --git a/public/imgs/microbit_guide.svg b/src/imgs/microbit_guide.svg
similarity index 100%
rename from public/imgs/microbit_guide.svg
rename to src/imgs/microbit_guide.svg
diff --git a/public/imgs/microbit_icon.png b/src/imgs/microbit_icon.png
similarity index 100%
rename from public/imgs/microbit_icon.png
rename to src/imgs/microbit_icon.png
diff --git a/public/imgs/microbit_icon_dual.png b/src/imgs/microbit_icon_dual.png
similarity index 100%
rename from public/imgs/microbit_icon_dual.png
rename to src/imgs/microbit_icon_dual.png
diff --git a/public/imgs/microbit_record_guide.svg b/src/imgs/microbit_record_guide.svg
similarity index 100%
rename from public/imgs/microbit_record_guide.svg
rename to src/imgs/microbit_record_guide.svg
diff --git a/public/imgs/microbit_unaltered.svg b/src/imgs/microbit_unaltered.svg
similarity index 100%
rename from public/imgs/microbit_unaltered.svg
rename to src/imgs/microbit_unaltered.svg
diff --git a/public/imgs/model.svg b/src/imgs/model.svg
similarity index 100%
rename from public/imgs/model.svg
rename to src/imgs/model.svg
diff --git a/public/imgs/model_2.svg b/src/imgs/model_2.svg
similarity index 100%
rename from public/imgs/model_2.svg
rename to src/imgs/model_2.svg
diff --git a/public/imgs/model_3.svg b/src/imgs/model_3.svg
similarity index 100%
rename from public/imgs/model_3.svg
rename to src/imgs/model_3.svg
diff --git a/public/imgs/red_arrows.svg b/src/imgs/red_arrows.svg
similarity index 100%
rename from public/imgs/red_arrows.svg
rename to src/imgs/red_arrows.svg
diff --git a/public/imgs/right_arrow.svg b/src/imgs/right_arrow.svg
similarity index 100%
rename from public/imgs/right_arrow.svg
rename to src/imgs/right_arrow.svg
diff --git a/public/imgs/right_arrow_blue.svg b/src/imgs/right_arrow_blue.svg
similarity index 100%
rename from public/imgs/right_arrow_blue.svg
rename to src/imgs/right_arrow_blue.svg
diff --git a/public/imgs/select-microbit.png b/src/imgs/select-microbit.png
similarity index 100%
rename from public/imgs/select-microbit.png
rename to src/imgs/select-microbit.png
diff --git a/public/imgs/sidebar_background.svg b/src/imgs/sidebar_background.svg
similarity index 100%
rename from public/imgs/sidebar_background.svg
rename to src/imgs/sidebar_background.svg
diff --git a/public/imgs/stylised-battery-pack.svg b/src/imgs/stylised-battery-pack.svg
similarity index 100%
rename from public/imgs/stylised-battery-pack.svg
rename to src/imgs/stylised-battery-pack.svg
diff --git a/public/imgs/stylised-microbit-black.svg b/src/imgs/stylised-microbit-black.svg
similarity index 100%
rename from public/imgs/stylised-microbit-black.svg
rename to src/imgs/stylised-microbit-black.svg
diff --git a/public/imgs/stylised-microbit-connected.svg b/src/imgs/stylised-microbit-connected.svg
similarity index 100%
rename from public/imgs/stylised-microbit-connected.svg
rename to src/imgs/stylised-microbit-connected.svg
diff --git a/public/imgs/stylised-usb-cable.svg b/src/imgs/stylised-usb-cable.svg
similarity index 100%
rename from public/imgs/stylised-usb-cable.svg
rename to src/imgs/stylised-usb-cable.svg
diff --git a/public/imgs/stylised_computer.svg b/src/imgs/stylised_computer.svg
similarity index 100%
rename from public/imgs/stylised_computer.svg
rename to src/imgs/stylised_computer.svg
diff --git a/public/imgs/transfer_firmware.gif b/src/imgs/transfer_firmware.gif
similarity index 100%
rename from public/imgs/transfer_firmware.gif
rename to src/imgs/transfer_firmware.gif
diff --git a/public/imgs/transfer_firmware_chromeos.gif b/src/imgs/transfer_firmware_chromeos.gif
similarity index 100%
rename from public/imgs/transfer_firmware_chromeos.gif
rename to src/imgs/transfer_firmware_chromeos.gif
diff --git a/public/imgs/transfer_firmware_macos.gif b/src/imgs/transfer_firmware_macos.gif
similarity index 100%
rename from public/imgs/transfer_firmware_macos.gif
rename to src/imgs/transfer_firmware_macos.gif
diff --git a/public/imgs/transfer_firmware_windows.gif b/src/imgs/transfer_firmware_windows.gif
similarity index 100%
rename from public/imgs/transfer_firmware_windows.gif
rename to src/imgs/transfer_firmware_windows.gif
diff --git a/public/imgs/v1.svg b/src/imgs/v1.svg
similarity index 100%
rename from public/imgs/v1.svg
rename to src/imgs/v1.svg
diff --git a/public/imgs/v2.svg b/src/imgs/v2.svg
similarity index 100%
rename from public/imgs/v2.svg
rename to src/imgs/v2.svg
diff --git a/src/menus/TrainingMenu.svelte b/src/menus/TrainingMenu.svelte
index 4f98037e2..0ae7a8107 100644
--- a/src/menus/TrainingMenu.svelte
+++ b/src/menus/TrainingMenu.svelte
@@ -9,6 +9,7 @@
   import { state } from '../script/stores/uiStore';
   import { t } from '../i18n';
   import ImageSkeleton from '../components/skeletonloading/ImageSkeleton.svelte';
+  import modelImage from '../imgs/model.svg';
 </script>
 
 <div class="h-40 w-40 m-auto mt-2 flex flex-col justify-center">
@@ -16,7 +17,7 @@
     <div class="text-white text-center flex flex-col justify-center items-center">
       <ImageSkeleton
         alt="Model Icon"
-        src="imgs/model.svg"
+        src={modelImage}
         height={100}
         width={100}
         loadingColorPrimary="#68BDBF"
diff --git a/src/pages/Homepage.svelte b/src/pages/Homepage.svelte
index 98a2b65c0..f234e5d4b 100644
--- a/src/pages/Homepage.svelte
+++ b/src/pages/Homepage.svelte
@@ -5,6 +5,9 @@
  -->
 
 <script lang="ts">
+  import trainModelImage from '../imgs/TrainModel.svg';
+  import inputDataImage from '../imgs/InputData.svg';
+  import testModelImage from '../imgs/TestModel.svg';
   import FrontPageContentTile from '../components/FrontPageContentTile.svelte';
   import StandardButton from '../components/StandardButton.svelte';
   import { t } from '../i18n';
@@ -46,11 +49,7 @@
           <h2 class="text-center text-3xl mb-5">
             {$t('content.index.toolProcessCards.data.title')}
           </h2>
-          <img
-            class="mb-5"
-            alt="add data"
-            src="/imgs/InputData.svg"
-            width={tileImageSize} />
+          <img class="mb-5" alt="add data" src={inputDataImage} width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.data.description')}
           </p>
@@ -63,7 +62,7 @@
           <img
             class="mb-5"
             alt="train model"
-            src="/imgs/TrainModel.svg"
+            src={trainModelImage}
             width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.train.description')}
@@ -74,11 +73,7 @@
           <h2 class="text-center text-3xl mb-5">
             {$t('content.index.toolProcessCards.model.title')}
           </h2>
-          <img
-            class="mb-5"
-            alt="test model"
-            src="/imgs/TestModel.svg"
-            width={tileImageSize} />
+          <img class="mb-5" alt="test model" src={testModelImage} width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.model.description')}
           </p>
diff --git a/src/pages/model/ModelPageStackView.svelte b/src/pages/model/ModelPageStackView.svelte
index 1382e4ca0..15dfafbbb 100644
--- a/src/pages/model/ModelPageStackView.svelte
+++ b/src/pages/model/ModelPageStackView.svelte
@@ -23,6 +23,7 @@
   import Microbits from '../../script/microbit-interfacing/Microbits';
   import TrainModelFirstTitle from '../../components/TrainModelFirstTitle.svelte';
   import OutputGesture from '../../components/output/OutputGesture.svelte';
+  import downArrowImage from '../../imgs/down_arrow.svg';
 
   // In case of manual classification, variables for evaluation
   let recordingTime = 0;
@@ -155,7 +156,7 @@
             <div class="text-center ml-0 mb-2 mt-8">
               <img
                 class="m-auto arrow-filter-color"
-                src="/imgs/down_arrow.svg"
+                src={downArrowImage}
                 alt="down arrow icon"
                 width="80px" />
             </div>
diff --git a/src/router/Router.svelte b/src/router/Router.svelte
index a8505a0c2..7a7ba2e5e 100644
--- a/src/router/Router.svelte
+++ b/src/router/Router.svelte
@@ -40,7 +40,10 @@
     }
 
     if (shouldPushState) {
-      const url = window.location.origin + (path.startsWith('/') ? '' : '/') + path;
+      const url =
+        window.location.origin +
+        import.meta.env.BASE_URL +
+        (path.startsWith('/') ? path.slice(1) : path);
       history.pushState({ path: path }, '', url);
     }
   };
diff --git a/tsconfig.json b/tsconfig.json
index 0578c26f6..caf32dc63 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
     "src/setup_tests.ts"
   ],
   "compilerOptions": {
-    "module": "ES6",
+    "module": "ESNext",
     "lib": [
       "DOM",
       "ES6",
diff --git a/vite.config.ts b/vite.config.ts
index 20bfcb469..34d742688 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,7 @@ import EnvironmentPlugin from 'vite-plugin-environment';
 
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
+  base: process.env.BASE_URL ?? '/',
   plugins: [
     svelte({
       preprocess: sveltePreprocess({ typescript: true }),
@@ -66,4 +67,4 @@ create file .vscode/settings.json and place
   }
 
   Add configuration values as needed.
- */
\ No newline at end of file
+ */