Back button refresh / deploy refresh automation (#11)

* refresh on back

* test deploy automation

* publicpath smh

* testing 30s

* delay comment

* add todo for font, fix env check

* fix test build workflow

* last cleanup todos?

* KioWare testing

* KioWare testing

* Reset refreshinterval

* Reset title

* remove back button

.env.staging

@@ -1,3 +1,3 @@
-NODE_ENV=production
-VUE_APP_ROOT_API=
-VUE_APP_HOST_ADDRESS=
+NODE_ENV=production
+VUE_APP_ROOT_API=
+VUE_APP_HOST_ADDRESS=http://sustainability-kiosks.s3-website-us-west-2.amazonaws.com

.github/workflows/test-build-s3.yml

@@ -0,0 +1,35 @@
+name: S3 Test Build
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build-deploy-s3:
+    name: Build / Deploy to S3 Test Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set-up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+      - name: AWS Creds
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-west-2
+      - name: npm install
+        run: |
+          npm install
+      - name: npm build frontend
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+        run: |
+          npm run build-stage
+      - name: deploy frontend to s3
+        run: |
+          aws s3 sync ./dist s3://sustainability-kiosks
+

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --open",
-    "build": "vue-cli-service build",
+    "build": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build --mode=production",
+    "build-stage": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build --mode staging",
     "lint": "vue-cli-service lint",
     "prettier": "prettier --write **/*.{js,ts,tsx,json,html,md,css,scss,vue}",
     "format": "npm-run-all --continue-on-error prettier \"lint -- --fix\""

src/App.vue

@@ -19,24 +19,86 @@
 export default {
   name: 'App',
   components: {},
-  async created () {},
+  async created () {
+    // For future reference on how back button doesn't clear cache (for MU kiosk)
+    // https://stackoverflow.com/a/75952012
+    // https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angular
+
+    // turned off for local development for reasons explained in "watch: " section
+    if (process.env.NODE_ENV !== 'development') {
+      this.timer = setInterval(
+        this.fetchLastModified,
+        this.refreshInterval * 1000
+      ) // setInterval expects milliseconds
+    }
+  },
   data () {
     return {
       card: {
         name: 'foo'
-      }
+      },
+      timer: '',
+      url: process.env.VUE_APP_HOST_ADDRESS,
+      modifiedDateUnix: 0,
+      timeDiffUnix: 0,
+      refreshInterval: 600 // 10 minutes refresh interval. Time in seconds (lower for debug)
+    }
+  },
+  methods: {
+    fetchLastModified () {
+      // https://stackoverflow.com/questions/36572540/vue-js-auto-reload-refresh-data-with-timer
+      // https://stackoverflow.com/a/74967740
+      fetch(this.url, { method: 'HEAD' }).then((r) => {
+        // string for when kiosk prod / staging was last modified, e.g. "Tue Apr 09 2024 14:29:24 GMT-0700 (Pacific Daylight Time)"
+        let modifiedDateString = new Date(r.headers.get('Last-Modified'))
+
+        // time in seconds for when kiosk prod / staging was last modified
+        this.modifiedDateUnix = Math.floor(modifiedDateString / 1000)
+
+        // time in seconds between last time kiosk prod / staging was modified and now
+        this.timeDiffUnix =
+          Math.floor(Date.now() / 1000) - this.modifiedDateUnix
+
+        // Log the modifiedDateUnix and timeDiffUnix here if needed for debug
+      })
+    },
+    cancelAutoUpdate () {
+      clearInterval(this.timer)
     }
   },
-  beforeDestroy () {},
-  methods: {},
-  watch: {}
+  beforeDestroy () {
+    this.cancelAutoUpdate()
+  },
+  watch: {
+    // modifiedDateUnix is checked periodically as defined by this.refreshInterval
+    // if the modifiedDateUnix changes (not counting initial load), the page is reloaded
+    // https://v2.vuejs.org/v2/guide/computed.html#Watchers
+    modifiedDateUnix: function (newDate, oldDate) {
+      console.log(oldDate)
+      // NOTE: undefined last modified date (like on local dev) means the "oldDate" will always be 0
+      // It is recommended to test the refresh functionality on preview S3 deployment
+      if (oldDate !== 0) {
+        console.log('page reloading in 10 seconds')
+        setTimeout(() => {
+          window.location.reload()
+        }, 10000)
+      }
+    }
+  }
 }
 </script>
 
 <style>
 @import url("https://fonts.googleapis.com/css?family=Open+Sans");
 @font-face {
   font-family: "StratumNo2";
+  /* TODO: Fix this sometime to dynamically change the Font URL prefix based on environment
+     In the meantime, use these prefixes (RESET TO PRODUCTION PREFIX BEFORE MERGE!):
+      - local / staging:
+        - "/fonts/"
+      - production:
+        - "/sustainability-kiosks/fonts/"
+  */
   src: url("/sustainability-kiosks/fonts/StratumNo2-Bold.woff2") format("woff2"),
     url("/sustainability-kiosks/fonts/StratumNo2-Bold.woff") format("woff"),
     url("/sustainability-kiosks/fonts/StratumNo2-Bold.ttf") format("truetype"),

vue.config.js

@@ -39,5 +39,9 @@ module.exports = {
     }
   },
   publicPath:
-    process.env.NODE_ENV === 'production' ? '/sustainability-kiosks/' : '/'
+    process.env.NODE_ENV === 'production' &&
+    process.env.VUE_APP_HOST_ADDRESS ===
+      'https://osu-sustainability-office.github.io/sustainability-kiosks/'
+      ? '/sustainability-kiosks/'
+      : '/'
 }