Use public url instead of s3 bucket

.circleci/config.yml

@@ -63,8 +63,11 @@ jobs:
           name: Start web component server
           command: yarn run start:wc
           environment:
-            REACT_APP_S3_BUCKET: https://editor-images-test.s3.eu-west-2.amazonaws.com
+            PUBLIC_URL: http://localhost:3000
           background: true
+      - run:
+          name: Wait for services to be ready
+          command: dockerize -wait http://localhost:3000 -wait http://localhost:3001 -timeout 120s
       - run:
           name: Cypress integration tests
           command: yarn exec cypress run

.env.example

@@ -2,4 +2,4 @@ REACT_APP_AUTHENTICATION_CLIENT_ID='editor-dev'
 REACT_APP_AUTHENTICATION_URL='http://localhost:9000'
 REACT_APP_LOGIN_ENABLED='true'
 REACT_APP_API_ENDPOINT='http://localhost:3009'
-REACT_APP_S3_BUCKET='http://localhost:3000'
+PUBLIC_URL='http://localhost:3000'

.env.webcomponent.example

@@ -1 +1,2 @@
-REACT_APP_S3_BUCKET='http://localhost:3000'
+# NB This is the URL of react-ui, rather than the web component
+PUBLIC_URL=http://localhost:3000

.github/workflows/main.yml

@@ -3,12 +3,11 @@ name: Build and Upload to S3
 on:
   push:
     branches:
-      -  main
-      - 'feature/**'
-      - 'issues/**'
+      - '*'
     tags:
       - '*'
 
+
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -49,8 +48,7 @@ jobs:
     - name: Run tests
       run: yarn test
 
-  build-deploy:
-    needs: test
+  test-cypress:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
@@ -61,14 +59,35 @@ jobs:
       with:
         node-version: 16
         cache: 'yarn'
-  
+
     - name: Install code
       run: yarn install --frozen-lock-file
 
-    - name: Build site and WC bundle
-      run: |
-        yarn build
-        yarn build:wc
+    - name: Cypress run
+      uses: cypress-io/github-action@v4
+      with:
+        install: false
+        start: |
+          yarn start
+          yarn start:wc
+        wait-on: 'http://localhost:3000, http://localhost:3001'
+      env:
+        PUBLIC_URL: 'http://localhost:3000'
+
+  build-deploy:
+    needs:
+      - test
+      - test-cypress
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v1
+
+    - name: Cache dependencies
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'yarn'
 
     - name: Configure AWS credentials
       uses: aws-actions/configure-aws-credentials@v1
@@ -102,5 +121,20 @@ jobs:
         fi
       shell: bash
 
+    - name: Set PUBLIC_URL
+      run: |
+        public_url=https://${{ env.bucket }}.s3.eu-west-2.amazonaws.com/${{ env.deploy_dir }}
+        echo "Setting PUBLIC_URL to $public_url"
+        echo PUBLIC_URL=$public_url >> $GITHUB_ENV
+      shell: bash
+
+    - name: Install code
+      run: yarn install --frozen-lock-file
+
+    - name: Build site and WC bundle
+      run: |
+        yarn build
+        yarn build:wc
+
     - name: Deploy site to S3 bucket
       run: aws s3 sync ./build/ s3://${{ env.bucket }}/${{ env.deploy_dir }} --delete

README.md

@@ -51,7 +51,7 @@ The repo includes the Editor Web Component which shares components with the edit
 ### `yarn stat:wc`
 
 Runs the web component in development mode.
-Open [http://localhost:9000](http://localhost:9000) to view it in the browser.
+Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
 
 There is no production build setup for the web component at present.
 

cypress/e2e/missionZero-wc.cy.js

@@ -1,4 +1,4 @@
-const baseUrl = "http://localhost:9000"
+const baseUrl = "http://localhost:3001"
 
 beforeEach(() => {
   cy.visit(baseUrl)

cypress/e2e/spec-wc.cy.js

@@ -1,4 +1,4 @@
-const baseUrl = "http://localhost:9000"
+const baseUrl = "http://localhost:3001"
 
 beforeEach(() => {
   cy.visit(baseUrl)

docker-compose.yml

@@ -14,7 +14,7 @@ services:
     build: .
     command: yarn start:wc
     ports:
-      - "9000:9000"
+      - "3001:3001"
     container_name: react-ui-wc
     stdin_open: true
     volumes:

docs/WebComponent.md

@@ -7,7 +7,7 @@ To have the web component be able to use the same React components as the site a
 
 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.
 
-In `public/web-component/index.html` the JavaScript output is added and the web-component mounted. Then viewing `http://localhost:9000` will load the page with the web component mounted.
+In `public/web-component/index.html` the JavaScript output is added and the web-component mounted. Then viewing `http://localhost:3001` will load the page with the web component mounted.
 
 ## WebComponent Class
 

src/components/AstroPiModel/FlightCase.js

@@ -9,9 +9,9 @@ import Sk from "skulpt";
 
 const FlightCase = () => {
 
-  const gltf = useLoader(GLTFLoader, `${process.env.REACT_APP_S3_BUCKET}/models/raspi-compressed.glb`, loader => {
+  const gltf = useLoader(GLTFLoader, `${process.env.PUBLIC_URL}/models/raspi-compressed.glb`, loader => {
     const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath( `${process.env.REACT_APP_S3_BUCKET}/three/examples/js/libs/draco/` );
+    dracoLoader.setDecoderPath( `${process.env.PUBLIC_URL}/three/examples/js/libs/draco/` );
     loader.setDRACOLoader( dracoLoader );
   })
   window.mod=gltf.scene
@@ -21,17 +21,17 @@ const FlightCase = () => {
     var y = Math.floor(ledIndex / 8);
     var newMaterial = new THREE.MeshStandardMaterial({color: `rgb(${r},${g},${b})`});
     var object = gltf.scene.getObjectByName(`circle${x}_${7-y}-1`);
-  
+
     if(object != null){
       object.material = newMaterial;
     }
   }
-  
+
   function setPixels(indexes, pix) {
     if(indexes == null){
       indexes = Array.from(Array(8*8).keys())
     }
-  
+
     var i = 0;
     for (const ledIndex of indexes){
       setPixel(ledIndex, pix[i][0], pix[i][1], pix[i][2])

src/components/Editor/Runners/PythonRunner/PythonRunner.js

@@ -55,23 +55,23 @@ const PythonRunner = () => {
 
   const externalLibraries = {
     "./pygal/__init__.js": {
-      path: `${process.env.REACT_APP_S3_BUCKET}/pygal.js`,
+      path: `${process.env.PUBLIC_URL}/pygal.js`,
       dependencies: [
         'https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/highcharts.js',
         'https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/js/highcharts-more.js'
       ],
     },
     "./p5/__init__.js": {
-      path: `${process.env.REACT_APP_S3_BUCKET}/p5-shim.js`,
+      path: `${process.env.PUBLIC_URL}/p5-shim.js`,
       dependencies: [
         'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js'
       ]
     },
     "./_internal_sense_hat/__init__.js": {
-      path: `${process.env.REACT_APP_S3_BUCKET}/_internal_sense_hat.js`
+      path: `${process.env.PUBLIC_URL}/_internal_sense_hat.js`
     },
     "./sense_hat.py": {
-      path: `${process.env.REACT_APP_S3_BUCKET}/sense_hat_blob.py`
+      path: `${process.env.PUBLIC_URL}/sense_hat_blob.py`
     }
   };
 

public/web-component/index.html → src/web-component.html

@@ -7,7 +7,6 @@
   </head>
   <body>
     <editor-wc code="print('Hello component')"></editor-wc>
-    <script src="./bundle.js"></script>
     <p id="results"></p>
   </body>
 

webpack.component.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const Dotenv = require('dotenv-webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   entry: path.resolve(__dirname, './src/web-component.js'),
@@ -38,21 +39,25 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, './build'),
-    filename: 'bundle.js',
+    filename: 'web-component.js',
   },
   devServer: {
-    allowedHosts: [
-      'react-ui-test-wc'
-    ],
-    contentBase: path.resolve(__dirname, './public/web-component'),
+    allowedHosts: [ 'react-ui-test-wc' ],
+    contentBase: path.join(__dirname, 'public'),
+    index: 'web-component.html',
     host: "0.0.0.0",
-    port: 9000,
+    port: 3001,
     writeToDisk: true,
   },
   plugins: [
     new Dotenv({
       path: './.env.webcomponent',
       systemvars: true
+    }),
+    new HtmlWebpackPlugin({
+      inject: 'body',
+      template: 'src/web-component.html',
+      filename: 'web-component.html',
     })
   ]
 };