Modified Dockerfile To Use Bun And Use a Different Build Command

There is a bug, discussed at https://github.com/oven-sh/bun/issues/4754 where running bun for vue-tsc fails for some reason. I am compensating by running `bunx --bun vite build` manually, and ignoring the type checking, since I don't really need that in prod.

Dockerfile

@@ -1,11 +1,31 @@
-FROM oven/bun:1-alpine as build-stage
+# This is making minimal changes from the guide at
+# https://bun.sh/guides/ecosystem/docker (as of 2024-02-04)
 
+# use the official Bun image
+# see all versions at https://hub.docker.com/r/oven/bun/tags
+FROM oven/bun:1-alpine as base
 WORKDIR /app
-COPY . /app
-RUN bun install
-RUN bun run build
 
+# install dependencies into temp directory
+# this will cache them and speed up future builds
+FROM base as install
+# install with --production (exclude devDependencies)
+RUN mkdir -p /temp/prod
+COPY package.json bun.lockb /temp/prod/
+RUN cd /temp/prod && bun install --frozen-lockfile --production
+
+# copy node_modules from temp directory
+# then copy all (non-ignored) project files into the image
+FROM base AS prerelease
+COPY --from=install /temp/prod/node_modules node_modules
+COPY . .
+
+# I don't have any tests, I am bad.
+ENV NODE_ENV=production
+RUN bunx --bun vite build
+
+# Copy the distribution folder into the final image.
 FROM nginx:stable-alpine as release
 
-COPY --from=build-stage /app/docker/nginx.conf /etc/nginx/nginx.conf
+COPY ./docker/nginx.conf /etc/nginx/nginx.conf
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=prerelease /app/dist /usr/share/nginx/html

Dockerfile.dev

@@ -0,0 +1,31 @@
+# This is making minimal changes from the guide at
+# https://bun.sh/guides/ecosystem/docker (as of 2024-02-04)
+
+# use the official Bun image
+# see all versions at https://hub.docker.com/r/oven/bun/tags
+FROM oven/bun:1-alpine as base
+WORKDIR /app
+
+# install dependencies into temp directory
+# this will cache them and speed up future builds
+FROM base as install
+RUN mkdir -p /tmp/dev
+COPY package.json bun.lockb /temp/dev/
+RUN cd /temp/dev && bun install --frozen-lockfile
+
+# install with --production (exclude devDependencies)
+RUN mkdir -p /temp/prod
+COPY package.json bun.lockb /temp/prod/
+RUN cd /temp/prod && bun install --frozen-lockfile --production
+# ^ Is this necessary? Don't we either need prod or not prod?
+
+# copy node_modules from temp directory
+# then copy all (non-ignored) project files into the image
+FROM base AS prerelease
+COPY --from=install /temp/dev/node_modules node_modules
+COPY . .
+
+FROM nginx:stable-alpine as release
+
+COPY --from=build-stage /app/docker/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build-stage /app/dist /usr/share/nginx/html

src/router/index.ts

@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,7 +6,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      component: () => import('@/views/HomeView.vue')
     },
     {
       path: "/blessing-power",