fix(server): blank screen on mobile (#8460)

Co-authored-by: forehalo <forehalo@gmail.com>
2026-02-13 12:55:00 +00:00 · 2024-10-16 13:12:40 +08:00
parent 82916e8264
commit f393f89a3f
47 changed files with 425 additions and 212 deletions
--- a/packages/backend/server/src/app.ts
+++ b/packages/backend/server/src/app.ts
@@ -24,6 +24,10 @@ export async function createApp() {
    logger: AFFiNE.affine.stable ? ['log'] : ['verbose'],
  });

+  if (AFFiNE.server.path) {
+    app.setGlobalPrefix(AFFiNE.server.path);
+  }
+
  app.use(serverTimingAndCache);

  app.use(
--- a/packages/backend/server/src/core/doc-renderer/controller.ts
+++ b/packages/backend/server/src/core/doc-renderer/controller.ts
@@ -18,7 +18,6 @@ interface RenderOptions {
 }

 interface HtmlAssets {
-  html: string;
  css: string[];
  js: string[];
  publicPath: string;
@@ -27,7 +26,6 @@ interface HtmlAssets {
 }

 const defaultAssets: HtmlAssets = {
-  html: '',
  css: [],
  js: [],
  publicPath: '/',
@@ -152,9 +150,15 @@ export class DocRendererController {
    return null;
  }

+  // @TODO(@forehalo): pre-compile html template to accelerate serializing
  _render(opts: RenderOptions | null, assets: HtmlAssets): string {
-    if (!opts && assets.html) {
-      return assets.html;
+    // TODO(@forehalo): how can we enable the type reference to @affine/env
+    const env: Record<string, any> = {
+      publicPath: assets.publicPath,
+    };
+
+    if (this.config.isSelfhosted) {
+      env.isSelfHosted = true;
    }

    const title = opts?.title
@@ -182,7 +186,7 @@ export class DocRendererController {

    <title>${title}</title>
    <meta name="theme-color" content="#fafafa" />
-    <link rel="preconnect" href="${assets.publicPath}">
+    ${assets.publicPath.startsWith('/') ? '' : `<link rel="preconnect" href="${assets.publicPath}">`}
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" sizes="192x192" href="/favicon-192.png" />
@@ -199,6 +203,10 @@ export class DocRendererController {
    <meta property="og:title" content="${title}" />
    <meta property="og:description" content="${summary}" />
    <meta property="og:image" content="${image}" />
+    <meta name="renderer" content="ssr" />
+    ${Object.entries(env)
+      .map(([key, val]) => `<meta name="env:${key}" content="${val}" />`)
+      .join('\n')}
    ${assets.css.map(url => `<link rel="stylesheet" href="${url}" />`).join('\n')}
  </head>
  <body>
@@ -214,11 +222,20 @@ export class DocRendererController {
   */
  private readHtmlAssets(path: string): HtmlAssets {
    const manifestPath = join(path, 'assets-manifest.json');
-    const htmlPath = join(path, 'index.html');

    try {
-      const assets = JSON.parse(readFileSync(manifestPath, 'utf-8'));
-      assets.html = readFileSync(htmlPath, 'utf-8');
+      const assets: HtmlAssets = JSON.parse(
+        readFileSync(manifestPath, 'utf-8')
+      );
+
+      const publicPath = this.config.isSelfhosted
+        ? this.config.server.host + '/'
+        : assets.publicPath;
+
+      assets.publicPath = publicPath;
+      assets.js = assets.js.map(path => publicPath + path);
+      assets.css = assets.css.map(path => publicPath + path);
+
      return assets;
    } catch (e) {
      if (this.config.node.prod) {
--- a/packages/backend/server/src/core/selfhost/index.ts
+++ b/packages/backend/server/src/core/selfhost/index.ts
@@ -9,6 +9,7 @@ import {
 import { HttpAdapterHost } from '@nestjs/core';
 import type { Application, Request, Response } from 'express';
 import { static as serveStatic } from 'express';
+import isMobile from 'is-mobile';

 import { Config } from '../../fundamentals';
 import { AuthModule } from '../auth';
@@ -58,50 +59,106 @@ export class SelfhostModule implements OnModuleInit {
  ) {}

  onModuleInit() {
-    // selfhost static file location
-    // web => 'static/selfhost'
-    // admin => 'static/admin/selfhost'
-    // mobile => 'static/mobile/selfhost'
-    const staticPath = join(this.config.projectRoot, 'static');
    // in command line mode
    if (!this.adapterHost.httpAdapter) {
      return;
    }

    const app = this.adapterHost.httpAdapter.getInstance<Application>();
+    // for example, '/affine' in host [//host.com/affine]
    const basePath = this.config.server.path;
+    const staticPath = join(this.config.projectRoot, 'static');

+    // web => {
+    //   affine: 'static/index.html',
+    //   selfhost: 'static/selfhost.html'
+    // }
+    // admin => {
+    //   affine: 'static/admin/index.html',
+    //   selfhost: 'static/admin/selfhost.html'
+    // }
+    // mobile => {
+    //   affine: 'static/mobile/index.html',
+    //   selfhost: 'static/mobile/selfhost.html'
+    // }
+    // NOTE(@forehalo):
+    //   the order following routes should be respected,
+    //   otherwise the app won't work properly.
+
+    // START REGION: /admin
+    // do not allow '/index.html' url, redirect to '/'
    app.get(basePath + '/admin/index.html', (_req, res) => {
-      res.redirect(basePath + '/admin');
+      return res.redirect(basePath + '/admin');
    });
+
+    // serve all static files
    app.use(
-      basePath + '/admin',
-      serveStatic(join(staticPath, 'admin', 'selfhost'), {
+      basePath,
+      serveStatic(join(staticPath, 'admin'), {
        redirect: false,
        index: false,
+        fallthrough: true,
      })
    );

+    // fallback all unknown routes
    app.get(
      [basePath + '/admin', basePath + '/admin/*'],
      this.check.use,
      (_req, res) => {
-        res.sendFile(join(staticPath, 'admin', 'selfhost', 'index.html'));
+        res.sendFile(
+          join(
+            staticPath,
+            'admin',
+            this.config.isSelfhosted ? 'selfhost.html' : 'index.html'
+          )
+        );
      }
    );
+    // END REGION

-    app.get(basePath + '/index.html', (_req, res) => {
-      res.redirect(basePath);
-    });
+    // START REGION: /mobile
+    // serve all static files
    app.use(
      basePath,
-      serveStatic(join(staticPath, 'selfhost'), {
+      serveStatic(join(staticPath, 'mobile'), {
        redirect: false,
        index: false,
+        fallthrough: true,
      })
    );
-    app.get('*', this.check.use, (_req, res) => {
-      res.sendFile(join(staticPath, 'selfhost', 'index.html'));
+    // END REGION
+
+    // START REGION: /
+    // do not allow '/index.html' url, redirect to '/'
+    app.get(basePath + '/index.html', (_req, res) => {
+      return res.redirect(basePath);
    });
+
+    // serve all static files
+    app.use(
+      basePath,
+      serveStatic(staticPath, {
+        redirect: false,
+        index: false,
+        fallthrough: true,
+      })
+    );
+
+    // fallback all unknown routes
+    app.get([basePath, basePath + '/*'], this.check.use, (req, res) => {
+      const mobile = isMobile({
+        ua: req.headers['user-agent'] ?? undefined,
+      });
+
+      return res.sendFile(
+        join(
+          staticPath,
+          mobile ? 'mobile' : '',
+          this.config.isSelfhosted ? 'selfhost.html' : 'index.html'
+        )
+      );
+    });
+    // END REGION
  }
 }
--- a/packages/backend/server/src/fundamentals/nestjs/config.ts
+++ b/packages/backend/server/src/fundamentals/nestjs/config.ts
@@ -3,7 +3,7 @@ import { defineStartupConfig, ModuleConfig } from '../../fundamentals/config';
 export interface ServerStartupConfigurations {
  /**
   * Base url of AFFiNE server, used for generating external urls.
-   * default to be `[AFFiNE.protocol]://[AFFiNE.host][:AFFiNE.port]?[AFFiNE.path]` if not specified
+   * default to be `[AFFiNE.protocol]://[AFFiNE.host][:AFFiNE.port]/[AFFiNE.path]` if not specified
   */
  externalUrl: string;
  /**