feat: improve admin build

packages/backend/server/src/__tests__/app/selfhost.e2e.ts

@@ -97,7 +97,7 @@ test('should always return static asset files', async t => {
   t.is(res.text, "const name = 'affine'");
 
   res = await request(t.context.app.getHttpServer())
-    .get('/main.b.js')
+    .get('/admin/main.b.js')
     .expect(200);
   t.is(res.text, "const name = 'affine-admin'");
 
@@ -119,7 +119,7 @@ test('should always return static asset files', async t => {
   t.is(res.text, "const name = 'affine'");
 
   res = await request(t.context.app.getHttpServer())
-    .get('/main.b.js')
+    .get('/admin/main.b.js')
     .expect(200);
   t.is(res.text, "const name = 'affine-admin'");
 

packages/backend/server/src/core/selfhost/static.ts

@@ -52,7 +52,7 @@ export class StaticFilesResolver implements OnModuleInit {
 
     // serve all static files
     app.use(
-      basePath,
+      basePath + '/admin',
       serveStatic(join(staticPath, 'admin'), {
         redirect: false,
         index: false,

packages/frontend/admin/package.json

@@ -74,7 +74,7 @@
   "scripts": {
     "build": "affine bundle",
     "dev": "affine bundle --dev",
-    "update-shadcn": "shadcn-ui add -p src/components/ui"
+    "update-shadcn": "yarn dlx shadcn@latest add -p src/components/ui"
   },
   "exports": {
     "./*": "./src/*.ts",

tools/cli/bin/cli.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 import { spawnSync } from 'node:child_process';
 
 spawnSync('yarn', ['r', 'affine.ts', ...process.argv.slice(2)], {

tools/cli/src/bundle.ts

@@ -88,7 +88,11 @@ function getWebpackBundleConfigs(pkg: Package): webpack.MultiConfiguration {
   switch (pkg.name) {
     case '@affine/admin': {
       return [
-        createWebpackHTMLTargetConfig(pkg, pkg.srcPath.join('index.tsx').value),
+        createWebpackHTMLTargetConfig(
+          pkg,
+          pkg.srcPath.join('index.tsx').value,
+          { selfhostPublicPath: '/admin/' }
+        ),
       ] as webpack.MultiConfiguration;
     }
     case '@affine/web':
@@ -158,7 +162,9 @@ function getRspackBundleConfigs(pkg: Package): MultiRspackOptions {
   switch (pkg.name) {
     case '@affine/admin': {
       return [
-        createRspackHTMLTargetConfig(pkg, pkg.srcPath.join('index.tsx').value),
+        createRspackHTMLTargetConfig(pkg, pkg.srcPath.join('index.tsx').value, {
+          selfhostPublicPath: '/admin/',
+        }),
       ] as MultiRspackOptions;
     }
     case '@affine/web':

tools/cli/src/webpack/html-plugin.ts

@@ -79,6 +79,7 @@ const currentDir = Path.dir(import.meta.url);
 export interface CreateHTMLPluginConfig {
   filename?: string;
   additionalEntryForSelfhost?: boolean;
+  selfhostPublicPath?: string;
   injectGlobalErrorHandler?: boolean;
   emitAssetsManifest?: boolean;
 }
@@ -206,6 +207,7 @@ export function createHTMLPlugins(
 ): WebpackPluginInstance[] {
   const publicPath = getPublicPath(BUILD_CONFIG);
   const htmlPluginOptions = getHTMLPluginOptions(BUILD_CONFIG);
+  const selfhostPublicPath = config.selfhostPublicPath ?? '/';
 
   const plugins: WebpackPluginInstance[] = [];
   plugins.push(
@@ -269,9 +271,10 @@ export function createHTMLPlugins(
       new HTMLPlugin({
         ...htmlPluginOptions,
         chunks: ['index'],
+        publicPath: selfhostPublicPath,
         meta: {
           'env:isSelfHosted': 'true',
-          'env:publicPath': '/',
+          'env:publicPath': selfhostPublicPath,
         },
         filename: 'selfhost.html',
         templateParameters: {