diff --git a/frontend/admin/app/root.tsx b/frontend/admin/app/root.tsx
index c41da0ad..dc278ce0 100644
--- a/frontend/admin/app/root.tsx
+++ b/frontend/admin/app/root.tsx
@@ -1,4 +1,5 @@
-import { links, ErrorBoundary, App, handle, loader } from './khaleesi/home/document'
+import { links, ErrorBoundary, App, handle } from './khaleesi/home/document'
+import { loader } from './khaleesi/home/document.server'
 
 
 const AdminApp: () => JSX.Element = () => <App title="Admin Console" />
diff --git a/frontend/khaleesi/app/khaleesi/auth/login.tsx b/frontend/khaleesi/app/khaleesi/auth/login.tsx
deleted file mode 100644
index 7f92f1bf..00000000
--- a/frontend/khaleesi/app/khaleesi/auth/login.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { MetaFunction, ActionFunctionArgs } from '@remix-run/node'
-import { data } from '@remix-run/node'
-import { Form } from '@remix-run/react'
-import { useContext } from 'react'
-import { AppContext } from '../home/document'
-import { breadcrumb } from '../navigation/breadcrumb'
-import { loginNavigationData } from '../navigation/commonNavigationData'
-
-
-export const handle = {
-  ...breadcrumb(loginNavigationData),
-}
-
-
-export const meta: MetaFunction = () => {
-  const appContext = useContext(AppContext)  // eslint-disable-line react-hooks/rules-of-hooks
-
-  return [
-    { title: `Login | ${appContext.title}` },
-    { name: 'description', content: 'Identify yourself!' },
-  ]
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-  const { Session } = await import('./session.server')
-  const session = new Session()
-  await session.init(request)
-  const form = await request.formData()
-  const user = form.get('user')
-
-  if ('string' !== typeof user) {
-    return data({ fieldErrors: { user: 'wrong type' }, formError: null }, { status: 400 })
-  }
-
-  return session.create(user, '/')
-}
-
-
-export function LoginRoute(): JSX.Element {
-  return (
-    <div>
-      <h1>Login</h1>
-      <section><Form method="post">
-        <label>
-          <input type="radio" name="user" value="user" defaultChecked />
-          user
-        </label>
-        <label>
-          <input type="radio" name="user" value="admin" />
-          admin
-        </label>
-        <button type="submit" className="button" name="action">Login</button>
-      </Form></section>
-    </div>
-  )
-}
diff --git a/frontend/khaleesi/app/khaleesi/auth/loginRoute.tsx b/frontend/khaleesi/app/khaleesi/auth/loginRoute.tsx
index 497384be..249f0986 100644
--- a/frontend/khaleesi/app/khaleesi/auth/loginRoute.tsx
+++ b/frontend/khaleesi/app/khaleesi/auth/loginRoute.tsx
@@ -1,5 +1,56 @@
-import { meta, handle, action, LoginRoute } from './login'
+import type { MetaFunction, ActionFunctionArgs } from '@remix-run/node'
+import { data } from '@remix-run/node'
+import { Form } from '@remix-run/react'
+import { useContext } from 'react'
+import { AppContext } from '../home/document'
+import { breadcrumb } from '../navigation/breadcrumb'
+import { loginNavigationData } from '../navigation/commonNavigationData'
+import { Session } from './session.server'
 
 
-export default LoginRoute
-export { meta, handle, action }
+export const handle = {
+  ...breadcrumb(loginNavigationData),
+}
+
+
+export const meta: MetaFunction = () => {
+  const appContext = useContext(AppContext)  // eslint-disable-line react-hooks/rules-of-hooks
+
+  return [
+    { title: `Login | ${appContext.title}` },
+    { name: 'description', content: 'Identify yourself!' },
+  ]
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const session = new Session()
+  await session.init(request)
+  const form = await request.formData()
+  const user = form.get('user')
+
+  if ('string' !== typeof user) {
+    return data({ fieldErrors: { user: 'wrong type' }, formError: null }, { status: 400 })
+  }
+
+  return session.create(user, '/')
+}
+
+
+export default function LoginRoute(): JSX.Element {
+  return (
+    <div>
+      <h1>Login</h1>
+      <section><Form method="post">
+        <label>
+          <input type="radio" name="user" value="user" defaultChecked />
+          user
+        </label>
+        <label>
+          <input type="radio" name="user" value="admin" />
+          admin
+        </label>
+        <button type="submit" className="button" name="action">Login</button>
+      </Form></section>
+    </div>
+  )
+}
diff --git a/frontend/khaleesi/app/khaleesi/auth/logout.tsx b/frontend/khaleesi/app/khaleesi/auth/logout.tsx
deleted file mode 100644
index ac3e62a4..00000000
--- a/frontend/khaleesi/app/khaleesi/auth/logout.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { MetaFunction, TypedResponse, ActionFunctionArgs } from '@remix-run/node'
-import { Form } from '@remix-run/react'
-import { useContext } from 'react'
-import { AppContext } from '../home/document'
-import { breadcrumb } from '../navigation/breadcrumb'
-import { logoutNavigationData } from '../navigation/commonNavigationData'
-
-
-export const handle = {
-  ...breadcrumb(logoutNavigationData),
-}
-
-
-export const meta: MetaFunction = () => {
-  const appContext = useContext(AppContext)  // eslint-disable-line react-hooks/rules-of-hooks
-
-  return [
-    { title: `Logout | ${appContext.title}` },
-    { name: 'description', content: 'Logout.' },
-  ]
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-  const { Session } = await import('./session.server')
-  const session = new Session()
-  await session.init(request)
-  return session.destroy('/')
-}
-
-
-export function LogoutRoute(): JSX.Element {
-  return (
-    <div>
-      <h1>Logout</h1>
-      <section><Form method="post">
-        <button type="submit" className="button" name="action">Logout</button>
-      </Form></section>
-    </div>
-  )
-}
diff --git a/frontend/khaleesi/app/khaleesi/auth/logoutRoute.tsx b/frontend/khaleesi/app/khaleesi/auth/logoutRoute.tsx
index c7a98bdd..facb219a 100644
--- a/frontend/khaleesi/app/khaleesi/auth/logoutRoute.tsx
+++ b/frontend/khaleesi/app/khaleesi/auth/logoutRoute.tsx
@@ -1,5 +1,40 @@
-import { meta, handle, action, LogoutRoute } from './logout'
+import type { MetaFunction, ActionFunctionArgs } from '@remix-run/node'
+import { Form } from '@remix-run/react'
+import { useContext } from 'react'
+import { AppContext } from '../home/document'
+import { breadcrumb } from '../navigation/breadcrumb'
+import { logoutNavigationData } from '../navigation/commonNavigationData'
+import { Session } from './session.server'
 
 
-export default LogoutRoute
-export { meta, handle, action }
+export const handle = {
+  ...breadcrumb(logoutNavigationData),
+}
+
+
+export const meta: MetaFunction = () => {
+  const appContext = useContext(AppContext)  // eslint-disable-line react-hooks/rules-of-hooks
+
+  return [
+    { title: `Logout | ${appContext.title}` },
+    { name: 'description', content: 'Logout.' },
+  ]
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const session = new Session()
+  await session.init(request)
+  return session.destroy('/')
+}
+
+
+export default function LogoutRoute(): JSX.Element {
+  return (
+    <div>
+      <h1>Logout</h1>
+      <section><Form method="post">
+        <button type="submit" className="button" name="action">Logout</button>
+      </Form></section>
+    </div>
+  )
+}
diff --git a/frontend/khaleesi/app/khaleesi/home/document.server.tsx b/frontend/khaleesi/app/khaleesi/home/document.server.tsx
new file mode 100644
index 00000000..3f17eddf
--- /dev/null
+++ b/frontend/khaleesi/app/khaleesi/home/document.server.tsx
@@ -0,0 +1,17 @@
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import { navigationData } from '../../navigationData'
+import {
+  topNavigationData,
+  bottomNavigationData,
+} from '../navigation/commonNavigationData'
+import { Session } from '../auth/session.server'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const session = new Session()
+  await session.init(request)
+  return {
+    top    : topNavigationData.filter((data) => session.hasPermission(data.permission)),
+    middle : navigationData.filter((data) => session.hasPermission(data.permission)),
+    bottom : bottomNavigationData.filter((data) => session.hasPermission(data.permission)),
+  }
+}
diff --git a/frontend/khaleesi/app/khaleesi/home/document.tsx b/frontend/khaleesi/app/khaleesi/home/document.tsx
index 4a8b5840..82f41a95 100644
--- a/frontend/khaleesi/app/khaleesi/home/document.tsx
+++ b/frontend/khaleesi/app/khaleesi/home/document.tsx
@@ -29,7 +29,6 @@ export const handle = {
   ...breadcrumb(homeNavigationData),
 }
 
-
 export type AppContextType = {
   title     : string,
 }
@@ -37,24 +36,12 @@ export const AppContext: Context<AppContextType> = createContext({
   title     : 'Change your title!',
 })
 
-
 type LoaderType = {
   top    : NavigationElementProperties[],
   middle : NavigationElementProperties[],
   bottom : NavigationElementProperties[],
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  const { Session } = await import('../auth/session.server')
-  const session = new Session()
-  await session.init(request)
-  return {
-    top    : topNavigationData.filter((data) => session.hasPermission(data.permission)),
-    middle : navigationData.filter((data) => session.hasPermission(data.permission)),
-    bottom : bottomNavigationData.filter((data) => session.hasPermission(data.permission)),
-  }
-}
-
 function Document({
   children,
   title,
diff --git a/frontend/khaleesi_frontend_tests/app/root.tsx b/frontend/khaleesi_frontend_tests/app/root.tsx
index dda8d074..0b3cbd81 100644
--- a/frontend/khaleesi_frontend_tests/app/root.tsx
+++ b/frontend/khaleesi_frontend_tests/app/root.tsx
@@ -1,4 +1,5 @@
-import { links, ErrorBoundary, App, handle, loader } from './khaleesi/home/document'
+import { links, ErrorBoundary, App, handle } from './khaleesi/home/document'
+import { loader } from './khaleesi/home/document.server'
 
 
 const TestApp: () => JSX.Element = () => <App title="Test App" />
diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogin.tsx b/frontend/khaleesi_frontend_tests/tests/testAuth/testLoginRoute.tsx
similarity index 96%
rename from frontend/khaleesi_frontend_tests/tests/testAuth/testLogin.tsx
rename to frontend/khaleesi_frontend_tests/tests/testAuth/testLoginRoute.tsx
index 04cd6305..c1c3b3af 100644
--- a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogin.tsx
+++ b/frontend/khaleesi_frontend_tests/tests/testAuth/testLoginRoute.tsx
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom'
 import type { ActionFunctionArgs } from '@remix-run/node'
 import { render, screen } from '@testing-library/react'
-import { LoginRoute, action } from '../../app/khaleesi/auth/login'
+import LoginRoute, { action } from '../../app/khaleesi/auth/loginRoute'
 import { suppressReactRouterFutureWarnings } from '../../app/khaleesi/testUtil/consoleLogging'
 import { createTestingStub } from '../../app/khaleesi/testUtil/remixStub'
 
diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogout.tsx b/frontend/khaleesi_frontend_tests/tests/testAuth/testLogoutRoute.tsx
similarity index 94%
rename from frontend/khaleesi_frontend_tests/tests/testAuth/testLogout.tsx
rename to frontend/khaleesi_frontend_tests/tests/testAuth/testLogoutRoute.tsx
index bd45c2af..06f2dea8 100644
--- a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogout.tsx
+++ b/frontend/khaleesi_frontend_tests/tests/testAuth/testLogoutRoute.tsx
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom'
 import type { ActionFunctionArgs } from '@remix-run/node'
 import { render, screen } from '@testing-library/react'
-import { LogoutRoute, action } from '../../app/khaleesi/auth/logout'
+import LogoutRoute, { action } from '../../app/khaleesi/auth/logoutRoute'
 import { suppressReactRouterFutureWarnings } from '../../app/khaleesi/testUtil/consoleLogging'
 import { createTestingStub } from '../../app/khaleesi/testUtil/remixStub'
 
diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
new file mode 100644
index 00000000..07c3faeb
--- /dev/null
+++ b/frontend/vite.config.mjs
@@ -0,0 +1,24 @@
+// noinspection JSUnresolvedReference
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+export default defineConfig({
+    server: {
+        host: '0.0.0.0',
+        port: 8000,
+    },
+    plugins: [remix({
+            ignoredRouteFiles: ['**/.*'],
+            // appDirectory: 'app',
+            // assetsBuildDirectory: 'public/build',
+            // serverBuildPath: 'build/index.js',
+            // publicPath: 'build/',
+            future: {
+                v3_fetcherPersist: true,
+                v3_relativeSplatPath: true,
+                v3_throwAbortReason: true,
+                v3_lazyRouteDiscovery: true,
+                v3_singleFetch: true,
+                v3_routeConfig: true,
+            },
+        })],
+});
diff --git a/templates/frontend/frontend_template/app/root.tsx b/templates/frontend/frontend_template/app/root.tsx
index e801ed52..9a5f677f 100644
--- a/templates/frontend/frontend_template/app/root.tsx
+++ b/templates/frontend/frontend_template/app/root.tsx
@@ -1,4 +1,5 @@
-import { links, ErrorBoundary, App, handle, loader } from './khaleesi/home/document'
+import { links, ErrorBoundary, App, handle } from './khaleesi/home/document'
+import { loader } from './khaleesi/home/document.server'
 
 
 const NewApp: () => JSX.Element = () => <App title="Lorem Ipsum" />