feat: init renderer server (#8088)

tools/cli/src/bin/build.ts

@@ -31,7 +31,7 @@ const getChannel = () => {
 
 let entry: BuildFlags['entry'];
 
-const { DISTRIBUTION } = process.env;
+const { DISTRIBUTION = 'web' } = process.env;
 
 const cwd = getCwdFromDistribution(DISTRIBUTION);
 

tools/cli/src/bin/dev.ts

@@ -13,7 +13,7 @@ import { createWebpackConfig } from '../webpack/webpack.config.js';
 
 const flags: BuildFlags = {
   distribution:
-    (process.env.DISTRIBUTION as BuildFlags['distribution']) ?? 'browser',
+    (process.env.DISTRIBUTION as BuildFlags['distribution']) ?? 'web',
   mode: 'development',
   static: false,
   channel: 'canary',
@@ -42,7 +42,7 @@ const buildFlags = process.argv.includes('--static')
             message: 'Distribution',
             options: [
               {
-                value: 'browser',
+                value: 'web',
               },
               {
                 value: 'desktop',
@@ -54,7 +54,7 @@ const buildFlags = process.argv.includes('--static')
                 value: 'mobile',
               },
             ],
-            initialValue: 'browser',
+            initialValue: 'web',
           }),
         mode: () =>
           p.select({

tools/cli/src/config/cwd.cjs

@@ -15,7 +15,7 @@ module.exports.getCwdFromDistribution = function getCwdFromDistribution(
   distribution
 ) {
   switch (distribution) {
-    case 'browser':
+    case 'web':
     case undefined:
     case null:
       return join(projectRoot, 'packages/frontend/web');
@@ -26,7 +26,9 @@ module.exports.getCwdFromDistribution = function getCwdFromDistribution(
     case 'mobile':
       return join(projectRoot, 'packages/frontend/mobile');
     default: {
-      throw new Error('DISTRIBUTION must be one of browser, desktop');
+      throw new Error(
+        'DISTRIBUTION must be one of web, desktop, admin, mobile'
+      );
     }
   }
 };

tools/cli/src/config/index.ts

@@ -1,5 +1,5 @@
 export type BuildFlags = {
-  distribution: 'browser' | 'desktop' | 'admin' | 'mobile';
+  distribution: 'web' | 'desktop' | 'admin' | 'mobile';
   mode: 'development' | 'production';
   channel: 'stable' | 'beta' | 'canary' | 'internal';
   static: boolean;

tools/cli/src/webpack/template.html

@@ -8,6 +8,7 @@
     />
     <title>AFFiNE</title>
     <meta name="theme-color" content="#fafafa" />
+    <link rel="preconnect" href="<%= PUBLIC_PATH %>" />
     <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" />

tools/cli/src/webpack/webpack.config.ts

@@ -5,6 +5,7 @@ import type { BuildFlags } from '@affine/cli/config';
 import { Repository } from '@napi-rs/simple-git';
 import HTMLPlugin from 'html-webpack-plugin';
 import { once } from 'lodash-es';
+import webpack from 'webpack';
 import { merge } from 'webpack-merge';
 
 import { createConfiguration, rootPath, workspaceRoot } from './config.js';
@@ -48,9 +49,32 @@ export function createWebpackConfig(cwd: string, flags: BuildFlags) {
       minify: false,
       chunks: [entryName],
       filename: `${entryName === 'app' ? 'index' : entryName}.html`, // main entry should take name index.html
-      templateParameters: {
-        GIT_SHORT_SHA: gitShortHash(),
-        DESCRIPTION,
+      templateParameters: (compilation, assets) => {
+        if (entryName === 'app') {
+          // emit assets manifest for ssr
+          compilation.emitAsset(
+            `assets-manifest.json`,
+            new webpack.sources.RawSource(
+              JSON.stringify(
+                {
+                  ...assets,
+                  gitHash: gitShortHash(),
+                  description: DESCRIPTION,
+                },
+                null,
+                2
+              )
+            ),
+            {
+              immutable: true,
+            }
+          );
+        }
+        return {
+          GIT_SHORT_SHA: gitShortHash(),
+          DESCRIPTION,
+          PUBLIC_PATH: config.output?.publicPath,
+        };
       },
     });
   };