@gravity-ui/app-builder 0.31.1 → 0.31.2-beta.0

package/README.md

@@ -113,6 +113,25 @@ export default config;
 - `target` (`client | server`) — select compilation unit.
 - `verbose` (`boolean`) - turn on verbose output.
 
+#### Environment Variables
+
+`app-builder` automatically injects environment variables during the build process that are available in your application code:
+
+- `process.env.PUBLIC_PATH` — automatically set to the resolved public path value (including CDN URLs if configured). This allows your application code to dynamically access the correct resource URLs at runtime.
+
+  ```ts
+  // In your application code, you can access:
+  const publicPath = process.env.PUBLIC_PATH; // e.g., "https://cdn.example.com/build/" or "/build/"
+
+  // Useful for dynamically loading assets or configuring Module Federation
+  const assetUrl = `${process.env.PUBLIC_PATH}images/logo.png`;
+  ```
+
+  **Note**: On the server side, `process.env.PUBLIC_PATH` is only available when using SWC compiler (`compiler: 'swc'`). With TypeScript compiler, this variable is not injected.
+
+- `process.env.NODE_ENV` — current environment (`'development'` | `'production'`)
+- `process.env.IS_SSR` — boolean flag indicating if code is running in SSR context
+
 ### Server
 
 `app-builder` compiles server with typescript.
@@ -238,6 +257,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `prefix` (`string`) — path to files inside the bucket
   - `region` (`string`) — AWS region or any string
   - `endpoint` (`string`) - cdn host to upload files
+  - `publicPath` (`string`) - public path to access files from the browser
   - `compress` (`boolean`) - upload also gzip and brotli compressed versions of files
   - `additionalPattern` (`string[]`) — patterns for uploading additional files. By default, only files generated by webpack are loaded.
 - `sentryConfig` (`Options`) — `@sentry/webpack-plugin` [configuration options](https://www.npmjs.com/package/@sentry/webpack-plugin/v/2.7.1).
@@ -338,18 +358,158 @@ Module Federation is a Webpack 5 feature that enables micro-frontend architectur
 `app-builder` uses `@module-federation/enhanced` for advanced Module Federation support.
 
 - `moduleFederation` (`object`) — Module Federation configuration
+
   - `name` (`string`) — unique name of the application in the Module Federation ecosystem. Required parameter.
   - `version` (`string`) — application version. When specified, the entry file will be named `entry-{version}.js` instead of `entry.js`.
   - `disableManifest` (`boolean`) — disable manifest file generation. When `true`, uses regular `.js` files for remote entry instead of manifest files. Default is `false`.
-  - `publicPath` (`string`) — base URL for loading resources of this micro-frontend. Required parameter.
-  - `remotes` (`string[]`) — list of remote application names that this application can load. Simplified alternative to `originalRemotes`.
-  - `originalRemotes` (`RemotesObject`) — full configuration of remote applications in Module Federation Plugin format.
-  - `remotesRuntimeVersioning` (`boolean`) — enables runtime versioning for remote applications.
+  - `remotes` (`string[]`) — list of remote application names that this application can load. This is a simplified alternative to `originalRemotes` that automatically generates remote URLs based on your public path configuration.
+
+    **How it works:**
+
+    - In **development mode**: Remote URLs are automatically generated using the pattern `{commonPublicPath}{remoteName}/entry.js` (or manifest files if enabled)
+    - In **production mode**: You need to ensure remote applications are deployed and accessible at the expected URLs
+    - Remote entry files are loaded at runtime to provide federated modules from other micro-frontends
+
+    **File naming patterns** (depends on configuration):
+
+    - With `disableManifest: false` (default): `mf-manifest.json` or `mf-manifest-[version].json` (with versioning)
+    - With `disableManifest: true`: `entry.js` or `entry-[version].js` (with versioning)
+
+    **Example:**
+
+    ```ts
+    // Simple configuration - URLs auto-generated in development
+    remotes: ['header', 'navigation', 'footer'];
+
+    // Results in loading from (in development):
+    // - https://localhost:3000/header/mf-manifest.json
+    // - https://localhost:3000/navigation/mf-manifest.json
+    // - https://localhost:3000/footer/mf-manifest.json
+    ```
+
+    **Development vs Production:**
+
+    - **Development**: App-builder automatically starts all remote applications and generates their URLs
+    - **Production**: Remote applications must be independently deployed and accessible at the generated URLs
+
+    **Integration with other options:**
+
+    - Works with `enabledRemotes` to selectively enable remotes in development
+    - Affected by `remotesRuntimeVersioning` for versioned file names
+    - File format controlled by `disableManifest` option
+
+    For more complex scenarios requiring custom URLs or cross-environment configurations, use `originalRemotes` instead.
+
+  - `enabledRemotes` (`string[]`) — list of enabled remotes for module federation. **Development mode only**. If not specified, all remotes from the `remotes` array will be enabled by default.
+
+    **Purpose:**
+
+    - Allows selective enabling/disabling of specific remotes during development
+    - Useful for debugging, testing individual micro-frontends, or working with partial system setups
+    - Helps reduce development startup time by loading only needed remotes
+    - Can be overridden via CLI flag: `--mf-remotes=header,footer`
+
+    **Loading behavior:**
+
+    - **Enabled remotes**: Loaded from local development server (auto-started by app-builder)
+    - **Disabled remotes**: Loaded from CDN (if `publicPathPrefix` or CDN configuration is available), allowing you to use stable production versions while developing specific parts locally
+
+    **Example:**
+
+    ```ts
+    // Load all available remotes (header, navigation, footer)
+    remotes: ['header', 'navigation', 'footer'];
+
+    // Enable only specific remotes in development
+    enabledRemotes: ['header', 'footer']; // navigation will be skipped
+    ```
+
+    **CLI Override:**
+
+    ```bash
+    # Override enabledRemotes from command line
+    npx app-builder dev --mf-remotes=header,navigation
+    ```
+
+    **Note:** This option has no effect in production builds - all configured remotes will be included in the production bundle configuration.
+
+  - `originalRemotes` (`RemotesObject`) — full configuration of remote applications in Module Federation Plugin format. Use this when you need explicit control over remote URLs or for cross-environment deployments.
+
+    **When to use:**
+
+    - Custom remote URLs (different domains, ports, paths)
+    - Cross-environment loading (staging, production CDN URLs)
+    - Complex deployment scenarios
+    - When `remotes` auto-generation doesn't meet your needs
+
+    **Format:**
+
+    ```ts
+    originalRemotes: {
+      remoteName: 'remoteName@remoteUrl',
+    }
+    ```
+
+    **Examples:**
+
+    ```ts
+    originalRemotes: {
+      header: 'header@https://cdn.example.com/header/entry.js',
+      footer: 'footer@https://cdn.example.com/footer/entry.js',
+    }
+    ```
+
+    **Note:** When `originalRemotes` is specified, the `remotes` option is ignored. Use either `remotes` OR `originalRemotes`, not both.
+
+  - `remotesRuntimeVersioning` (`boolean`) — enables runtime versioning for remote applications. When enabled, remote entry files include version information in their filenames, allowing for cache busting and version-specific loading.
+
+    **How it affects file names:**
+
+    - With `disableManifest: false`: `mf-manifest-[version].json` instead of `mf-manifest.json`
+    - With `disableManifest: true`: `entry-[version].js` instead of `entry.js`
+    - Version is taken from the remote application's `version` configuration
+
+    **Benefits:**
+
+    - **Cache busting**: Different versions get different URLs, preventing browser caching issues
+    - **Rollback capability**: Can load specific versions of remotes
+    - **Deployment safety**: Gradual rollouts with version-specific remote loading
+
+    **Example with versioning enabled:**
+
+    ```ts
+    // Host application
+    {
+      moduleFederation: {
+        name: 'shell',
+        remotes: ['header', 'navigation'],
+        remotesRuntimeVersioning: true, // Enable versioning
+      }
+    }
+
+    // Remote application (header)
+    {
+      moduleFederation: {
+        name: 'header',
+        version: '2.1.0', // This version appears in filename
+        exposes: { './Header': './src/Header' }
+      }
+    }
+
+    // Results in loading: header/mf-manifest-2.1.0.json
+    ```
+
+    **Runtime behavior:**
+
+    - The version is resolved at runtime from the remote's manifest or entry file
+    - Enables loading different versions of the same remote in different environments
+    - Works with both `remotes` and `originalRemotes` configurations
+
   - `isolateStyles` (`object`) — CSS style isolation settings to prevent conflicts between micro-frontends.
     - `getPrefix` (`(entryName: string) => string`) — function to generate CSS class prefix.
     - `prefixSelector` (`(prefix: string, selector: string, prefixedSelector: string, filePath: string) => string`) — function to add prefix to CSS selectors.
   - Also supports all standard options from [@module-federation/enhanced](https://module-federation.io/), except `name` and `remotes`, such as:
-    - `filename` — entry file name (default `remoteEntry.js`)
+    - `filename` — entry file name (default `entry.js`)
     - `exposes` — modules that this application exports
     - `shared` — shared dependencies between applications
     - `runtimePlugins` — plugins for Module Federation runtime
@@ -363,7 +523,6 @@ export default defineConfig({
   client: {
     moduleFederation: {
       name: 'shell',
-      publicPath: 'https://cdn.example.com/my-app/',
       // Simple remotes configuration
       remotes: ['header', 'footer', 'sidebar'],
       shared: {
@@ -384,12 +543,11 @@ export default defineConfig({
     moduleFederation: {
       name: 'main-shell',
       version: '2.1.0',
-      publicPath: 'https://cdn.example.com/my-app/',
       // Detailed remotes configuration
       originalRemotes: {
-        header: 'header@https://cdn.example.com/header/remoteEntry.js',
-        footer: 'footer@https://cdn.example.com/footer/remoteEntry.js',
-        userProfile: 'userProfile@https://cdn.example.com/user-profile/remoteEntry.js',
+        header: 'header@https://cdn.example.com/header/entry.js',
+        footer: 'footer@https://cdn.example.com/footer/entry.js',
+        userProfile: 'userProfile@https://cdn.example.com/user-profile/entry.js',
       },
       remotesRuntimeVersioning: true,
       isolateStyles: {
@@ -425,7 +583,6 @@ export default defineConfig({
   client: {
     moduleFederation: {
       name: 'header',
-      publicPath: 'https://cdn.example.com/my-app/',
       // Expose modules for other applications
       exposes: {
         './Header': './src/components/Header',
@@ -452,7 +609,6 @@ export default defineConfig({
     moduleFederation: {
       name: 'dashboard',
       version: '1.5.0',
-      publicPath: 'https://cdn.example.com/my-app/',
       // Consume remote modules
       remotes: ['charts', 'notifications'],
       // Expose own modules
@@ -469,3 +625,73 @@ export default defineConfig({
   },
 });
 ```
+
+**Advanced Remotes Configuration Examples:**
+
+```ts
+export default defineConfig({
+  client: {
+    moduleFederation: {
+      name: 'advanced-shell',
+      version: '3.0.0',
+
+      // Example 1: Simple remotes for development
+      remotes: ['header', 'sidebar', 'footer', 'analytics'],
+
+      // Example 2: Enable only specific remotes in development
+      enabledRemotes: ['header', 'sidebar'], // Only these will load in dev mode
+
+      // Example 3: Runtime versioning with manifests (production-ready)
+      remotesRuntimeVersioning: true, // Enables version-specific loading
+      disableManifest: false, // Use mf-manifest-[version].json files
+
+      shared: {
+        react: {singleton: true, requiredVersion: '^18.0.0'},
+        'react-dom': {singleton: true, requiredVersion: '^18.0.0'},
+      },
+    },
+  },
+});
+
+// Alternative: Explicit URLs for production
+export default defineConfig({
+  client: {
+    moduleFederation: {
+      name: 'production-shell',
+
+      // Use originalRemotes for explicit control
+      originalRemotes: {
+        // Static CDN URLs
+        header: 'header@https://cdn.company.com/header/mf-manifest-2.1.0.json',
+        sidebar: 'sidebar@https://cdn.company.com/sidebar/entry-1.5.0.js',
+
+        // Dynamic remote loading
+        analytics: `promise new Promise((resolve) => {
+          const remoteUrl = process.env.NODE_ENV === 'production' 
+            ? 'https://analytics.cdn.com/entry.js'
+            : 'http://localhost:3003/entry.js';
+          resolve(\`analytics@\${remoteUrl}\`);
+        })`,
+      },
+
+      shared: {
+        react: {singleton: true, requiredVersion: '^18.0.0'},
+        'react-dom': {singleton: true, requiredVersion: '^18.0.0'},
+      },
+    },
+  },
+});
+```
+
+**Development Workflow with Remotes:**
+
+```bash
+# Start host application with all remotes
+npx app-builder dev
+
+# Start host with only specific remotes (faster development)
+npx app-builder dev --mf-remotes=header,sidebar
+
+# The above is equivalent to setting enabledRemotes in config:
+# enabledRemotes: ['header', 'sidebar']
+```

package/dist/commands/build/build-service/server.js

@@ -20,6 +20,7 @@ compile({
     projectPath: ${JSON.stringify(paths_1.default.appServer)},
     additionalPaths: ${JSON.stringify(config.server.swcOptions?.additionalPaths)},
     exclude: ${JSON.stringify(config.server.swcOptions?.exclude)},
+    publicPath: ${JSON.stringify(config.client.browserPublicPath)},
 });`;
 }
 function createTypescriptBuildScript(config) {

package/dist/commands/dev/server.js

@@ -74,6 +74,7 @@ watch(
         },
         additionalPaths: ${JSON.stringify(config.server.swcOptions?.additionalPaths)},
         exclude: ${JSON.stringify(config.server.swcOptions?.exclude)},
+        publicPath: ${JSON.stringify(config.client.browserPublicPath)},
     }
 );`;
 }

package/dist/common/config.js

@@ -144,6 +144,9 @@ async function getProjectConfig(command, { env, storybook, ...argv }) {
             ...omitUndefined(server),
         },
     };
+    if (projectConfig.client?.moduleFederation && argv.mfRemotes) {
+        projectConfig.client.moduleFederation.enabledRemotes = argv.mfRemotes;
+    }
     return normalizeConfig(projectConfig, command);
 }
 async function normalizeConfig(userConfig, mode) {
@@ -187,10 +190,14 @@ async function normalizeConfig(userConfig, mode) {
     config.lib.newJsxTransform = config.lib.newJsxTransform ?? true;
     return config;
 }
+// TODO(DakEnviy): Make mode type strict
 async function normalizeClientConfig(client, mode) {
+    const cdnConfig = Array.isArray(client.cdn) ? client.cdn[0] : client.cdn;
     let publicPath = client.publicPath || path.normalize(`${client.publicPathPrefix || ''}/build/`);
+    let browserPublicPath = (mode !== 'dev' && cdnConfig?.publicPath) || publicPath;
     if (client.moduleFederation) {
         publicPath = path.normalize(`${publicPath}${client.moduleFederation.name}/`);
+        browserPublicPath = path.normalize(`${browserPublicPath}${client.moduleFederation.name}/`);
     }
     let transformCssWithLightningCss = Boolean(client.transformCssWithLightningCss);
     if (client.moduleFederation?.isolateStyles && transformCssWithLightningCss) {
@@ -208,6 +215,8 @@ async function normalizeClientConfig(client, mode) {
             : (client.reactRefresh ?? ((options) => options)),
         newJsxTransform: client.newJsxTransform ?? true,
         publicPath,
+        cdnPublicPath: cdnConfig?.publicPath,
+        browserPublicPath,
         assetsManifestFile: client.assetsManifestFile ||
             (client.moduleFederation?.version
                 ? `assets-manifest-${client.moduleFederation.version}.json`

package/dist/common/models/index.d.ts

@@ -77,22 +77,23 @@ export type ModuleFederationConfig = Omit<moduleFederationPlugin.ModuleFederatio
      * @default false
      */
     disableManifest?: boolean;
-    /**
-     * Base URL for loading resources of this micro-frontend
-     * Should point to a publicly accessible URL where the files will be hosted
-     * @example 'https://cdn.example.com/my-app/'
-     */
-    publicPath: string;
     /**
      * List of remote application names that this application can load
      * Simplified alternative to originalRemotes - only names are specified
      * @example ['header', 'footer', 'navigation']
      */
     remotes?: string[];
+    /**
+     * List of enabled remotes for module federation
+     * If not specified, all remotes will be enabled by default
+     * It used only for development mode
+     * @example ['header', 'navigation']
+     */
+    enabledRemotes?: string[];
     /**
      * Full configuration of remote applications in Module Federation format
      * Allows more detailed configuration of each remote application
-     * @example { header: 'header@https://header.example.com/remoteEntry.js' }
+     * @example { header: 'header@https://header.example.com/entry.js' }
      */
     originalRemotes?: moduleFederationPlugin.ModuleFederationPluginOptions['remotes'];
     /**
@@ -323,6 +324,7 @@ export interface CdnUploadConfig {
     prefix?: string;
     region?: string;
     endpoint?: string;
+    publicPath?: string;
     compress?: boolean;
     cacheControl?: UploadOptions['cacheControl'];
     /**
@@ -361,7 +363,22 @@ export interface ServiceConfig {
 export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'publicPath' | 'assetsManifestFile' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh' | 'transformCssWithLightningCss'> & {
     bundler: Bundler;
     javaScriptLoader: JavaScriptLoader;
+    /**
+     * Build public path
+     * (concatenated with micro-frontend name if module federation is configured).
+     */
     publicPath: string;
+    /**
+     * Public path for CDN,
+     * it presents even if CDN is disabled.
+     */
+    cdnPublicPath?: string;
+    /**
+     * Final public path for browser,
+     * it is based on cdnPublicPath if CDN is enabled or publicPath otherwise
+     * (concatenated with micro-frontend name if module federation is configured).
+     */
+    browserPublicPath: string;
     assetsManifestFile: string;
     hiddenSourceMap: boolean;
     svgr: NonNullable<ClientConfig['svgr']>;
@@ -378,6 +395,7 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'pu
     }) => Configuration | Promise<Configuration>;
     rspack: (config: RspackConfiguration, options: {
         configType: `${WebpackMode}`;
+        isSsr: boolean;
     }) => RspackConfiguration | Promise<RspackConfiguration>;
     debugWebpack?: boolean;
     babel: (config: Babel.TransformOptions, options: {

package/dist/common/swc/compile.d.ts

@@ -1,9 +1,9 @@
 import type { Logger } from '../logger';
-import type { GetSwcOptionsFromTsconfigOptions } from './utils';
-type SwcCompileOptions = Pick<GetSwcOptionsFromTsconfigOptions, 'additionalPaths' | 'exclude'> & {
+import type { GetSwcOptionsParams } from './utils';
+type SwcCompileOptions = Pick<GetSwcOptionsParams, 'additionalPaths' | 'exclude' | 'publicPath'> & {
     projectPath: string;
     outputPath: string;
     logger: Logger;
 };
-export declare function compile({ projectPath, outputPath, logger, additionalPaths, exclude, }: SwcCompileOptions): Promise<void>;
+export declare function compile({ projectPath, outputPath, logger, additionalPaths, exclude, publicPath, }: SwcCompileOptions): Promise<void>;
 export {};

package/dist/common/swc/compile.js

@@ -5,13 +5,14 @@ const pretty_time_1 = require("../logger/pretty-time");
 // @ts-ignore @swc/cli is not typed
 const cli_1 = require("@swc/cli");
 const utils_1 = require("./utils");
-async function compile({ projectPath, outputPath, logger, additionalPaths, exclude, }) {
+async function compile({ projectPath, outputPath, logger, additionalPaths, exclude, publicPath, }) {
     const start = process.hrtime.bigint();
     logger.message('Start compilation');
-    const { swcOptions, directoriesToCompile } = (0, utils_1.getSwcOptionsFromTsconfig)({
+    const { swcOptions, directoriesToCompile } = (0, utils_1.getSwcOptions)({
         projectPath,
         additionalPaths,
         exclude,
+        publicPath,
     });
     const cliOptions = {
         filenames: directoriesToCompile,

package/dist/common/swc/utils.d.ts

@@ -1,11 +1,12 @@
 export declare const EXTENSIONS_TO_COMPILE: string[];
-export type GetSwcOptionsFromTsconfigOptions = {
+export interface GetSwcOptionsParams {
     projectPath: string;
     filename?: string;
     additionalPaths?: string[];
     exclude?: string | string[];
-};
-export declare function getSwcOptionsFromTsconfig({ projectPath, filename, additionalPaths, exclude, }: GetSwcOptionsFromTsconfigOptions): {
+    publicPath: string;
+}
+export declare function getSwcOptions({ projectPath, filename, additionalPaths, exclude, publicPath, }: GetSwcOptionsParams): {
     swcOptions: import("@swc/types").Options;
     directoriesToCompile: string[];
 };

package/dist/common/swc/utils.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EXTENSIONS_TO_COMPILE = void 0;
-exports.getSwcOptionsFromTsconfig = getSwcOptionsFromTsconfig;
+exports.getSwcOptions = getSwcOptions;
 const path_1 = __importDefault(require("path"));
 const tsconfig_to_swcconfig_1 = require("tsconfig-to-swcconfig");
 const DEFAULT_EXCLUDE = ['node_modules'];
@@ -19,13 +19,26 @@ function resolvePaths(paths, baseUrl) {
     }
     return entries;
 }
-function getSwcOptionsFromTsconfig({ projectPath, filename = 'tsconfig.json', additionalPaths, exclude, }) {
+function getSwcOptions({ projectPath, filename = 'tsconfig.json', additionalPaths, exclude, publicPath, }) {
     const swcOptions = (0, tsconfig_to_swcconfig_1.convert)(filename, projectPath);
     swcOptions.exclude = swcOptions.exclude || [];
     swcOptions.jsc = {
         ...swcOptions.jsc,
         // SWC requires absolute path as baseUrl
         baseUrl: projectPath,
+        transform: {
+            ...swcOptions.jsc?.transform,
+            optimizer: {
+                ...swcOptions.jsc?.transform?.optimizer,
+                globals: {
+                    ...swcOptions.jsc?.transform?.optimizer?.globals,
+                    vars: {
+                        'process.env.PUBLIC_PATH': JSON.stringify(publicPath),
+                        ...swcOptions.jsc?.transform?.optimizer?.globals?.vars,
+                    },
+                },
+            },
+        },
     };
     let customExclude = [];
     if (Array.isArray(exclude)) {

package/dist/common/swc/watch.d.ts

@@ -1,9 +1,9 @@
 import type { Logger } from '../logger';
-import type { GetSwcOptionsFromTsconfigOptions } from './utils';
-type SwcWatchOptions = Pick<GetSwcOptionsFromTsconfigOptions, 'additionalPaths' | 'exclude'> & {
+import type { GetSwcOptionsParams } from './utils';
+type SwcWatchOptions = Pick<GetSwcOptionsParams, 'additionalPaths' | 'exclude' | 'publicPath'> & {
     outputPath: string;
     logger: Logger;
     onAfterFilesEmitted?: () => void;
 };
-export declare function watch(projectPath: string, { outputPath, logger, onAfterFilesEmitted, additionalPaths, exclude }: SwcWatchOptions): Promise<void>;
+export declare function watch(projectPath: string, { outputPath, logger, onAfterFilesEmitted, additionalPaths, exclude, publicPath, }: SwcWatchOptions): Promise<void>;
 export {};

package/dist/common/swc/watch.js

@@ -4,12 +4,13 @@ exports.watch = watch;
 // @ts-ignore @swc/cli is not typed
 const cli_1 = require("@swc/cli");
 const utils_1 = require("./utils");
-async function watch(projectPath, { outputPath, logger, onAfterFilesEmitted, additionalPaths, exclude }) {
+async function watch(projectPath, { outputPath, logger, onAfterFilesEmitted, additionalPaths, exclude, publicPath, }) {
     logger.message('Start compilation in watch mode');
-    const { swcOptions, directoriesToCompile } = (0, utils_1.getSwcOptionsFromTsconfig)({
+    const { swcOptions, directoriesToCompile } = (0, utils_1.getSwcOptions)({
         projectPath,
         additionalPaths,
         exclude,
+        publicPath,
     });
     const cliOptions = {
         filenames: directoriesToCompile,

package/dist/common/webpack/config.js

@@ -353,10 +353,6 @@ function configureResolve({ isEnvProduction, config }) {
         fallback: config.fallback,
     };
 }
-function isModuleFederationEntry(entryName, fileName) {
-    // Ignore bootstrap file for module federation entries
-    return entryName === fileName || `${entryName}-bootstrap` === fileName;
-}
 function createEntryArray(entry) {
     if (typeof entry === 'string') {
         return [require.resolve('./public-path'), entry];
@@ -380,7 +376,6 @@ function configureEntry({ config, entriesDirectory }) {
         }), {});
     }
     let entryFiles = fs.readdirSync(entriesDirectory).filter((file) => /\.[jt]sx?$/.test(file));
-    let result = {};
     if (config.moduleFederation) {
         const { name, remotes, originalRemotes } = config.moduleFederation;
         const entryFile = entryFiles.find((item) => path.parse(item).name === name);
@@ -394,12 +389,13 @@ function configureEntry({ config, entriesDirectory }) {
         }
         entryFiles = entryFiles.filter((file) => {
             const fileName = path.parse(file).name;
-            return (!isModuleFederationEntry(name, fileName) &&
-                remoteNames.every((remote) => !isModuleFederationEntry(remote, fileName)));
+            return (
+            // Ignore bootstrap file for module federation host
+            fileName !== `${name}-bootstrap` &&
+                remoteNames.every(
+                // Ignore bootstrap and entry files for module federation remotes
+                (remote) => remote !== fileName && `${remote}-bootstrap` !== fileName));
         });
-        result = {
-            main: createEntryArray(path.resolve(entriesDirectory, entryFile)),
-        };
     }
     if (Array.isArray(config.entryFilter) && config.entryFilter.length) {
         entryFiles = entryFiles.filter((file) => config.entryFilter?.includes(path.parse(file).name));
@@ -407,7 +403,7 @@ function configureEntry({ config, entriesDirectory }) {
     if (!entryFiles.length) {
         throw new Error('No entries were found after applying entry filter');
     }
-    return entryFiles.reduce((acc, file) => addEntry(acc, path.resolve(entriesDirectory, file)), result);
+    return entryFiles.reduce((acc, file) => addEntry(acc, path.resolve(entriesDirectory, file)), {});
 }
 function getFileNames({ isEnvProduction, isSsr, config }) {
     let ext = 'js';
@@ -859,6 +855,7 @@ function getDefinitions({ config, isSsr }) {
     return {
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         'process.env.IS_SSR': JSON.stringify(isSsr),
+        'process.env.PUBLIC_PATH': JSON.stringify(config.browserPublicPath),
         ...config.definitions,
     };
 }
@@ -966,9 +963,12 @@ function configureCommonPlugins(options, bundlerPlugins) {
         }
         plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
         if (config.moduleFederation) {
-            const { name, version, disableManifest, publicPath, remotes, originalRemotes, remotesRuntimeVersioning, runtimePlugins, ...restOptions } = config.moduleFederation;
+            const { name, version, disableManifest, remotes, enabledRemotes = remotes, originalRemotes, remotesRuntimeVersioning, isolateStyles: _isolateStyles, // Omit isolateStyles from restOptions
+            runtimePlugins, ...restOptions } = config.moduleFederation;
             let actualRemotes = originalRemotes;
-            if (remotes) {
+            if (!actualRemotes && remotes && enabledRemotes) {
+                // Remove micro-frontend name from public path
+                const commonPublicPath = config.browserPublicPath.replace(`${name}/`, '');
                 let remoteFile;
                 if (disableManifest) {
                     if (remotesRuntimeVersioning) {
@@ -984,13 +984,26 @@ function configureCommonPlugins(options, bundlerPlugins) {
                 else {
                     remoteFile = 'mf-manifest.json';
                 }
-                actualRemotes = remotes.reduce((acc, remoteName) => {
+                actualRemotes = remotes.reduce((acc, remote) => {
+                    let remotePath;
+                    if (isEnvDevelopment) {
+                        if (enabledRemotes.includes(remote)) {
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            remotePath = `${commonPublicPath}${remote}/${remoteFile.replace('[version]', version)}`;
+                        }
+                        else if (config.cdnPublicPath) {
+                            remotePath = `${config.cdnPublicPath}${remote}/${remoteFile}`;
+                        }
+                    }
+                    if (!remotePath) {
+                        remotePath = `${commonPublicPath}${remote}/${remoteFile}`;
+                    }
                     // eslint-disable-next-line no-param-reassign
-                    acc[remoteName] = `${remoteName}@${publicPath}${remoteName}/${remoteFile}`;
+                    acc[remote] = `${remote}@${remotePath}`;
                     return acc;
                 }, {});
             }
-            const actualRuntimePlugins = runtimePlugins || [];
+            const actualRuntimePlugins = runtimePlugins.slice() || [];
             if (remotesRuntimeVersioning) {
                 actualRuntimePlugins.push(require.resolve('./runtime-versioning-plugin'));
             }

package/dist/create-cli.d.ts

@@ -17,6 +17,8 @@ export declare function createCli(argv: string[]): {
     "disable-react-refresh": boolean | undefined;
     lazyCompilation: boolean | undefined;
     "lazy-compilation": boolean | undefined;
+    "mf-remotes": string[] | undefined;
+    mfRemotes: string[] | undefined;
     reactProfiling: boolean | undefined;
     "react-profiling": boolean | undefined;
     analyzeBundle: "true" | "statoscope" | "rsdoctor" | undefined;
@@ -45,6 +47,8 @@ export declare function createCli(argv: string[]): {
     "disable-react-refresh": boolean | undefined;
     lazyCompilation: boolean | undefined;
     "lazy-compilation": boolean | undefined;
+    "mf-remotes": string[] | undefined;
+    mfRemotes: string[] | undefined;
     reactProfiling: boolean | undefined;
     "react-profiling": boolean | undefined;
     analyzeBundle: "true" | "statoscope" | "rsdoctor" | undefined;

package/dist/create-cli.js

@@ -142,6 +142,12 @@ function createCli(argv) {
             group: 'Client',
             type: 'boolean',
             describe: 'Display final webpack configurations for debugging purposes',
+        })
+            .option('mf-remotes', {
+            group: 'Client',
+            type: 'string',
+            describe: 'Enabled remotes for module federation (all remotes by default)',
+            array: true,
         }),
         handler: handlerP(getCommandHandler('dev', (args, cmd) => {
             if ((0, models_1.isLibraryConfig)(args)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.31.1",
+  "version": "0.31.2-beta.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",