Use public url instead of s3 bucket (#154)

Use the PUBLIC_URL env var to set URLs for the various bundles, shims, replacing REACT_APP_S3_BUCKET to allow assets to be served from sub directories in our S3 bucket.

* Moves web component port to 3001 from 9000 to avoid clashes with auth
* Replace REACT_APP_S3_BUCKET with PUBLIC_URL everywhere
* Rename the web-component bundle.js to web-component.js
* Use the Webpack HTML plugin to build the web component index.html as web-component.html, and inject the bundle correctly into the body.
* The web-component index is now build/web-component.html.
* Adds Cypress tests to GH actions
* Add a delay to CircleCI to start cypress only after the services had started.

The web component works, served straight from S3, picking up the asset paths correctly:  However, the editor itself does not, because it makes the assumption it is being served form the root directory. I think that is too big to cover off in this PR, and maybe we should address it in a different way.

Author: patch0

.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])