microbit-foundation · microbit-matt-hillsdon · Mar 15, 2024 · Mar 11, 2024 · Mar 11, 2024 · Mar 11, 2024
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
+VITE_VERSION=$npm_package_version
+VITE_NAME=$npm_package_name
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
       PRODUCTION_CLOUDFRONT_DISTRIBUTION_ID: E2ELTBTA2OFPY2
       STAGING_CLOUDFRONT_DISTRIBUTION_ID: E2ELTBTA2OFPY2
       REVIEW_CLOUDFRONT_DISTRIBUTION_ID: E3267W09ZJHQG9
-      REACT_APP_FOUNDATION_BUILD: ${{ github.repository_owner == 'microbit-foundation' }}
+      VITE_FOUNDATION_BUILD: ${{ github.repository_owner == 'microbit-foundation' }}
 
     steps:
       # Note: This workflow disables deployment steps and micro:bit branding installation on forks.
@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/[email protected]dev.31 @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/[email protected]vite.33 @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -46,9 +46,9 @@ jobs:
         if: github.repository_owner == 'microbit-foundation'
       - run: npm run ci
         env:
-          REACT_APP_GA_COOKIE_PREFIX: ${{ secrets.REACT_APP_GA_COOKIE_PREFIX }}
-          REACT_APP_GA_MEASUREMENT_ID: ${{ secrets.GA_MEASUREMENT_ID }}
-          REACT_APP_SENTRY_DSN: ${{ secrets.REACT_APP_SENTRY_DSN }}
+          VITE_GA_COOKIE_PREFIX: ${{ secrets.VITE_GA_COOKIE_PREFIX }}
+          VITE_GA_MEASUREMENT_ID: ${{ secrets.GA_MEASUREMENT_ID }}
+          VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
       - run: mkdir -p /tmp/app${PUBLIC_URL} && cp -r build/* /tmp/app${PUBLIC_URL} && npx serve --no-clipboard -l 3000 /tmp/app &
         if: env.STAGE == 'REVIEW' || env.STAGE == 'STAGING'
       - run: curl --insecure -4 --retry 7 --retry-connrefused http://localhost:3000 1>/dev/null

diff --git a/bin/print-ci-env-stage.js b/bin/print-ci-env-stage.js
@@ -10,4 +10,4 @@ if (ref === "refs/heads/main") {
 }
 
 console.log(`STAGE=${stage}`);
-console.log(`REACT_APP_STAGE=${stage}`);
+console.log(`VITE_STAGE=${stage}`);
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <title>micro:bit Python Editor</title>
+    <meta property="og:title" content="micro:bit Python Editor" />
+    <link rel="canonical" href="%VITE_FULL_URL%" />
+    <meta property="og:url" content="%VITE_FULL_URL%" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@microbit_edu" />
+    <meta
+      property="og:description"
+      content="Built by the Micro:bit Educational Foundation and the global Python Community."
+    />
+    <meta
+      name="twitter:description"
+      content="A Python Editor for the BBC micro:bit, built by the Micro:bit Educational Foundation and the global Python Community."
+    />
+    <meta property="og:image" content="%VITE_FULL_URL%social.png" />
+    <!-- TODO: ejs support or similar likely via a tiny plugin
+    <% if (process.env.VITE_FOUNDATION_BUILD === 'true') { %>
+    <script
+      src="https://shared-assets.microbit.org/common/v1/common.js"
+      async
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://shared-assets.microbit.org/common/v1/main.css"
+    />
+    <script>
+      // GA config itself is via the common assets config depending on consent.
+      window.dataLayer = window.dataLayer || [];
+      window.gtag =
+        window.gtag ||
+        function () {
+          window.dataLayer.push(arguments);
+        };
+    </script>
+    <% } %>-->
+    <script type="module" src="/src/index.tsx"></script>
+  </head>
+  <body>
+    <noscript
+      >You need to enable JavaScript to run the Python Editor in your
+      browser.</noscript
+    >
+    <div id="root"></div>
+  </body>
+</html>