@nocobase/app 2.3.0-beta.3 → 3.0.0-alpha.11

package/__tests__/browserChecker.test.ts

@@ -0,0 +1,113 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import vm from 'node:vm';
+import { describe, expect, it } from 'vitest';
+
+const browserCheckerSource = readFileSync(resolve(__dirname, '../client-v2/public/browser-checker.js'), 'utf8');
+
+interface RunBrowserCheckerOptions {
+  appClientEntryMode?: string;
+  currentScriptSrc?: string;
+  hash?: string;
+  modernPrefix?: string;
+  pathname: string;
+  publicPath?: string;
+  search?: string;
+}
+
+function runBrowserChecker(options: RunBrowserCheckerOptions) {
+  const replacements: string[] = [];
+  const windowObject: Record<string, unknown> = {
+    __nocobase_app_client_entry_mode__: options.appClientEntryMode,
+    __nocobase_modern_client_prefix__: options.modernPrefix,
+    __nocobase_public_path__: options.publicPath ?? '/v/',
+    console: {
+      log: () => undefined,
+    },
+    devicePixelRatio: 1,
+    location: {
+      hash: options.hash ?? '',
+      origin: 'https://example.test',
+      pathname: options.pathname,
+      replace: (url: string) => replacements.push(url),
+      search: options.search ?? '',
+    },
+    outerHeight: 720,
+    outerWidth: 1280,
+  };
+  const documentElement = {
+    className: 'no-js',
+    clientHeight: 720,
+    clientWidth: 1280,
+  };
+
+  vm.runInNewContext(browserCheckerSource, {
+    console: {
+      debug: () => undefined,
+      log: () => undefined,
+    },
+    document: {
+      currentScript: {
+        src: options.currentScriptSrc ?? 'https://example.test/v/browser-checker.js',
+      },
+      documentElement,
+    },
+    navigator: {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+    },
+    window: windowObject,
+  });
+
+  return {
+    className: documentElement.className,
+    replacements,
+  };
+}
+
+describe('v2 browser checker', () => {
+  it.each([undefined, 'modern-default', 'modern-only', 'settings-default'] as const)(
+    'lets the modern client handle its root for entry mode %s',
+    (appClientEntryMode) => {
+      expect(
+        runBrowserChecker({
+          appClientEntryMode,
+          pathname: '/v/',
+        }).replacements,
+      ).toEqual([]);
+    },
+  );
+
+  it.each([undefined, 'modern-default', 'modern-only', 'settings-default'] as const)(
+    'lets scoped modern clients handle their roots for entry mode %s',
+    (appClientEntryMode) => {
+      expect(
+        runBrowserChecker({
+          appClientEntryMode,
+          pathname: '/v/apps/demo',
+          search: '?from=admin',
+          hash: '#portal',
+        }).replacements,
+      ).toEqual([]);
+    },
+  );
+
+  it('keeps Settings scoped trailing slash normalization independent from entry mode', () => {
+    expect(
+      runBrowserChecker({
+        currentScriptSrc: 'https://example.test/settings/browser-checker.js',
+        pathname: '/settings/apps/demo',
+        publicPath: '/',
+      }).replacements,
+    ).toEqual(['https://example.test/settings/apps/demo/']);
+  });
+});

package/__tests__/clientDevProxy.test.ts

@@ -0,0 +1,34 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { isClientDevProxyPath, rewriteClientDevProxyRootPath } from '../clientDevProxy';
+
+describe('client dev proxy', () => {
+  it.each([
+    ['/x', '/x/', true],
+    ['/x/', '/x/', true],
+    ['/x/test2/assets/index.js', '/x/', true],
+    ['/x-other', '/x/', false],
+    ['/console/v?from=portal', '/console/v/', true],
+    ['/v', '/console/v/', false],
+  ])('matches complete client base paths: %s', (url, basePath, expected) => {
+    expect(isClientDevProxyPath(url, basePath)).toBe(expected);
+  });
+
+  it.each([
+    ['/v', '/v/', '/v/'],
+    ['/v?from=portal', '/v/', '/v/?from=portal'],
+    ['/console/v#section', '/console/v/', '/console/v/#section'],
+    ['/v/admin', '/v/', '/v/admin'],
+    ['/v/', '/v/', '/v/'],
+  ])('normalizes only a slashless client root: %s', (url, basePath, expected) => {
+    expect(rewriteClientDevProxyRootPath(url, basePath)).toBe(expected);
+  });
+});

package/__tests__/settingsDevProxy.test.ts

@@ -0,0 +1,96 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { createSettingsDevProxyOptions, isSettingsDevPath, rewriteSettingsDevProxyPath } from '../settingsDevProxy';
+
+describe('settings dev proxy', () => {
+  it.each([
+    ['/settings', true],
+    ['/settings/signin', true],
+    ['/settings/signup', true],
+    ['/settings/forgot-password', true],
+    ['/settings/reset-password?resetToken=test-token', true],
+    ['/settings/2fa?redirect=%2Fsettings%2Fworkflow', true],
+    ['/settings/workflow/workflows/1?tab=nodes', true],
+    ['/settings/apps/demo/signin', true],
+    ['/settings/apps/demo', true],
+    ['/settings/apps/demo/workflow/workflows/1', true],
+    ['/settings/_app/demo/reset-password?resetToken=test-token', true],
+    ['/settings/_app/demo/ai/knowledge-base/detail/k1', true],
+    ['/nocobase/settings/assets/index.js', false],
+    ['/admin/settings', false],
+    ['/v/admin/settings', false],
+    ['/apps/demo/settings', false],
+    ['/_app/demo/settings', false],
+    ['/apps/demo/admin/settings', false],
+  ])('matches only standalone Settings paths: %s', (pathname, expected) => {
+    expect(isSettingsDevPath(pathname, '/')).toBe(expected);
+  });
+
+  it.each([
+    ['/nocobase/settings', true],
+    ['/nocobase/settings/signin', true],
+    ['/nocobase/settings/2fa?redirect=%2Fnocobase%2Fsettings', true],
+    ['/nocobase/settings/workflow/workflows/1', true],
+    ['/nocobase/settings/apps/demo/forgot-password', true],
+    ['/nocobase/settings/apps/demo', true],
+    ['/nocobase/settings/_app/demo/reset-password?resetToken=test-token', true],
+    ['/nocobase/settings/_app/demo/ai/knowledge-base/detail/k1', true],
+    ['/settings', false],
+    ['/nocobase/admin/settings', false],
+    ['/nocobase/apps/demo/settings', false],
+  ])('honors APP_PUBLIC_PATH: %s', (pathname, expected) => {
+    expect(isSettingsDevPath(pathname, '/nocobase/')).toBe(expected);
+  });
+
+  it.each([
+    ['/settings', '/', '/settings/'],
+    ['/settings?from=admin', '/', '/settings/?from=admin'],
+    ['/settings/apps/demo', '/', '/settings/apps/demo'],
+    ['/settings/_app/demo?from=admin', '/', '/settings/_app/demo?from=admin'],
+    ['/nocobase/settings', '/nocobase/', '/nocobase/settings/'],
+    ['/nocobase/settings/apps/demo?from=admin', '/nocobase/', '/nocobase/settings/apps/demo?from=admin'],
+    ['/nocobase/settings/_app/demo#portal', '/nocobase/', '/nocobase/settings/_app/demo#portal'],
+  ])('normalizes a Settings root to the dev-server base: %s', (pathname, publicPath, expected) => {
+    expect(rewriteSettingsDevProxyPath(pathname, publicPath)).toBe(expected);
+  });
+
+  it('preserves application-scoped documents for the Settings dev server', () => {
+    expect(rewriteSettingsDevProxyPath('/settings/apps/demo/workflow/workflows/1?tab=nodes', '/')).toBe(
+      '/settings/apps/demo/workflow/workflows/1?tab=nodes',
+    );
+    expect(rewriteSettingsDevProxyPath('/nocobase/settings/apps/demo/a#hash', '/nocobase/')).toBe(
+      '/nocobase/settings/apps/demo/a#hash',
+    );
+    expect(rewriteSettingsDevProxyPath('/settings/assets/index.js', '/')).toBe('/settings/assets/index.js');
+    expect(rewriteSettingsDevProxyPath('/settings/__rspack_hmr', '/')).toBe('/settings/__rspack_hmr');
+  });
+
+  it('creates a websocket-capable proxy for the Settings port', () => {
+    const options = createSettingsDevProxyOptions('/nocobase/', 13004);
+
+    expect(options).toMatchObject({
+      target: 'http://127.0.0.1:13004',
+      changeOrigin: true,
+      ws: true,
+      xfwd: true,
+    });
+    expect(options.context?.('/nocobase/settings/__rspack_hmr')).toBe(true);
+    expect(options.context?.('/nocobase/settings/signin')).toBe(true);
+    expect(options.context?.('/nocobase/settings/apps/demo/workflow')).toBe(true);
+    expect(options.context?.('/nocobase/settings/apps/demo/2fa')).toBe(true);
+    expect(options.context?.('/nocobase/settings/_app/demo/ai')).toBe(true);
+    expect(options.context?.('/nocobase/apps/demo/settings/workflow')).toBe(false);
+    expect(options.context?.('/nocobase/admin/settings')).toBe(false);
+    expect(options.pathRewrite?.('/nocobase/settings/apps/demo/workflow')).toBe(
+      '/nocobase/settings/apps/demo/workflow',
+    );
+  });
+});

package/__tests__/settingsPluginImports.test.ts

@@ -0,0 +1,106 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { existsSync, mkdtempSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import { generateSettingsPluginImports } from '../client-settings/generatePluginImports';
+
+const temporaryDirectories: string[] = [];
+
+function createTemporaryDirectory() {
+  const directory = mkdtempSync(path.join(tmpdir(), 'nocobase-settings-plugin-imports-'));
+  temporaryDirectories.push(directory);
+  return directory;
+}
+
+function createV2Plugin(pluginRoot: string) {
+  const pluginDirectory = path.join(pluginRoot, '@example', 'plugin-demo');
+  mkdirSync(pluginDirectory, { recursive: true });
+  writeFileSync(
+    path.join(pluginDirectory, 'package.json'),
+    JSON.stringify({ name: '@example/plugin-demo', version: '1.0.0' }),
+  );
+  writeFileSync(path.join(pluginDirectory, 'client-v2.js'), 'module.exports = {};');
+  mkdirSync(path.join(pluginDirectory, 'src', 'client-v2'), { recursive: true });
+  writeFileSync(path.join(pluginDirectory, 'src', 'client-v2', 'index.ts'), 'export default class DemoPlugin {}');
+}
+
+afterEach(() => {
+  for (const directory of temporaryDirectories.splice(0)) {
+    rmSync(directory, { recursive: true, force: true });
+  }
+});
+
+describe('Settings plugin imports', () => {
+  it('generates the existing V2 plugin lane into a Settings-owned directory', () => {
+    const root = createTemporaryDirectory();
+    const pluginRoot = path.join(root, 'plugins');
+    const settingsOutput = path.join(root, 'client-settings', 'src', '.plugins');
+    const clientV2Output = path.join(root, 'client-v2', 'src', '.plugins');
+    createV2Plugin(pluginRoot);
+    mkdirSync(clientV2Output, { recursive: true });
+    writeFileSync(path.join(clientV2Output, 'index.ts'), 'export const clientV2DevManifest = true;');
+
+    const localPluginsOnly = process.env.NOCOBASE_DEV_LOCAL_PLUGINS_ONLY;
+    process.env.NOCOBASE_DEV_LOCAL_PLUGINS_ONLY = 'true';
+    try {
+      generateSettingsPluginImports(settingsOutput, [pluginRoot]);
+    } finally {
+      if (localPluginsOnly === undefined) {
+        delete process.env.NOCOBASE_DEV_LOCAL_PLUGINS_ONLY;
+      } else {
+        process.env.NOCOBASE_DEV_LOCAL_PLUGINS_ONLY = localPluginsOnly;
+      }
+    }
+
+    expect(JSON.parse(readFileSync(path.join(settingsOutput, 'packageMap.json'), 'utf8'))).toEqual({
+      '@example/plugin-demo': 'example_plugin_demo.ts',
+    });
+    expect(readFileSync(path.join(clientV2Output, 'index.ts'), 'utf8')).toBe(
+      'export const clientV2DevManifest = true;',
+    );
+    expect(existsSync(path.join(settingsOutput, 'packages', 'example_plugin_demo.ts'))).toBe(true);
+  });
+
+  it('keeps a production Settings manifest isolated from the Client V2 development manifest', () => {
+    const root = createTemporaryDirectory();
+    const settingsOutput = path.join(root, 'client-settings', 'src', '.plugins');
+    const clientV2Output = path.join(root, 'client-v2', 'src', '.plugins');
+    mkdirSync(clientV2Output, { recursive: true });
+    writeFileSync(path.join(clientV2Output, 'index.ts'), 'export const clientV2DevManifest = true;');
+
+    const nodeEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+      generateSettingsPluginImports(settingsOutput, []);
+    } finally {
+      if (nodeEnv === undefined) {
+        delete process.env.NODE_ENV;
+      } else {
+        process.env.NODE_ENV = nodeEnv;
+      }
+    }
+
+    expect(readFileSync(path.join(settingsOutput, 'index.ts'), 'utf8')).toContain('return Promise.resolve(null)');
+    expect(readFileSync(path.join(clientV2Output, 'index.ts'), 'utf8')).toBe(
+      'export const clientV2DevManifest = true;',
+    );
+  });
+
+  it('wires the Settings config and entry to the Settings-owned generated directory', () => {
+    const configSource = readFileSync(path.resolve(__dirname, '../client-settings/rsbuild.config.ts'), 'utf8');
+    const entrySource = readFileSync(path.resolve(__dirname, '../client-settings/src/main.tsx'), 'utf8');
+
+    expect(configSource).not.toContain('generateV2Plugins');
+    expect(configSource).toContain("generateSettingsPluginImports(path.resolve(__dirname, 'src/.plugins'))");
+    expect(entrySource).toContain("from './.plugins'");
+  });
+});

package/client/public/browser-checker.js

@@ -54,7 +54,7 @@ if (basename !== '/' && currentPath === basenameWithoutTrailingSlash) {
   // This client-side redirect is still needed because legacy `index.html` is
   // not always served through the node gateway. In nginx/static delivery paths
   // the browser may already be running the legacy shell by the time entry-mode
-  // logic is evaluated, so the last hop into the modern entry has to be
+  // logic is evaluated, so the last hop into the configured default entry has to be
   // recoverable in the browser as well.
   const normalizedPath = normalizePathname(currentPath);
   const relativePath =
@@ -66,15 +66,22 @@ if (basename !== '/' && currentPath === basenameWithoutTrailingSlash) {
       ? normalizePathname(normalizedPath.slice(basename.length - 1))
       : null;
   const modernBase = `${trimTrailingSlash(basename)}/${modernClientPrefix}/`.replace(/\/{2,}/g, '/');
+  const settingsBase = `${basename}settings/`;
   const isModernDefault = appClientEntryMode === 'modern-default';
   const isModernOnly = appClientEntryMode === 'modern-only';
+  const isSettingsDefault = appClientEntryMode === 'settings-default';
+  const targetBase = isSettingsDefault ? settingsBase : modernBase;
   if (
     relativePath &&
     isClientDocumentEntryPath(relativePath) &&
-    (isModernDefault || isModernOnly) &&
-    !normalizedPath.startsWith(modernBase)
+    (isModernDefault || isModernOnly || isSettingsDefault) &&
+    !normalizedPath.startsWith(targetBase)
   ) {
-    const targetPath = isModernDefault
+    const targetPath = isSettingsDefault
+      ? relativePath === '/' || relativePath === '/index.html'
+        ? settingsBase
+        : null
+      : isModernDefault
       ? relativePath === '/' || relativePath === '/index.html'
         ? relativePath === '/index.html'
           ? `${modernBase}index.html`

package/client/rsbuild.config.ts

@@ -16,6 +16,8 @@ import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
 import { generatePlugins, getRsbuildBrowserAlias } from '@nocobase/devtools/rsbuildConfig';
+import { isClientDevProxyPath, rewriteClientDevProxyRootPath } from '../clientDevProxy';
+import { createSettingsDevProxyOptions } from '../settingsDevProxy';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -46,11 +48,19 @@ function toDefineLiteral(value: string | undefined) {
   return value === undefined ? 'undefined' : JSON.stringify(value);
 }
 
-function createRuntimeHeadScript(appPublicPath: string, isBuild: boolean) {
-  const modernClientPrefix =
-    String(process.env.APP_MODERN_CLIENT_PREFIX || 'v')
+function normalizeModernClientPrefix(value: string | undefined) {
+  const normalized =
+    String(value || 'v')
       .trim()
       .replace(/^\/+|\/+$/g, '') || 'v';
+  if (normalized === 'settings') {
+    throw new Error('APP_MODERN_CLIENT_PREFIX "settings" is reserved for the standalone Settings application.');
+  }
+  return normalized;
+}
+
+function createRuntimeHeadScript(appPublicPath: string, isBuild: boolean) {
+  const modernClientPrefix = normalizeModernClientPrefix(process.env.APP_MODERN_CLIENT_PREFIX);
   const appClientEntryMode = process.env.APP_CLIENT_ENTRY_MODE;
   if (!isBuild) {
     return [
@@ -109,16 +119,15 @@ export default defineConfig(({ command }) => {
   const localStorageBasePath = ensurePublicPath(`${resolvedAppPublicPath}storage/uploads/`, '/storage/uploads/');
   const staticBasePath = ensurePublicPath(`${resolvedAppPublicPath}static/`, '/static/');
   const wsBasePath = ensurePublicPath(process.env.WS_PATH, '/ws/');
-  const modernClientPrefix =
-    String(process.env.APP_MODERN_CLIENT_PREFIX || 'v')
-      .trim()
-      .replace(/^\/+|\/+$/g, '') || 'v';
+  const modernClientPrefix = normalizeModernClientPrefix(process.env.APP_MODERN_CLIENT_PREFIX);
   const v2BasePath = ensurePublicPath(
     `${resolvedAppPublicPath.replace(/\/$/, '')}/${modernClientPrefix}/`,
     `/${modernClientPrefix}/`,
   );
+  const portalBasePath = ensurePublicPath(`${resolvedAppPublicPath.replace(/\/$/, '')}/x/`, '/x/');
   const clientPort = toNumber(process.env.APP_PORT, 13001);
   const v2Port = toNumber(process.env.APP_V2_PORT, clientPort + 2);
+  const settingsPort = toNumber(process.env.APP_SETTINGS_PORT, clientPort + 3);
   const hmrPath = `${resolvedAppPublicPath.replace(/\/$/, '')}/__rspack_hmr`;
   const proxyTargetUrl = process.env.PROXY_TARGET_URL || `http://127.0.0.1:${clientPort + 1}`;
   const hmrClientHost = process.env.RSPACK_HMR_CLIENT_HOST;
@@ -209,8 +218,10 @@ export default defineConfig(({ command }) => {
       publicDir: {
         name: path.resolve(__dirname, 'public'),
       },
-      proxy: {
-        [apiBasePath]: {
+      proxy: [
+        createSettingsDevProxyOptions(resolvedAppPublicPath, settingsPort),
+        {
+          context: apiBasePath,
           target: proxyTargetUrl,
           changeOrigin: true,
           ws: true,
@@ -228,34 +239,44 @@ export default defineConfig(({ command }) => {
             }
           },
         },
-        [localStorageBasePath]: {
+        {
+          context: localStorageBasePath,
           target: proxyTargetUrl,
           changeOrigin: true,
         },
-        [fileBasePath]: {
+        {
+          context: fileBasePath,
           target: proxyTargetUrl,
           changeOrigin: true,
         },
-        [staticBasePath]: {
+        {
+          context: staticBasePath,
           target: proxyTargetUrl,
           changeOrigin: true,
         },
-        [wsBasePath]: {
+        {
+          context: wsBasePath,
           target: proxyTargetUrl,
           changeOrigin: true,
           ws: true,
           xfwd: true,
         },
-        [v2BasePath]: {
+        {
+          context: (pathname) => isClientDevProxyPath(pathname, v2BasePath),
           target: `http://127.0.0.1:${v2Port}`,
           changeOrigin: true,
           ws: true,
-          pathRewrite: {
-            [`^${v2BasePath}`]: v2BasePath,
-          },
+          pathRewrite: (pathname) => rewriteClientDevProxyRootPath(pathname, v2BasePath),
           xfwd: true,
         },
-      },
+        {
+          context: (pathname) => isClientDevProxyPath(pathname, portalBasePath),
+          target: proxyTargetUrl,
+          changeOrigin: true,
+          ws: true,
+          xfwd: true,
+        },
+      ],
       historyApiFallback: {
         disableDotRule: true,
         index: `${resolvedAppPublicPath}index.html`,

package/client-settings/generatePluginImports.ts

@@ -0,0 +1,36 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import path from 'node:path';
+import { IndexGenerator } from '../../devtools/common.js';
+
+type V2PluginIndexGenerator = new (
+  outputPath: string,
+  pluginPaths: string[],
+  options: {
+    clientModuleName: string;
+    clientRootFile: string;
+    clientSourceDir: string;
+  },
+) => { generate(): void };
+
+function getPluginDirectories() {
+  return (process.env.PLUGIN_PATH || 'packages/plugins/,packages/samples/,packages/pro-plugins/')
+    .split(',')
+    .map((directory) => path.resolve(process.cwd(), directory));
+}
+
+export function generateSettingsPluginImports(outputPath: string, pluginPaths = getPluginDirectories()) {
+  const Generator = IndexGenerator as unknown as V2PluginIndexGenerator;
+  new Generator(outputPath, pluginPaths, {
+    clientModuleName: 'client-v2',
+    clientRootFile: 'client-v2.js',
+    clientSourceDir: 'client-v2',
+  }).generate();
+}

package/client-settings/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>Loading...</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>