feat: move from ssr to spa

.github/workflows/deploy.yml

@@ -0,0 +1,48 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 20.x
+      - run: npm ci
+        working-directory: web-app
+      - run: npx tsx generate-remix-routes.ts
+        working-directory: web-app
+      - run: npx tsx generate-svg-icons-sprite.ts
+        working-directory: web-app
+      - run: npm run build
+        working-directory: web-app
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: 'web-app/build/client'
+
+  # Deployment job
+  deploy:
+    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: https://heiso.github.io/macrolev
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

web-app/app/root.tsx

@@ -1,38 +1,9 @@
-import { json, type LinksFunction, type MetaFunction } from '@remix-run/node'
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
-} from '@remix-run/react'
+import { type LinksFunction, type MetaFunction } from '@remix-run/node'
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
 import type { PropsWithChildren } from 'react'
 import './font.css'
 import './tailwind.css'
 
-type ENV = {
-  ENV: string
-  BUILD_VERSION: string
-}
-
-declare global {
-  var ENV: ENV
-  interface Window {
-    ENV: ENV
-  }
-}
-
-export function loader() {
-  return json({
-    ENV: {
-      ENV: process.env.ENV,
-      BUILD_VERSION: process.env.BUILD_VERSION,
-    },
-  })
-}
-
 export const meta: MetaFunction = () => {
   return [{ title: 'Macrolev' }]
 }
@@ -77,16 +48,9 @@ function Document({ children }: DocumentProps) {
 }
 
 export default function App() {
-  const { ENV } = useLoaderData<typeof loader>()
-
   return (
     <Document>
       <Outlet />
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `window.ENV = ${JSON.stringify(ENV)}`,
-        }}
-      />
     </Document>
   )
 }

web-app/app/routes/_layout.tsx

@@ -1,18 +1,9 @@
-import { json } from '@remix-run/node'
-import { Outlet, Link as RemixLink, useLoaderData } from '@remix-run/react'
+import { Outlet, Link as RemixLink } from '@remix-run/react'
 import { version } from '../../package.json'
 import { routerPaths } from '../../routes.ts'
 import { Icon } from '../ui/icon.tsx'
 
-export async function loader() {
-  return json({
-    version,
-  })
-}
-
 export default function Index() {
-  const { version } = useLoaderData<typeof loader>()
-
   return (
     <div className="h-full w-full flex flex-col">
       <header className="w-full px-6 py-4 flex flex-row items-center justify-between mb-10">

web-app/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
       ignoredRouteFiles: ['**/.*'],
       serverModuleFormat: 'esm',
       serverBuildDirectory: 'build/vite-server',
+      unstable_ssr: false,
     }),
   ],
 })