Redundant editor code tidy up (#1103)

closes #1088

---------

Co-authored-by: Scott <scott.adams@raspberrypi.org>

.env.example

@@ -1,10 +1,10 @@
 REACT_APP_AUTHENTICATION_CLIENT_ID='editor-dev'
 REACT_APP_AUTHENTICATION_URL='http://localhost:9001'
+REACT_APP_SENTRY_DSN=''
+REACT_APP_SENTRY_ENV='local'
+PUBLIC_URL='http://localhost:3011'
+ASSETS_URL='http://localhost:3011'
 REACT_APP_API_ENDPOINT='http://localhost:3009'
 REACT_APP_GOOGLE_TAG_MANAGER_ID=''
 REACT_APP_PLAUSIBLE_DATA_DOMAIN=''
 REACT_APP_PLAUSIBLE_SOURCE=''
-REACT_APP_SENTRY_DSN=''
-REACT_APP_SENTRY_ENV='local'
-PUBLIC_URL='http://localhost:3011'
-ASSETS_URL='http://localhost:3010'

.github/workflows/ci-cd.yml

@@ -92,7 +92,7 @@ jobs:
         with:
           install: false
           start: |
-            yarn start:wc
+            yarn start
           wait-on: "http://localhost:3011"
           quiet: true
         env:

.github/workflows/deploy.yml

@@ -128,7 +128,7 @@ jobs:
           if [[ "${{ inputs.environment }}" != "production" ]]; then
             yarn build:dev
           fi
-          yarn build:wc
+          yarn build
         env:
           PUBLIC_URL: ${{ needs.setup-environment.outputs.public_url }}
           ASSETS_URL: ${{ needs.setup-environment.outputs.assets_url }}

CHANGELOG.md

@@ -57,6 +57,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Enabling web component to find the `turtle` canvas (#1082)
 - Ability to stop code in the web component (#1083)
+- Remove redundant code (#1103)
 
 ## [0.27.0] - 2024-09-26
 

Dockerfile

@@ -18,6 +18,6 @@ RUN corepack enable \
 
 RUN yarn
 
-EXPOSE 3010
+EXPOSE 3011
 
 CMD ["yarn", "start"]

README.md

@@ -9,12 +9,9 @@ Copy the example files into the correct place:
 
 ```
 cp .env.example .env
-
-cp .env.webcomponent.example .env.webcomponent
 ```
 
-Variables for the web application need to go into the `.env` file.
-Variables for the web component can be placed in `.env.webcomponent`.
+Variables for the web component can be placed in `.env`.
 
 ## Private repo setup (.npmrc)
 
@@ -32,7 +29,7 @@ In the project directory, you can run:
 ### `yarn start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3010](http://localhost:3010) to view it in the browser.
+Open [http://localhost:3011](http://localhost:3011) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
@@ -57,8 +54,9 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework `Jest` and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
 
 Integration testing is carried out via `cypress` and can be run using:
-* `yarn exec cypress run` to run in the CLI
-* `yarn exec cypress open` to run in the GUI
+
+- `yarn exec cypress run` to run in the CLI
+- `yarn exec cypress open` to run in the GUI
 
 Currently, there are basic `cypress` tests for the standalone editor site, the web component and Mission Zero-related functionality. These can be found in the `cypress/e2e` directory. Screenshots and videos related to the most recent `cypress` test run can be found in `cypress/screenshots` and `cypress/videos` respectively.
 
@@ -80,12 +78,6 @@ The web component can be included in a page by using the `<editor-wc>` HTML elem
 - `embedded`: Enable embedded mode which hides some functionality (defaults to `false`)
 - `output_split_view`: Start with split view in output panel (defaults to `false`, i.e. tabbed view)
 
-### `yarn start:wc`
-
-Runs the web component in development mode. Open [http://localhost:3011](http://localhost:3011) to view it in the browser.
-
-**NB** You need to have the main `yarn start` process running too.
-
 It is possible to add query strings to control how the web component is configured. Any HTML attribute can be set on the query string, including `class`, `style` etc.
 
 For example, to load the page with the Sense Hat always showing, add [`?sense_hat_always_enabled` to the URL](http://localhost:3011?sense_hat_always_enabled)

config/env.js

@@ -1,16 +1,14 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
 
 // Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
+delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    "The NODE_ENV environment variable is required but was not specified.",
   );
 }
 
@@ -20,7 +18,7 @@ const dotenvFiles = [
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  NODE_ENV !== "test" && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   paths.dotenv,
 ].filter(Boolean);
@@ -30,12 +28,12 @@ const dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
+    require("dotenv-expand")(
+      require("dotenv").config({
         path: dotenvFile,
-      })
+      }),
     );
   }
 });
@@ -50,10 +48,10 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
   .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
+  .filter((folder) => folder && !path.isAbsolute(folder))
+  .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -62,7 +60,7 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
@@ -71,7 +69,7 @@ function getClientEnvironment(publicUrl) {
       {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
+        NODE_ENV: process.env.NODE_ENV || "development",
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -90,12 +88,12 @@ function getClientEnvironment(publicUrl) {
         // react-refresh is not 100% stable at this time,
         // which is why it's disabled by default.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
+        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+      },
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
+    "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {}),

config/paths.js

@@ -54,8 +54,8 @@ module.exports = {
   appPath: resolveApp("."),
   appBuild: resolveApp(buildPath),
   appPublic: resolveApp("public"),
-  appHtml: resolveApp("src/index.html"),
-  appIndexJs: resolveModule(resolveApp, "src/index"),
+  appHtml: resolveApp("src/web-component.html"),
+  appIndexJs: resolveModule(resolveApp, "src/web-component"),
   appPackageJson: resolveApp("package.json"),
   appSrc: resolveApp("src"),
   appTsConfig: resolveApp("tsconfig.json"),

docker-compose.yml

@@ -14,7 +14,7 @@ x-app: &x-app
 services:
   react-ui-wc:
     <<: *x-app
-    command: yarn start:wc
+    command: yarn start
     ports:
       - "3011:3011"
     container_name: react-ui-wc

docs/WebComponent.md

@@ -2,7 +2,7 @@
 
 To have the web component be able to use the same React components as the site application there needed to be a separate start script for the component. This required being able to customise how build was done and meant the `create-react-app` needed to be ejected. This copies configuration files into the project instead of running it all in create-react-app scripts.
 
-There is a custom webpack config file for the component `webpack.component.config.js` and a script in the `package.json`: `start:wc` which will start serving the web component.
+There is a custom webpack config file for the component `webpack.config.js` and a script in the `package.json`: `start` which will start serving the web component.
 
 In `public/web-component/index.html` the JavaScript output is added and the web-component mounted. Then viewing `http://localhost:3011` will load the page with the web component mounted.
 

package.json

@@ -80,7 +80,8 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "node scripts/start.js",
+    "start": "NODE_ENV=development BABEL_ENV=development webpack serve -c ./webpack.config.js",
+    "build": "NODE_ENV=production BABEL_ENV=production webpack build -c ./webpack.config.js",
     "build:dev": "yarn install --check-cache && yarn run build-storybook",
     "build-storybook": "cd ./storybook && yarn install && yarn run build-storybook -- -o ../public/storybook --loglevel warn",
     "lint": "eslint \"src/**/*.{js,jsx,json}\"",
@@ -89,9 +90,7 @@
     "test": "node scripts/test.js --transformIgnorePatterns 'node_modules/(?!three)/'",
     "storybook": "cd storybook && rm -rf ./node_modules/.cache/storybook && yarn run storybook",
     "watch-css": "sass --load-path=./ -q --watch src:src",
-    "start:wc": "NODE_ENV=development BABEL_ENV=development webpack serve -c ./webpack.component.config.js",
-    "build:wc": "NODE_ENV=production BABEL_ENV=production webpack build -c ./webpack.component.config.js",
-    "heroku-postbuild": "export PUBLIC_URL='' && yarn build && yarn build:wc"
+    "heroku-postbuild": "export PUBLIC_URL='' && yarn build"
   },
   "browserslist": {
     "production": [