Switch to Vite from Create React App

.env

@@ -1,2 +1,3 @@
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
+VITE_VERSION=$npm_package_version
+VITE_NAME=$npm_package_name
+VITE_FULL_URL=/

.eslintrc.cjs

@@ -0,0 +1,63 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    // We should switch to recommended-type-checked but there are many issues to review
+    "plugin:@typescript-eslint/recommended",
+    //"plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+  ],
+  ignorePatterns: [
+    "dist",
+    ".eslintrc.cjs",
+    "deployment.cjs",
+    "bin/**/*.js",
+    "bootstrap-template.js",
+    "playwright.config.ts",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["react-refresh"],
+  settings: {
+    react: {
+      version: "18",
+    },
+  },
+  rules: {
+    // More trouble than it's worth
+    "react/no-unescaped-entities": "off",
+    // False positives from library imports from Chakra UI
+    "@typescript-eslint/unbound-method": "off",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        checksVoidReturn: false,
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        args: "all",
+        argsIgnorePattern: "^_",
+        caughtErrors: "all",
+        // Let's remove e from here
+        caughtErrorsIgnorePattern: "^_|e",
+        destructuredArrayIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        ignoreRestSiblings: true,
+      },
+    ],
+    // Temporary, new rules on Vite migration that are widely flouted
+    "@typescript-eslint/no-explicit-any": "off",
+    "prefer-const": "off",
+    "react/display-name": "off",
+  },
+};

.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,20 +36,18 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/[email protected]dev.31 @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/[email protected]vite.35 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: node ./bin/print-ci-env-stage.js >> $GITHUB_ENV
-      - run: node ./bin/print-ci-env-public-url.js >> $GITHUB_ENV
+      - run: node ./bin/print-ci-env-stage.cjs >> $GITHUB_ENV
+      - run: node ./bin/print-ci-env-public-url.cjs >> $GITHUB_ENV
       - run: npm run ci:update-version
         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 }}
-      - run: mkdir -p /tmp/app${PUBLIC_URL} && cp -r build/* /tmp/app${PUBLIC_URL} && npx serve --no-clipboard -l 3000 /tmp/app &
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+      - run: mkdir -p /tmp/app${BASE_URL} && cp -r build/* /tmp/app${BASE_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
         if: env.STAGE == 'REVIEW' || env.STAGE == 'STAGING'

bin/print-ci-env-public-url.cjs

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+let baseUrl;
+if (process.env.GITHUB_REPOSITORY_OWNER === "microbit-foundation") {
+  // STAGE must be defined before this is imported
+  const { bucketPrefix, bucketName } = require("../deployment.cjs");
+  baseUrl = `/${bucketPrefix}/`;
+
+  const fullUrl = `https://${bucketName}${baseUrl}`;
+  // This is used for og:url and similar. Not quite right for review domain but we don't really care.
+  console.log(`VITE_FULL_URL=${fullUrl}`);
+} else {
+  baseUrl = "/";
+}
+
+// Two env vars as BASE_URL seems to be blank when running jest even if we set it.
+console.log(`BASE_URL=${baseUrl}`);
+console.log(`E2E_BASE_URL=${baseUrl}`);

bin/print-ci-env-stage.js → bin/print-ci-env-stage.cjs

@@ -10,4 +10,4 @@ if (ref === "refs/heads/main") {
 }
 
 console.log(`STAGE=${stage}`);
-console.log(`REACT_APP_STAGE=${stage}`);
+console.log(`VITE_STAGE=${stage}`);

public/index.html → index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%BASE_URL%favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#6c4bc1" />
     <title>micro:bit Python Editor</title>
@@ -11,26 +11,32 @@
       property="og:description"
       content="Built by the Micro:bit Educational Foundation and the global Python Community."
     />
-    <meta
-      property="og:image"
-      content="https://python.microbit.org%PUBLIC_URL%/social.png"
-    />
-    <meta name="twitter:card" content="summary_large_image" />
     <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."
     />
-    <% if (process.env.REACT_APP_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"></link>
+    <meta property="og:image" content="%VITE_FULL_URL%social.png" />
+    <% if (typeof VITE_FOUNDATION_BUILD !== 'undefined' && 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);
-      };
+      window.gtag =
+        window.gtag ||
+        function () {
+          window.dataLayer.push(arguments);
+        };
     </script>
     <% } %>
+    <script type="module" src="/src/index.tsx"></script>
   </head>
   <body>
     <noscript