fix: print and serve multiple environments html route correctly

e2e/cases/environments/outputs/index.test.ts

@@ -1,7 +1,7 @@
 import { build } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 
-test('should apply multiply dist path correctly', async () => {
+test('should apply multiple dist path correctly', async () => {
   const rsbuild = await build({
     cwd: __dirname,
     rsbuildConfig: {

e2e/cases/server/environments/index.test.ts

@@ -0,0 +1,86 @@
+import { dev } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+const cwd = __dirname;
+
+test('should serve multiple environments correctly', async ({ page }) => {
+  const rsbuild = await dev({
+    cwd,
+    rsbuildConfig: {
+      environments: {
+        web: {},
+        web1: {
+          dev: {
+            // When generating multiple environment web products, file search conflicts will occur if assetPrefix is ​​not added.
+            assetPrefix: 'auto',
+          },
+          source: {
+            entry: {
+              main: './src/web1.js',
+            },
+          },
+          output: {
+            distPath: {
+              root: 'dist/web1',
+              html: 'html1',
+            },
+          },
+        },
+      },
+    },
+  });
+
+  await page.goto(`http://localhost:${rsbuild.port}`);
+
+  const locator = page.locator('#test');
+  await expect(locator).toHaveText('Hello Rsbuild!');
+
+  await page.goto(`http://localhost:${rsbuild.port}/web1/html1/main`);
+
+  const locator1 = page.locator('#test');
+  await expect(locator1).toHaveText('Hello Rsbuild (web1)!');
+
+  await rsbuild.close();
+});
+
+// TODO: not support serve multiple environments when distPath different
+test.skip('serve multiple environments correctly when distPath different', async ({
+  page,
+}) => {
+  const rsbuild = await dev({
+    cwd,
+    rsbuildConfig: {
+      environments: {
+        web: {},
+        web1: {
+          dev: {
+            assetPrefix: 'auto',
+          },
+          source: {
+            entry: {
+              main: './src/web1.js',
+            },
+          },
+          output: {
+            distPath: {
+              root: 'dist1',
+              html: 'html1',
+            },
+          },
+        },
+      },
+    },
+  });
+
+  await page.goto(`http://localhost:${rsbuild.port}/dist`);
+
+  const locator = page.locator('#test');
+  await expect(locator).toHaveText('Hello Rsbuild!');
+
+  await page.goto(`http://localhost:${rsbuild.port}/dist1/html1/main`);
+
+  const locator1 = page.locator('#test');
+  await expect(locator1).toHaveText('Hello Rsbuild (web1)!');
+
+  await rsbuild.close();
+});

e2e/cases/server/environments/src/index.js

@@ -0,0 +1,5 @@
+const testEl = document.createElement('div');
+testEl.id = 'test';
+testEl.innerHTML = 'Hello Rsbuild!';
+
+document.body.appendChild(testEl);

e2e/cases/server/environments/src/web1.js

@@ -0,0 +1,5 @@
+const testEl = document.createElement('div');
+testEl.id = 'test';
+testEl.innerHTML = 'Hello Rsbuild (web1)!';
+
+document.body.appendChild(testEl);

e2e/cases/server/print-urls/index.test.ts

@@ -33,6 +33,62 @@ test('should print server urls correctly when printUrls is true', async ({
   restore();
 });
 
+test('should print different environment server urls correctly', async ({
+  page,
+}) => {
+  const { logs, restore } = proxyConsole('log');
+
+  const rsbuild = await dev({
+    cwd,
+    rsbuildConfig: {
+      server: {
+        printUrls: true,
+      },
+      environments: {
+        web: {
+          output: {
+            distPath: {
+              html: 'html0',
+            },
+          },
+        },
+        web1: {
+          source: {
+            entry: {
+              main: './src/index.js',
+            },
+          },
+          html: {
+            outputStructure: 'nested',
+          },
+          output: {
+            distPath: {
+              html: 'html1',
+            },
+          },
+        },
+      },
+    },
+  });
+
+  await page.goto(`http://localhost:${rsbuild.port}`);
+
+  const localIndexLog = logs.find(
+    (log) => log.includes('Local:') && log.includes('/html0'),
+  );
+
+  expect(localIndexLog).toBeTruthy();
+
+  const localMainLog = logs.find(
+    (log) => log.includes('Local:') && log.includes('/html1/main'),
+  );
+
+  expect(localMainLog).toBeTruthy();
+
+  await rsbuild.close();
+  restore();
+});
+
 test('should not print server urls when printUrls is false', async ({
   page,
 }) => {

packages/compat/plugin-swc/tests/__snapshots__/plugin.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`plugin-swc > should apply multiply environment configs correctly 1`] = `
+exports[`plugin-swc > should apply multiple environment configs correctly 1`] = `
 [
   {
     "module": {

packages/compat/plugin-swc/tests/plugin.test.ts

@@ -29,7 +29,7 @@ describe('plugin-swc', () => {
     expect(config).toMatchSnapshot();
   });
 
-  it('should apply multiply environment configs correctly', async () => {
+  it('should apply multiple environment configs correctly', async () => {
     const rsbuild = await createStubRsbuild({
       plugins: [pluginSwc()],
       rsbuildConfig: {

packages/core/src/cli/commands.ts

@@ -94,6 +94,7 @@ export function runCli() {
     .action(async (options: PreviewOptions) => {
       try {
         const rsbuild = await init({ cliOptions: options });
+        await rsbuild?.initConfigs();
 
         if (rsbuild) {
           const { distPath } = rsbuild.context;

packages/core/src/server/devServer.ts

@@ -26,8 +26,8 @@ import {
 import {
   type StartServerResult,
   type UpgradeEvent,
-  formatRoutes,
   getAddressUrls,
+  getRoutes,
   getServerConfig,
   printServerURLs,
 } from './helper';
@@ -117,14 +117,7 @@ export async function createDevServer<
   });
   const devConfig = formatDevConfig(config.dev, port);
 
-  const routes = formatRoutes(
-    Object.values(options.context.environments).reduce(
-      (prev, context) => Object.assign(prev, context.htmlPaths),
-      {},
-    ),
-    config.output.distPath.html,
-    config.html.outputStructure,
-  );
+  const routes = getRoutes(options.context);
 
   options.context.devServer = {
     hostname: host,
@@ -210,7 +203,7 @@ export async function createDevServer<
     dev: devConfig,
     server: config.server,
     output: {
-      distPath: config.output.distPath.root || ROOT_DIST_DIR,
+      distPath: options.context.distPath || ROOT_DIST_DIR,
     },
     outputFileSystem,
   });

packages/core/src/server/helper.ts

@@ -2,6 +2,7 @@ import type { IncomingMessage } from 'node:http';
 import net from 'node:net';
 import type { Socket } from 'node:net';
 import os from 'node:os';
+import { join, relative } from 'node:path';
 import { color } from '@rsbuild/shared';
 import type {
   NormalizedConfig,
@@ -13,6 +14,7 @@ import type {
 import { DEFAULT_DEV_HOST, DEFAULT_PORT } from '../constants';
 import { isFunction } from '../helpers';
 import { logger } from '../logger';
+import type { InternalContext } from '../types';
 
 /**
  * It used to subscribe http upgrade event
@@ -47,6 +49,29 @@ const formatPrefix = (prefix: string | undefined) => {
   return `${hasLeadingSlash ? '' : '/'}${prefix}${hasTailSlash ? '' : '/'}`;
 };
 
+export const getRoutes = (context: InternalContext): Routes => {
+  return Object.entries(context.environments).reduce<Routes>(
+    (prev, [name, environmentContext]) => {
+      const distPrefix = relative(
+        context.distPath,
+        environmentContext.distPath,
+      );
+
+      const environmentConfig = context.pluginAPI!.getNormalizedConfig({
+        environment: name,
+      });
+
+      const routes = formatRoutes(
+        environmentContext.htmlPaths,
+        join(distPrefix, environmentConfig.output.distPath.html),
+        environmentConfig.html.outputStructure,
+      );
+      return prev.concat(...routes);
+    },
+    [],
+  );
+};
+
 /*
  * format route by entry and adjust the index route to be the first
  */

packages/core/src/server/prodServer.ts

@@ -13,8 +13,8 @@ import { logger } from '../logger';
 import type { InternalContext, NormalizedConfig } from '../types';
 import {
   type StartServerResult,
-  formatRoutes,
   getAddressUrls,
+  getRoutes,
   getServerConfig,
   printServerURLs,
 } from './helper';
@@ -189,14 +189,7 @@ export async function startProdServer(
         port,
       },
       async () => {
-        const routes = formatRoutes(
-          Object.values(context.environments).reduce(
-            (prev, context) => Object.assign(prev, context.htmlPaths),
-            {},
-          ),
-          config.output.distPath.html,
-          config.html.outputStructure,
-        );
+        const routes = getRoutes(context);
         await context.hooks.onAfterStartProdServer.call({
           port,
           routes,

packages/core/tests/__snapshots__/entry.test.ts.snap

@@ -1,5 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`plugin-entry > should apply different environments entry config correctly 1`] = `
+[
+  {
+    "entry": {
+      "index": [
+        "src/index.client",
+      ],
+    },
+  },
+  {
+    "entry": {
+      "main": [
+        "src/index.ssr",
+      ],
+    },
+  },
+]
+`;
+
 exports[`plugin-entry > should apply environments entry config correctly 1`] = `
 [
   {

packages/core/tests/__snapshots__/output.test.ts.snap

@@ -75,7 +75,7 @@ exports[`plugin-output > should allow to use copy plugin 1`] = `
 }
 `;
 
-exports[`plugin-output > should allow to use copy plugin with multiply config 1`] = `
+exports[`plugin-output > should allow to use copy plugin with multiple config 1`] = `
 {
   "output": {
     "chunkFilename": "static/js/async/[name].js",

packages/core/tests/entry.test.ts

@@ -87,4 +87,32 @@ describe('plugin-entry', () => {
     const configs = await rsbuild.initConfigs();
     expect(configs).toMatchSnapshot();
   });
+
+  it('should apply different environments entry config correctly', async () => {
+    const rsbuild = await createStubRsbuild({
+      plugins: [pluginEntry()],
+      rsbuildConfig: {
+        environments: {
+          web: {
+            source: {
+              entry: {
+                index: './src/index.client',
+              },
+            },
+          },
+          ssr: {
+            source: {
+              entry: {
+                main: './src/index.ssr',
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const configs = await rsbuild.initConfigs();
+
+    expect(configs).toMatchSnapshot();
+  });
 });