[PR] Node 18, Automation, PR build update

.env.development

@@ -1,9 +1,9 @@
-/*
- * @Author: you@you.you
- * @Date:   Tuesday May 5th 2020
- * @Last Modified By:  Brogan Miner
- * @Last Modified Time:  Tuesday May 5th 2020
- * @Copyright:  (c) Oregon State University 2020
- */
-VUE_APP_ROOT_API=https://api.sustainability.oregonstate.edu/v2/map
-VUE_APP_HOST_ADDRESS=http://localhost:8080
+/*
+ * @Author: you@you.you
+ * @Date:   Tuesday May 5th 2020
+ * @Last Modified By:  Brogan Miner
+ * @Last Modified Time:  Tuesday May 5th 2020
+ * @Copyright:  (c) Oregon State University 2020
+ */
+VUE_APP_ROOT_API=http://localhost:3000
+VUE_APP_HOST_ADDRESS=http://localhost:8080

.eslintrc.js

@@ -14,31 +14,27 @@ module.exports = {
     parser: 'babel-eslint'
   },
   env: {
-    browser: true,
+    browser: true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/essential',
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard'
-
   ],
   // required to lint *.vue files
-  plugins: [
-    'vue',
-    'strict-vue'
-  ],
+  plugins: ['vue', 'strict-vue'],
   // add your custom rules here
   rules: {
     // allow async-await
     'no-multi-spaces': 'off',
     'generator-star-spacing': 'off',
-    'camelcase' : [0, { 'properties': 'never' }],
-    "strict-vue/require-jsdoc": "off",
-		"strict-vue/no-root-store-calls": "error",
-    "strict-vue/no-root-store-assets": "error",
-    "vue/no-use-v-if-with-v-for": 'off',
+    camelcase: [0, { properties: 'never' }],
+    'strict-vue/require-jsdoc': 'off',
+    'strict-vue/no-root-store-calls': 'error',
+    'strict-vue/no-root-store-assets': 'error',
+    'vue/no-use-v-if-with-v-for': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }

.github/workflows/gh-deploy.yml

@@ -1,30 +1,32 @@
-name: gh pages
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build-deploy-gh-pages:
-    name: Build / Deploy to gh-pages
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Set-up Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - name: npm install
-        run: |
-          npm install
-      - name: npm build frontend
-        run: |
-          npm run build
-      - name: deploy frontend to gh pages
-        uses: crazy-max/ghaction-github-pages@v3     # https://github.com/crazy-max/ghaction-github-pages
-        with:
-          target_branch: gh-pages
-          build_dir: dist
-        env:
+name: gh pages
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-deploy-gh-pages:
+    name: Build / Deploy to gh-pages
+    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: npm install
+        run: |
+          npm install
+      - name: npm build frontend
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+        run: |
+          npm run build
+      - name: deploy frontend to gh pages
+        uses: crazy-max/ghaction-github-pages@v3     # https://github.com/crazy-max/ghaction-github-pages
+        with:
+          target_branch: gh-pages
+          build_dir: dist
+        env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-workflow.yml

@@ -1,24 +1,25 @@
-name: test build
-on:
-  push:
-    branches-ignore:
-      - master
-      - gh-pages
-
-jobs:
-  build-deploy-gh-pages:
-    name: Test Build (No Deploy)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Set-up Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - name: npm install
-        run: |
-          npm install
-      - name: npm build frontend
-        run: |
+name: test build
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build-deploy-gh-pages:
+    name: Test Build (No Deploy)
+    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: npm install
+        run: |
+          npm install
+      - name: npm build frontend
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+        run: |
           npm run build-stage

README.md

@@ -1,32 +1,33 @@
 # Sustainability Map ![Frontend Status](https://github.com/OSU-Sustainability-Office/sustainability_map/actions/workflows/gh-deploy.yml/badge.svg)![Test Build Status](https://github.com/OSU-Sustainability-Office/sustainability_map/actions/workflows/test-workflow.yml/badge.svg)
-An interactive map showing the sustainability features available at Oregon State University's Corvallis campus! 
 
+An interactive map showing the sustainability features available at Oregon State University's Corvallis campus!
 
 ## Installation Steps
+
 - Clone the repo
-- Use nvm to get node version 16 (```nvm install 16 && nvm use 16```)
+- Use nvm to get node version 18 (```nvm install 16 && nvm use 18```)
 - ```npm install```
 - ```npm run serve``` to test-run the website
 
 
 ## Notes about the build process:
 
-The source code (under `src`) gets automatically bundled by vue-cli (which uses webpack) into compact static assets under `public`, additional static assets dependent on outside sources (e.g. OSU building geometry from Open Street Maps) get created before the vue-cli webpack build via scripts under the `util` directory.  
-
+The source code (under `src`) gets automatically bundled by vue-cli (which uses webpack) into compact static assets under `public`, additional static assets dependent on outside sources (e.g. OSU building geometry from Open Street Maps) get created before the vue-cli webpack build via scripts under the `util` directory.
 
 ## Helpful References for Development
- - [Hjson Reference](https://hjson.github.io/)
- - [BBox Tool](http://norbertrenner.de/osm/bbox.html)
- - [OSU Rainwater Brohcure](https://fa.oregonstate.edu/sites/fa.oregonstate.edu/files/2021-07/stormwater_brochure_v12.pdf)
- - [OSU Sustainability Office Website](https://fa.oregonstate.edu/sustainability/about)
- - [OSU Sustainability Office Ecologue](https://blogs.oregonstate.edu/ecologue/)
- - [Overpass Turbo](https://overpass-turbo.eu/#)
- - [Overpass API](https://dev.overpass-api.de/overpass-doc/en/)
- - [OpenStreetMap](https://www.openstreetmap.org/#map=15/44.5649/-123.2782)
- - [GeoJSON specification](https://datatracker.ietf.org/doc/html/rfc7946)
- - [Leaflet GeoJSON Features](https://leafletjs.com/examples/geojson/)
- - [Leaflet Quickstart Guide](https://leafletjs.com/examples/quick-start/)
- - [Official Leaflet Docs](https://leafletjs.com/reference-1.6.0.html)
- - [Vue2Leaflet GitHub Page](https://github.com/vue-leaflet/Vue2Leaflet)
- - [Vue2Leaflet Docs](https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api)
- - [Vuex Store Docs](https://vuex.vuejs.org/)
+
+- [Hjson Reference](https://hjson.github.io/)
+- [BBox Tool](http://norbertrenner.de/osm/bbox.html)
+- [OSU Rainwater Brohcure](https://fa.oregonstate.edu/sites/fa.oregonstate.edu/files/2021-07/stormwater_brochure_v12.pdf)
+- [OSU Sustainability Office Website](https://fa.oregonstate.edu/sustainability/about)
+- [OSU Sustainability Office Ecologue](https://blogs.oregonstate.edu/ecologue/)
+- [Overpass Turbo](https://overpass-turbo.eu/#)
+- [Overpass API](https://dev.overpass-api.de/overpass-doc/en/)
+- [OpenStreetMap](https://www.openstreetmap.org/#map=15/44.5649/-123.2782)
+- [GeoJSON specification](https://datatracker.ietf.org/doc/html/rfc7946)
+- [Leaflet GeoJSON Features](https://leafletjs.com/examples/geojson/)
+- [Leaflet Quickstart Guide](https://leafletjs.com/examples/quick-start/)
+- [Official Leaflet Docs](https://leafletjs.com/reference-1.6.0.html)
+- [Vue2Leaflet GitHub Page](https://github.com/vue-leaflet/Vue2Leaflet)
+- [Vue2Leaflet Docs](https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api)
+- [Vuex Store Docs](https://vuex.vuejs.org/)

babel.config.js

@@ -5,9 +5,7 @@
 
 module.exports = function (api) {
   api.cache(true)
-  const presets = [
-    '@vue/app'
-  ]
+  const presets = ['@vue/app']
   return {
     presets
   }

backend/app/layer.js

@@ -6,26 +6,28 @@
  * @Copyright:  (c) Your Company 2019
  */
 
-const DB = require('/opt/nodejs/test-sql-access.js')
-const Layer = require('/opt/nodejs/models/layer.js')
-const Response = require('/opt/nodejs/response.js')
-const User = require('/opt/nodejs/user.js')
+const DB = require("/opt/nodejs/test-sql-access.js");
+const Layer = require("/opt/nodejs/models/layer.js");
+const Response = require("/opt/nodejs/response.js");
+const User = require("/opt/nodejs/user.js");
 
 // return all of the layers
 exports.get = async (event, context) => {
-  let response = new Response(event)
+  let response = new Response(event);
 
   // Connect to the database
-  await DB.connect()
+  await DB.connect();
 
   // Get a list of all layers
-  const data = await DB.query("SELECT * FROM layer")
+  const data = await DB.query("SELECT * FROM layer");
 
   // Create an array of Layer instances
-  const layers = data.map( layer => new Layer(layer.layer_id, layer.name, layer.color, layer.icon) )
+  const layers = data.map(
+    (layer) => new Layer(layer.layer_id, layer.name, layer.color, layer.icon)
+  );
 
   // Return the array to the user
-  response.body = JSON.stringify(layers)
+  response.body = JSON.stringify(layers);
 
-  return response
-}
+  return response;
+};

backend/app/point.js

@@ -5,51 +5,56 @@
  * @Last Modified Time:  Thursday September 5th 2019
  * @Copyright:  (c) Your Company 2019
  */
-const DB = require('/opt/nodejs/test-sql-access.js')
-const Point = require('/opt/nodejs/models/point.js')
-const Response = require('/opt/nodejs/response.js')
-const User = require('/opt/nodejs/user.js')
+const DB = require("/opt/nodejs/test-sql-access.js");
+const Point = require("/opt/nodejs/models/point.js");
+const Response = require("/opt/nodejs/response.js");
+const User = require("/opt/nodejs/user.js");
 
 exports.get = async (event, context) => {
-  let response = new Response(event)
+  let response = new Response(event);
   // Get 1 point if the user specifies an ID
   if (event.queryStringParameters && event.queryStringParameters.id) {
     // if queryStringParameters exists and queryStringParameters.id exists (both are not null)
-    let point = new Point(event.queryStringParameters.id)
+    let point = new Point(event.queryStringParameters.id);
 
     // download the point's data
     try {
-      await point.download()
+      await point.download();
 
       // Format the response
-      response.body = JSON.stringify([point])
+      response.body = JSON.stringify([point]);
     } catch (e) {
       // 404 if the point is not found
-      response.statusCode = 404
-      response.body = JSON.stringify(e)
+      response.statusCode = 404;
+      response.body = JSON.stringify(e);
     }
-    return response
+    return response;
   }
 
   // Get all points if the user did not specify an ID
   // Connect to the database
-  await DB.connect()
+  await DB.connect();
 
   // Get a list of all points
-  const data = await DB.query("SELECT * FROM point")
+  const data = await DB.query("SELECT * FROM point");
 
   // Create an array of Point instances
-  const points = data.map(point => new Point(point.mapId,
-    point.name,
-    point.image,
-    point.description,
-    point.visible,
-    point.type,
-    point.tags,
-    point.layer_id,
-    point.osmType))
+  const points = data.map(
+    (point) =>
+      new Point(
+        point.mapId,
+        point.name,
+        point.image,
+        point.description,
+        point.visible,
+        point.type,
+        point.tags,
+        point.layer_id,
+        point.osmType
+      )
+  );
 
   // Return the array to the user
-  response.body = JSON.stringify(points)
-  return response
-}
+  response.body = JSON.stringify(points);
+  return response;
+};