build: enhance nx build (#2948)

apps/web/next.config.mjs

@@ -53,24 +53,9 @@ const profileTarget = {
   local: '127.0.0.1:3000',
 };
 
-const getRedirectConfig = profile => {
-  const target = profileTarget[profile || 'dev'] || profileTarget['dev'];
-
-  return [
-    [
-      { source: '/api/:path*', destination: `http://${target}/api/:path*` },
-      {
-        source: '/collaboration/:path*',
-        destination: `http://${target}/collaboration/:path*`,
-      },
-    ],
-    target,
-    profile || 'dev',
-  ];
-};
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: 'export',
   sentry: {
     hideSourceMaps: true,
   },
@@ -123,7 +108,6 @@ const nextConfig = {
     serverAPI:
       profileTarget[process.env.API_SERVER_PROFILE || 'dev'] ??
       profileTarget.dev,
-    editorVersion: require('./package.json').dependencies['@blocksuite/editor'],
     editorFlags: blockSuiteFeatureFlags,
     ...buildFlags,
   },
@@ -162,13 +146,6 @@ const nextConfig = {
 
     return config;
   },
-  rewrites: async () => {
-    const [profile, target, desc] = getRedirectConfig(
-      process.env.API_SERVER_PROFILE
-    );
-    console.info(`API request proxy to [${desc} Server]: ` + target);
-    return profile;
-  },
   basePath: process.env.NEXT_BASE_PATH,
   assetPrefix: process.env.NEXT_ASSET_PREFIX,
   pageExtensions: [

apps/web/package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "export": "next export",
-    "start": "next start"
+    "start": "ts-node-esm server.mts"
   },
   "dependencies": {
     "@affine-test/fixtures": "workspace:*",
@@ -73,12 +72,14 @@
     "eslint": "^8.43.0",
     "eslint-config-next": "^13.4.7",
     "eslint-plugin-unicorn": "^47.0.0",
+    "express": "^4.18.2",
     "next": "=13.4.2",
     "next-debug-local": "^0.1.5",
     "next-router-mock": "^0.9.7",
     "raw-loader": "^4.0.2",
     "redux": "^4.2.1",
     "swc-plugin-coverage-instrument": "^0.0.18",
+    "ts-node": "^10.9.1",
     "typescript": "^5.1.5",
     "webpack": "^5.88.0"
   },

apps/web/project.json

@@ -0,0 +1,24 @@
+{
+  "name": "@affine/web",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "root": "apps/web",
+  "sourceRoot": "apps/web/src",
+  "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "dependsOn": ["^build"],
+      "options": {
+        "script": "build"
+      },
+      "outputs": ["{projectRoot}/out"]
+    },
+    "dev": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "dev"
+      },
+      "outputs": ["{projectRoot}/.next"]
+    }
+  }
+}

apps/web/server.mts

@@ -0,0 +1,34 @@
+// static server for web app
+import express from 'express';
+const app = express();
+
+const PORT = process.env.PORT || 8080;
+
+app.use('/', express.static('out'));
+
+app.use('/_debug/*', express.static('out/_debug/*.html'));
+app.use(
+  '/workspace/*/all',
+  express.static('out/workspace/[workspaceId]/all.html')
+);
+app.use(
+  '/workspace/*/setting',
+  express.static('out/workspace/[workspaceId]/all.html')
+);
+app.use(
+  '/workspace/*/shared',
+  express.static('out/workspace/[workspaceId]/shared.html')
+);
+app.use(
+  '/workspace/*/trash',
+  express.static('out/workspace/[workspaceId]/trash.html')
+);
+app.use(
+  '/workspace/*/*',
+  express.static('out/workspace/[workspaceId]/[pageId].html')
+);
+app.use('/*', express.static('out/404.html'));
+
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});

apps/web/src/components/root-app-sidebar/index.tsx

@@ -102,6 +102,7 @@ export const RootAppSidebar = ({
   const t = useAFFiNEI18N();
   const onClickNewPage = useCallback(async () => {
     const page = createPage();
+    await page.waitForLoaded();
     openPage(page.id);
   }, [createPage, openPage]);
 

apps/web/src/layouts/workspace-layout.tsx

@@ -282,14 +282,27 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
       currentWorkspace.blockSuiteWorkspace.meta._proxy.isEmpty = false;
       if (!router.query.pageId) {
         setCurrentPageId(pageId);
-        jumpToPage(currentWorkspace.id, pageId).catch(err => {
-          console.error(err);
-        });
+        jumpToPage(currentWorkspace.id, pageId).catch(console.error);
       }
     }
   }
   //#endregion
 
+  if (currentPageId) {
+    const pageExist =
+      currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+    if (router.pathname === '/[workspaceId]/[pageId]' && !pageExist) {
+      router.push('/404').catch(console.error);
+    }
+  } else if (
+    router.pathname === '/[workspaceId]/[pageId]' &&
+    typeof router.query.pageId === 'string' &&
+    router.query.pageId !== currentPageId
+  ) {
+    setCurrentPageId(router.query.pageId);
+    jumpToPage(currentWorkspace.id, router.query.pageId).catch(console.error);
+  }
+
   useEffect(() => {
     const backgroundProviders =
       currentWorkspace.blockSuiteWorkspace.providers.filter(
@@ -307,9 +320,6 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   }, [currentWorkspace]);
 
   useEffect(() => {
-    if (!currentWorkspace) {
-      return;
-    }
     const page = currentWorkspace.blockSuiteWorkspace.getPage(
       DEFAULT_HELLO_WORLD_PAGE_ID
     );

apps/web/tsconfig.json

@@ -18,7 +18,12 @@
     "experimentalDecorators": true,
     "types": ["react/experimental"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/types/types.d.ts"],
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/types/types.d.ts"
+  ],
   "exclude": ["node_modules"],
   "references": [
     {
@@ -55,6 +60,11 @@
     },
     {
       "path": "../../plugins/copilot"
+    },
+
+    // Static Server
+    {
+      "path": "./tsconfig.node.json"
     }
   ]
 }

apps/web/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./lib"
+  },
+  "include": ["server.mts"]
+}