fix: host app with subpath (#11739)

closes #11719

packages/backend/server/src/core/config/config.ts

@@ -57,7 +57,7 @@ Default to be \`[server.protocol]://[server.host][:server.port]\` if not specifi
     env: ['AFFINE_SERVER_PORT', 'integer'],
   },
   path: {
-    desc: 'Subpath where the server get deployed if there is.',
+    desc: 'Subpath where the server get deployed if there is one.(e.g. /affine)',
     default: '',
     env: 'AFFINE_SERVER_SUB_PATH',
   },

packages/backend/server/src/core/doc-renderer/controller.ts

@@ -5,7 +5,7 @@ import { Controller, Get, Logger, Req, Res } from '@nestjs/common';
 import type { Request, Response } from 'express';
 import isMobile from 'is-mobile';
 
-import { metrics } from '../../base';
+import { Config, metrics } from '../../base';
 import { Models } from '../../models';
 import { htmlSanitize } from '../../native';
 import { Public } from '../auth';
@@ -51,7 +51,8 @@ export class DocRendererController {
 
   constructor(
     private readonly doc: DocReader,
-    private readonly models: Models
+    private readonly models: Models,
+    private readonly config: Config
   ) {
     this.webAssets = this.readHtmlAssets(join(env.projectRoot, 'static'));
     this.mobileAssets = this.readHtmlAssets(
@@ -140,6 +141,7 @@ export class DocRendererController {
     // TODO(@forehalo): how can we enable the type reference to @affine/env
     const envMeta: Record<string, any> = {
       publicPath: assets.publicPath,
+      subPath: this.config.server.path,
       renderer: 'ssr',
     };
 

packages/common/env/src/global.ts

@@ -16,8 +16,10 @@ export function setupGlobal() {
     isPwa: false,
     isMobile: false,
     isSelfHosted: false,
+    // publicPath is the root of assets files
     publicPath: '/',
-    workerPath: '/js/',
+    // subPath is the path to access the affine service
+    subPath: '',
   };
 
   if (globalThis.navigator) {

packages/common/env/src/worker.ts

@@ -1,5 +1,7 @@
 export function getWorkerUrl(name: string) {
   return (
-    environment.workerPath + `${name}-${BUILD_CONFIG.appVersion}.worker.js`
+    environment.publicPath +
+    'js/' +
+    `${name}-${BUILD_CONFIG.appVersion}.worker.js`
   );
 }

packages/frontend/core/src/desktop/router.tsx

@@ -188,6 +188,7 @@ const createBrowserRouter = wrapCreateBrowserRouterV6(
 export const router = (
   window.SENTRY_RELEASE ? createBrowserRouter : reactRouterCreateBrowserRouter
 )(topLevelRoutes, {
+  basename: environment.subPath,
   future: {
     v7_normalizeFormMethod: true,
   },

tools/@types/env/__all.d.ts

@@ -37,7 +37,7 @@ declare type Environment = {
 
   // runtime configs
   publicPath: string;
-  workerPath: string
+  subPath: string;
 };
 
   var process: {