Getting github-pages working #3

usds · Mar 1, 2024 · 1d253d3 · 1d253d3
1 parent 0fb5b8a
commit 1d253d3
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 143 deletions.
diff --git a/index.html b/index.html
@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Website Content Editor</title>
     <meta name="description" content="My Awesome App description">
-    <link rel="icon" href="/assets/favicon.ico">
-    <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" sizes="180x180">
-    <link rel="mask-icon" href="/assets/mask-icon.svg" color="#FFFFFF">
+    <link rel="icon" href="./assets/favicon.ico">
+    <link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" sizes="180x180">
+    <link rel="mask-icon" href="./assets/mask-icon.svg" color="#FFFFFF">
     <meta name="theme-color" content="#ffffff">
-
+    <!-- this is the DESTINATION of the script when it's copied over. DO not add type="module" or vite will remove -->
+    <script src="./registerSW.js"></script>
     <link rel="manifest" href="manifest.webmanifest" />
-    <script type="module" src="/src/registerSW.js"></script>
     <link rel="stylesheet" media="all" href="https://usds.github.io/website-staging/assets/stylesheets/styles.css" />
   </head>
   <body id="body">

diff --git a/src/registerSW.js b/src/registerSW.js
@@ -1,7 +1,7 @@
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', async () => {
     try {
-    const registration = await navigator.serviceWorker.register('/service-worker.js');
+    const registration = await navigator.serviceWorker.register('./service-worker.js');
     if (registration.installing) {
       console.log("Service worker installing");
     } else if (registration.waiting) {

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,23 +1,29 @@
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import {viteStaticCopy} from "vite-plugin-static-copy";
-// import replace from "@rollup/plugin-replace";
-
-// https://vitejs.dev/config/
-// Yes, I know about vite-pwa... but it's overkill for our needs
-// We're not doing any passthrough caching.
-// https://vite-pwa-org.netlify.app/guide/
 
 export default defineConfig({
   base: "./",
+  build: {
+    outDir: "./dist",
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) {
+            return "vendor";
+          }
+        },
+      },
+    },
+  },
   plugins: [
     react(),
     // svgr "inlines" .svg so they can be easily turned into React components.
     svgr({
       svgrOptions: {
         svgo: true,
-        replaceAttrValues: { 'black': 'currentColor' }
+        replaceAttrValues: {'black': 'currentColor'} // allows black/white svgs to be colorized via css?
       }
     }),
     viteStaticCopy({
@@ -30,19 +36,10 @@ export default defineConfig({
           src: './src/registerSW.js',
           dest: './',
         },
-      ]}),
+      ]
+    }),
     // replace({__DATE__: new Date().toISOString()})
   ],
-  // optimizeDeps: {
-  //   include: [
-  //     "node_modules/jszip/dist/*"
-  //   ],
-  // },
-  // build: {
-  //   commonjsOptions: {
-  //     include: []
-  //   }
-  // },
   css: {
     modules: {
       scopeBehaviour: 'local',