From c28b8de1284300634761b0a45e744af1015e1c9f Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 09:34:29 -0500
Subject: [PATCH] Setup nginx conf for single-page routing

---
 Dockerfile                 |  1 +
 nginx.conf                 | 15 +++++++++++++++
 src/App.vue                |  3 ++-
 src/components/Scratch.vue |  7 +++++++
 src/router.ts              |  5 +++++
 5 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 nginx.conf
 create mode 100644 src/components/Scratch.vue

diff --git a/Dockerfile b/Dockerfile
index 409f464..a8f2237 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,5 @@
 FROM nginx:latest
 
 COPY dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/nginx.conf
 
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..889dff5
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,15 @@
+worker_processes 4;
+
+events { worker_connections 1024; }
+
+http {
+    server {
+        listen 80;
+        root  /usr/share/nginx/html;
+        include /etc/nginx/mime.types;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}
diff --git a/src/App.vue b/src/App.vue
index cd6a6f1..5503121 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,8 @@ import { MathPage } from './support/page'
 
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/scratch">Scratch Testing</router-link>
   </div>
   <router-view/>
 </template>
diff --git a/src/components/Scratch.vue b/src/components/Scratch.vue
new file mode 100644
index 0000000..9db4e0f
--- /dev/null
+++ b/src/components/Scratch.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <p>Scratch page for testing!</p>
+</template>
diff --git a/src/router.ts b/src/router.ts
index 02e5545..e6d6895 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -7,6 +7,11 @@ const routes = [
         name: 'Home',
         component: Home,
     },
+    {
+        path: '/scratch',
+        name: 'Scratch',
+        component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'),
+    },
 ]
 
 const router = createRouter({