Merge branch 'production'

.env

@@ -0,0 +1 @@
+VITE_PUBLICPATH=/zoning-summary-generator/

.github/workflows/prod_push_to_s3.yml

@@ -1,22 +1,41 @@
-name: Build and deploy to S3
+name: production Build and deploy to S3 
 on:
   push:
     branches:
-      - master
+      - production
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+
     permissions:
       id-token: write
       contents: read
+
     steps:
     - name: Checkout
       uses: actions/checkout@v4
+
+    - name: Use Node.js 20.x
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+
+    - name: npm install, and build
+      run: |
+        printf "@fortawesome:registry=https://npm.fontawesome.com/\n//npm.fontawesome.com/:_authToken=${FA_AUTH_TOKEN}" >> ~/.npmrc
+        npm ci
+        npm run build
+      env:
+        FA_AUTH_TOKEN: ${{ secrets.FA_AUTH_TOKEN }}
+
     - name: Configure AWS Credentials
       uses: aws-actions/configure-aws-credentials@v4
       with:
-        role-to-assume: arn:aws:iam::922311303087:role/github-actions@dpd-zoning-summary-generator@master
+        role-to-assume: arn:aws:iam::922311303087:role/github-actions@dpd-zoning-summary-generator@production
         aws-region: us-east-1
+
     - name: Deploy static site to S3 bucket
-      working-directory: ./
-      run: aws s3 sync ./ s3://dpd-zoning-summary-generator --delete
+      env:
+        AWS_S3_BUCKET: dpd-zoning-summary-generator
+      run: |
+        aws s3 sync dist s3://$AWS_S3_BUCKET --delete

README.md

@@ -1,4 +1,4 @@
-# vue-zoning-generator
+# Zoning-Generator
 
 This template should help get you started developing with Vue 3 in Vite.
 

src/App.vue

@@ -5,7 +5,7 @@ import { useRouter, useRoute } from 'vue-router';
 const router = useRouter();
 const route = useRoute();
 
-console.log('route:', route, 'route.params:', route.params);
+console.log('route:', route, 'route.params:', route.params, 'import.meta.env.VITE_PUBLICPATH:', import.meta.env.VITE_PUBLICPATH);
 
 </script>
 

src/components/Map.vue

@@ -564,7 +564,7 @@ const getZoningInfo = (place) => {
                         var bounds = drawPoly.getBounds()
                         map.flyToBounds(bounds);
                         console.log('router 3:', router);
-                        router.push({ name: 'address', params: { address: addy } });
+                        router.push({ name: 'address', query: { address: addy } });
                     }
                 });
                 var mydata = zoningCodeRules; //    identifies the zoning code rules in baseDistricts.json
@@ -1181,22 +1181,30 @@ onMounted(() => {
     
     document.getElementById("btnSearch").addEventListener("click", addr_search);
 
-    console.log('router:', router, 'route.params:', route);
+    console.log('router:', router, 'route.params:', route.params);
     // if (route.params.address) {
     //   console.log('route.params.address:', route.params.address);
     //   document.getElementById("addr").value = route.params.address;
     //   addr_search();
     // }
 });
 
-watch(() => route.params.address, (address) => {
+watch(() => route.query.address, (address) => {
     console.log('route.params.address:', address);
     if (address) {
         // document.getElementById("addr").value = address;
         addr_search(address, map);
     }
 });
 
+// watch(() => route.params.address, (address) => {
+//     console.log('route.params.address:', address);
+//     if (address) {
+//         // document.getElementById("addr").value = address;
+//         addr_search(address, map);
+//     }
+// });
+
 </script>
 
 <style>

src/js/map.js

@@ -518,7 +518,8 @@ $(function (router) {
                         drawPoly = L.geoJSON(polygon).addTo(map);
                         var bounds = drawPoly.getBounds()
                         map.flyToBounds(bounds);
-                        router.push({ name: 'address', params: { address: addy } });
+                        router.push({ name: 'address', query: { address: addy } });
+                        // router.push({ name: 'address', params: { address: addy } });
                     }
                 });
                 var mydata = zoningCodeRules; //    identifies the zoning code rules in baseDistricts.json

src/router/index.js

@@ -1,17 +1,17 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import App from '@/App.vue';
 
-
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(import.meta.env.PUBLIC_PATH),
+  // history: createWebHistory(),
   routes: [
     {
-      path: '/',
+      path: import.meta.env.VITE_PUBLICPATH,
       name: 'home',
       component: App,
     },
     {
-      path: '/:address',
+      path: import.meta.env.VITE_PUBLICPATH,
       name: 'address',
       component: App,
     },
@@ -20,7 +20,6 @@ const router = createRouter({
 
 router.afterEach((to, from) => {
   console.log('router.afterEach to:', to, 'from:', from);
-
 })
 
 export default router

vite.config.js

@@ -1,18 +1,23 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+
+  return {
+    plugins: [
+      vue(),
+      vueDevTools(),
+    ],
+    base: env.VITE_PUBLICPATH,
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
     }
   }
 })