From ae070a65854c80eea4b32cf7b8ca13a549bad598 Mon Sep 17 00:00:00 2001
From: heiso <alexandre.moatty@gmail.com>
Date: Fri, 19 Jan 2024 14:35:21 +0100
Subject: [PATCH] feat: move from ssr to spa

---
 .github/workflows/deploy.yml         |  48 +++++++++++
 web-app/.github/workflows/deploy.yml |  16 ----
 web-app/app/entry.client.tsx         |  11 ---
 web-app/app/entry.server.tsx         | 117 ---------------------------
 web-app/app/root.tsx                 |  78 +++++-------------
 web-app/app/routes/_layout.tsx       |  11 +--
 web-app/app/routes/health.tsx        |  13 ---
 web-app/ecosystem.config.cjs         |   6 +-
 web-app/package.json                 |   3 +-
 web-app/server/adapter.ts            |  89 --------------------
 web-app/server/index.ts              |  87 --------------------
 web-app/server/process.ts            |  25 ------
 web-app/tsconfig.build.json          |  12 ---
 web-app/vite.config.ts               |   1 +
 14 files changed, 75 insertions(+), 442 deletions(-)
 create mode 100644 .github/workflows/deploy.yml
 delete mode 100644 web-app/.github/workflows/deploy.yml
 delete mode 100644 web-app/app/entry.server.tsx
 delete mode 100644 web-app/app/routes/health.tsx
 delete mode 100644 web-app/server/adapter.ts
 delete mode 100644 web-app/server/index.ts
 delete mode 100644 web-app/server/process.ts
 delete mode 100644 web-app/tsconfig.build.json

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..35ea661
--- /dev/null
+++ b/.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
diff --git a/web-app/.github/workflows/deploy.yml b/web-app/.github/workflows/deploy.yml
deleted file mode 100644
index 263b643..0000000
--- a/web-app/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  deploy:
-    name: Deploy app
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only --config ./fly.toml
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
diff --git a/web-app/app/entry.client.tsx b/web-app/app/entry.client.tsx
index 5b82e78..1ec0bbe 100644
--- a/web-app/app/entry.client.tsx
+++ b/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()
-    }
-  }
-})
diff --git a/web-app/app/entry.server.tsx b/web-app/app/entry.server.tsx
deleted file mode 100644
index 688d780..0000000
--- a/web-app/app/entry.server.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { PassThrough } from 'node:stream'
-
-import type { AppLoadContext, DataFunctionArgs, EntryContext } from '@remix-run/node'
-import { createReadableStreamFromReadable } from '@remix-run/node'
-import { RemixServer } from '@remix-run/react'
-import isbot from 'isbot'
-import { renderToPipeableStream } from 'react-dom/server'
-
-const ABORT_DELAY = 5_000
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-  loadContext: AppLoadContext,
-) {
-  return isbot(request.headers.get('user-agent'))
-    ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
-    : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext)
-}
-
-function handleBotRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-) {
-  return new Promise((resolve, reject) => {
-    let shellRendered = false
-    const { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
-      {
-        onAllReady() {
-          shellRendered = true
-          const body = new PassThrough()
-          const stream = createReadableStreamFromReadable(body)
-
-          responseHeaders.set('Content-Type', 'text/html')
-
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            }),
-          )
-
-          pipe(body)
-        },
-        onShellError(error: unknown) {
-          reject(error)
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
-          if (shellRendered) {
-            console.error(error)
-          }
-        },
-      },
-    )
-
-    setTimeout(abort, ABORT_DELAY)
-  })
-}
-
-function handleBrowserRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-) {
-  return new Promise((resolve, reject) => {
-    let shellRendered = false
-    const { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
-      {
-        async onShellReady() {
-          shellRendered = true
-          const body = new PassThrough()
-          const stream = createReadableStreamFromReadable(body)
-
-          responseHeaders.set('Content-Type', 'text/html')
-
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            }),
-          )
-
-          pipe(body)
-        },
-        onShellError(error: unknown) {
-          reject(error)
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
-          if (shellRendered) {
-            console.error(error)
-          }
-        },
-      },
-    )
-
-    setTimeout(abort, ABORT_DELAY)
-  })
-}
-
-export function handleError(error: unknown, { request }: DataFunctionArgs): void {
-  console.error(error)
-}
diff --git a/web-app/app/root.tsx b/web-app/app/root.tsx
index 746cf5a..a829476 100644
--- a/web-app/app/root.tsx
+++ b/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>
   )
 }
diff --git a/web-app/app/routes/_layout.tsx b/web-app/app/routes/_layout.tsx
index 4bd86ed..7c56db6 100644
--- a/web-app/app/routes/_layout.tsx
+++ b/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">
diff --git a/web-app/app/routes/health.tsx b/web-app/app/routes/health.tsx
deleted file mode 100644
index 2021322..0000000
--- a/web-app/app/routes/health.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { json } from '@remix-run/node'
-
-export function loader() {
-  const shouldRefreshIfVersionMismatch = Boolean(
-    process.env.SHOULD_REFRESH_BROWSER_IF_VERSION_MISMATCH &&
-      process.env.SHOULD_REFRESH_BROWSER_IF_VERSION_MISMATCH !== 'false',
-  )
-
-  return json({
-    build: process.env.BUILD_VERSION,
-    shouldRefreshIfVersionMismatch,
-  })
-}
diff --git a/web-app/ecosystem.config.cjs b/web-app/ecosystem.config.cjs
index 747292e..89b7840 100644
--- a/web-app/ecosystem.config.cjs
+++ b/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',
     },
   ],
 }
diff --git a/web-app/package.json b/web-app/package.json
index d3c9c46..03565b2 100644
--- a/web-app/package.json
+++ b/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 .",
diff --git a/web-app/server/adapter.ts b/web-app/server/adapter.ts
deleted file mode 100644
index 906ca8c..0000000
--- a/web-app/server/adapter.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { AppLoadContext, ServerBuild } from '@remix-run/node'
-import {
-  createReadableStreamFromReadable,
-  createRequestHandler as createRemixRequestHandler,
-  writeReadableStreamToWritable,
-} from '@remix-run/node'
-import type * as koa from 'koa'
-
-export type GetLoadContextFunction = (
-  ctx: koa.Context,
-  next: koa.Next,
-) => Promise<AppLoadContext> | AppLoadContext
-
-export type RequestHandler = (ctx: koa.Context, next: koa.Next) => Promise<void>
-
-export function createRequestHandler({
-  build,
-  getLoadContext,
-  mode = process.env.NODE_ENV,
-}: {
-  build: ServerBuild | (() => Promise<ServerBuild>)
-  getLoadContext?: GetLoadContextFunction
-  mode?: string
-}): RequestHandler {
-  let handleRequest = createRemixRequestHandler(build, mode)
-
-  return async (ctx: koa.Context, next: koa.Next) => {
-    let request = createRemixRequest(ctx, next)
-    let loadContext = await getLoadContext?.(ctx, next)
-
-    let response = await handleRequest(request, loadContext)
-
-    await sendRemixResponse(ctx, response)
-  }
-}
-
-export function createRemixHeaders(requestHeaders: koa.Request['headers']): Headers {
-  let headers = new Headers()
-
-  for (let [key, values] of Object.entries(requestHeaders)) {
-    if (values) {
-      if (Array.isArray(values)) {
-        for (let value of values) {
-          headers.append(key, value)
-        }
-      } else {
-        headers.set(key, values)
-      }
-    }
-  }
-
-  return headers
-}
-
-export function createRemixRequest(ctx: koa.Context, next: koa.Next): Request {
-  let url = new URL(`${ctx.protocol}://${ctx.host}${ctx.url}`)
-
-  // Abort action/loaders once we can no longer write a response
-  let controller = new AbortController()
-  ctx.res.on('close', () => controller.abort())
-
-  let init: RequestInit = {
-    method: ctx.req.method,
-    headers: createRemixHeaders(ctx.req.headers),
-    signal: controller.signal,
-  }
-
-  if (ctx.req.method !== 'GET' && ctx.req.method !== 'HEAD') {
-    init.body = createReadableStreamFromReadable(ctx.req)
-    ;(init as { duplex: 'half' }).duplex = 'half'
-  }
-
-  return new Request(url.href, init)
-}
-
-export async function sendRemixResponse(ctx: koa.Context, nodeResponse: Response): Promise<void> {
-  ctx.res.statusMessage = nodeResponse.statusText
-  ctx.res.statusCode = nodeResponse.status
-
-  for (let [key, value] of nodeResponse.headers.entries()) {
-    ctx.res.appendHeader(key, value)
-  }
-
-  if (nodeResponse.body) {
-    await writeReadableStreamToWritable(nodeResponse.body, ctx.res)
-  } else {
-    ctx.res.end()
-  }
-}
diff --git a/web-app/server/index.ts b/web-app/server/index.ts
deleted file mode 100644
index 1430156..0000000
--- a/web-app/server/index.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { installGlobals, type ServerBuild } from '@remix-run/node'
-import { secondsInHour, secondsInYear, secondsToMilliseconds } from 'date-fns'
-import Koa, { type Context } from 'koa'
-import connect from 'koa-connect'
-import serve from 'koa-static'
-import { createRequestHandler } from './adapter.js'
-import './process.js'
-
-installGlobals()
-
-declare module '@remix-run/server-runtime' {
-  export interface AppLoadContext extends Context {}
-}
-
-;(async () => {
-  const app = new Koa()
-
-  const viteDevServer =
-    process.env.NODE_ENV === 'development'
-      ? await import('vite').then((vite) =>
-          vite.createServer({
-            server: { middlewareMode: true },
-          }),
-        )
-      : undefined
-
-  app.use(function setClientIP(ctx, next) {
-    if (ctx.request.headers['fly-client-ip']) {
-      ctx.request.ip = Array.isArray(ctx.request.headers['fly-client-ip'])
-        ? ctx.request.headers['fly-client-ip'][0]
-        : ctx.request.headers['fly-client-ip']
-    }
-    return next()
-  })
-
-  // No ending slashes for SEO reasons
-  // https://github.com/epicweb-dev/epic-stack/discussions/108
-  app.use(function removeTrailingSlash(ctx, next) {
-    if (ctx.request.path.endsWith('/') && ctx.request.path.length > 1) {
-      const query = ctx.request.url.slice(ctx.request.path.length)
-      const safepath = ctx.request.path.slice(0, -1).replace(/\/+/g, '/')
-      ctx.status = 301
-      ctx.redirect(safepath + query)
-    } else {
-      return next()
-    }
-  })
-
-  // handle asset requests
-  if (viteDevServer) {
-    app.use(connect(viteDevServer.middlewares))
-  } else {
-    app.use(
-      serve('build/client/assets', {
-        immutable: true,
-        maxAge: secondsToMilliseconds(secondsInYear),
-      }),
-    )
-
-    app.use(
-      serve('build/client/fonts', {
-        immutable: true,
-        maxAge: secondsToMilliseconds(secondsInYear),
-      }),
-    )
-
-    app.use(
-      serve('build/client', {
-        immutable: false,
-        maxAge: secondsToMilliseconds(secondsInHour),
-      }),
-    )
-  }
-
-  const build = (
-    viteDevServer
-      ? () => viteDevServer.ssrLoadModule('virtual:remix/server-build')
-      : // @ts-expect-error
-        await import('../vite-server/index.js')
-  ) as ServerBuild | (() => Promise<ServerBuild>)
-
-  app.use(createRequestHandler({ build, mode: process.env.NODE_ENV, getLoadContext: (ctx) => ctx }))
-
-  app.listen({ port: Number(process.env.PORT) }, () => {
-    console.log(`🚀 To infinity...and beyond!`)
-  })
-})()
diff --git a/web-app/server/process.ts b/web-app/server/process.ts
deleted file mode 100644
index 1ba96a8..0000000
--- a/web-app/server/process.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import assert from 'assert'
-
-declare global {
-  namespace NodeJS {
-    interface ProcessEnv {
-      ENV: string
-      PORT: string
-      PUBLIC_URL: string
-      FLY_IMAGE_REF: string | undefined
-      FLY_APP_NAME: string | undefined
-      BUILD_VERSION: string
-      SHOULD_REFRESH_BROWSER_IF_VERSION_MISMATCH: string | undefined
-    }
-  }
-}
-
-assert(process.env.ENV, 'ENV must be defined')
-assert(process.env.PORT, 'PORT must be defined')
-assert(process.env.PUBLIC_URL, 'PUBLIC_URL must be defined')
-
-if (process.env.FLY_IMAGE_REF) {
-  process.env.BUILD_VERSION = process.env.FLY_IMAGE_REF.replace(/^registry\.fly\.io\/.*:/, '')
-} else {
-  process.env.BUILD_VERSION = process.env.NODE_ENV
-}
diff --git a/web-app/tsconfig.build.json b/web-app/tsconfig.build.json
deleted file mode 100644
index 7af36f0..0000000
--- a/web-app/tsconfig.build.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["server/**/*.ts"],
-  "compilerOptions": {
-    "outDir": "build",
-    "baseUrl": ".",
-    "rootDir": ".",
-    "checkJs": false,
-    "allowImportingTsExtensions": false,
-    "noEmit": false
-  }
-}
diff --git a/web-app/vite.config.ts b/web-app/vite.config.ts
index ebb74be..ede468c 100644
--- a/web-app/vite.config.ts
+++ b/web-app/vite.config.ts
@@ -14,6 +14,7 @@ export default defineConfig({
       ignoredRouteFiles: ['**/.*'],
       serverModuleFormat: 'esm',
       serverBuildDirectory: 'build/vite-server',
+      unstable_ssr: false,
     }),
   ],
 })