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@v4
+        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/entry.client.tsx

@@ -1,7 +1,6 @@
 import { RemixBrowser } from '@remix-run/react'
 import { startTransition, StrictMode } from 'react'
 import { hydrateRoot } from 'react-dom/client'
-import { routerPaths } from '../routes.ts'
 
 startTransition(() => {
   hydrateRoot(
@@ -11,13 +10,3 @@ startTransition(() => {
     </StrictMode>,
   )
 })
-
-window.addEventListener('focus', async () => {
-  const response = await fetch(routerPaths['/health'])
-  if (response.status === 200) {
-    const json = await response.json()
-    if (json.build !== window.ENV.BUILD_VERSION && json.shouldRefreshIfVersionMismatch) {
-      window.location.reload()
-    }
-  }
-})

web-app/app/root.tsx

@@ -1,57 +1,28 @@
-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' }]
-}
-
-export const links: LinksFunction = () => {
-  return [
-    {
-      rel: 'alternate icon',
-      type: 'image/png',
-      href: '/favicon-32x32.png',
-    },
-    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
-    {
-      rel: 'manifest',
-      href: '/site.webmanifest',
-      crossOrigin: 'use-credentials',
-    } as const, // necessary to make typescript happy
-  ]
-}
+// export const meta: MetaFunction = () => {
+//   return [{ title: 'Macrolev' }]
+// }
+
+// export const links: LinksFunction = () => {
+//   return [
+//     {
+//       rel: 'alternate icon',
+//       type: 'image/png',
+//       href: '/favicon-32x32.png',
+//     },
+//     { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+//     {
+//       rel: 'manifest',
+//       href: '/site.webmanifest',
+//       crossOrigin: 'use-credentials',
+//     } as const, // necessary to make typescript happy
+//   ]
+// }
 
 type DocumentProps = PropsWithChildren
 function Document({ children }: DocumentProps) {
@@ -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/ecosystem.config.cjs

@@ -30,9 +30,9 @@ const config = {
 
     {
       ...common,
-      name: 'server',
-      watch: ['server/**/*', '.env'],
-      script: 'node --env-file=.env --inspect --loader tsx server',
+      name: 'app',
+      watch: ['.env'],
+      script: 'remix vite:dev',
     },
   ],
 }

web-app/package.json

@@ -5,8 +5,7 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "npx tsc -p tsconfig.build.json && remix vite:build",
-    "old-build": "npx tsc -p tsconfig.build.json && remix build",
+    "build": "remix vite:build",
     "check-dependencies": "npx npm-check-updates --peer --format group -i",
     "down": "pm2 delete ecosystem.config.cjs",
     "lint": "tsc --noEmit && eslint . && prettier --check .",