Foundation deployment

.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/[email protected] @microbit-foundation/[email protected] @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 }}

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}`);

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',
+    },
+  },
+};

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"

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 />

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()) {

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,
+      );
     });
   }
 }

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);

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">