@nx/react 16.0.0-beta.1

package/src/generators/host/files/module-federation/webpack.config.js__tmpl__

@@ -0,0 +1,12 @@
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { withReact } = require('@nrwl/react');
+const { withModuleFederation } = require('@nrwl/react/module-federation');
+
+const baseConfig = require('./module-federation.config');
+
+const config = {
+  ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));

package/src/generators/host/files/module-federation/webpack.config.prod.js__tmpl__

@@ -0,0 +1,32 @@
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { withReact } = require('@nrwl/react');
+const { withModuleFederation } = require('@nrwl/react/module-federation');
+
+const baseConfig = require('./module-federation.config');
+
+const prodConfig = {
+    ...baseConfig,
+    /*
+     * Remote overrides for production.
+     * Each entry is a pair of a unique name and the URL where it is deployed.
+     *
+     * e.g.
+     * remotes: [
+     *   ['app1', 'http://app1.example.com'],
+     *   ['app2', 'http://app2.example.com'],
+     * ]
+     *
+     * You can also use a full path to the remoteEntry.js file if desired.
+     *
+     * remotes: [
+     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+     * ]
+     */
+    remotes: [
+      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
+    ],
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(prodConfig));

package/src/generators/host/files/module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -0,0 +1,13 @@
+// @ts-check
+
+/**
+ * @type {import('@nrwl/devkit').ModuleFederationConfig}
+ **/
+const moduleFederationConfig = {
+    name: '<%= projectName %>',
+    remotes: [
+    <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
+    ],
+};
+
+module.exports = moduleFederationConfig;

package/src/generators/host/files/module-federation-ssr/server.ts__tmpl__

@@ -0,0 +1,28 @@
+import * as path from 'path';
+import express from 'express';
+import cors from 'cors';
+
+import { handleRequest } from './src/main.server';
+
+const port = process.env['PORT'] || 4200;
+const app = express();
+
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+});
+
+server.on('error', console.error);

package/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/server",
+    "target": "es2019",
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/remotes.d.ts",
+    "src/main.server.tsx",
+    "server.ts"
+  ]
+}

package/src/generators/host/files/module-federation-ssr/webpack.server.config.js__tmpl__

@@ -0,0 +1,12 @@
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { withReact } = require('@nrwl/react');
+const { withModuleFederationForSSR } = require('@nrwl/react/module-federation');
+
+const baseConfig = require('./module-federation.config');
+
+const defaultConfig = {
+  ...baseConfig
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+module.exports = composePlugins(withNx(), withReact(), withModuleFederationForSSR(defaultConfig));

package/src/generators/host/host.d.ts

@@ -0,0 +1,4 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export declare function hostGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default hostGenerator;

package/src/generators/host/host.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hostGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const application_1 = require("../application/application");
+const normalize_options_1 = require("../application/lib/normalize-options");
+const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
+const add_module_federation_files_1 = require("./lib/add-module-federation-files");
+const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
+const remote_1 = require("../remote/remote");
+const setup_ssr_1 = require("../setup-ssr/setup-ssr");
+const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
+function hostGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const tasks = [];
+        const options = (0, normalize_options_1.normalizeOptions)(host, schema);
+        const initTask = yield (0, application_1.default)(host, Object.assign(Object.assign({}, options), { 
+            // The target use-case is loading remotes as child routes, thus always enable routing.
+            routing: true, 
+            // Only webpack works with module federation for now.
+            bundler: 'webpack', skipFormat: true }));
+        tasks.push(initTask);
+        const remotesWithPorts = [];
+        if (schema.remotes) {
+            let remotePort = options.devServerPort + 1;
+            for (const remote of schema.remotes) {
+                remotesWithPorts.push({ name: remote, port: remotePort });
+                yield (0, remote_1.default)(host, {
+                    name: remote,
+                    directory: options.directory,
+                    style: options.style,
+                    unitTestRunner: options.unitTestRunner,
+                    e2eTestRunner: options.e2eTestRunner,
+                    linter: options.linter,
+                    devServerPort: remotePort,
+                    ssr: options.ssr,
+                    skipFormat: true,
+                });
+                remotePort++;
+            }
+        }
+        (0, add_module_federation_files_1.addModuleFederationFiles)(host, options, remotesWithPorts);
+        (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
+        (0, update_module_federation_e2e_project_1.updateModuleFederationE2eProject)(host, options);
+        if (options.ssr) {
+            const setupSsrTask = yield (0, setup_ssr_1.default)(host, {
+                project: options.projectName,
+                serverPort: options.devServerPort,
+                skipFormat: true,
+            });
+            tasks.push(setupSsrTask);
+            const setupSsrForHostTask = yield (0, setup_ssr_for_host_1.setupSsrForHost)(host, options, options.projectName, remotesWithPorts);
+            tasks.push(setupSsrForHostTask);
+            const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
+            projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, 'webpack.server.config.js');
+            (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
+        }
+        if (!options.skipFormat) {
+            yield (0, devkit_1.formatFiles)(host);
+        }
+        return (0, devkit_1.runTasksInSerial)(...tasks);
+    });
+}
+exports.hostGenerator = hostGenerator;
+exports.default = hostGenerator;
+//# sourceMappingURL=host.js.map

package/src/generators/host/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"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"}

package/src/generators/host/lib/add-module-federation-files.d.ts

@@ -0,0 +1,5 @@
+import { NormalizedSchema } from '../schema';
+export declare function addModuleFederationFiles(host: any, options: NormalizedSchema, defaultRemoteManifest: {
+    name: string;
+    port: number;
+}[]): void;

package/src/generators/host/lib/add-module-federation-files.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addModuleFederationFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const normalize_options_1 = require("../../application/lib/normalize-options");
+function addModuleFederationFiles(host, options, defaultRemoteManifest) {
+    const templateVariables = Object.assign(Object.assign(Object.assign({}, (0, devkit_1.names)(options.name)), options), { tmpl: '', remotes: defaultRemoteManifest.map(({ name, port }) => {
+            const remote = (0, normalize_options_1.normalizeProjectName)(Object.assign(Object.assign({}, options), { name }));
+            return Object.assign(Object.assign({}, (0, devkit_1.names)(remote)), { port });
+        }) });
+    // Module federation requires bootstrap code to be dynamically imported.
+    // Renaming original entry file so we can use `import(./bootstrap)` in
+    // new entry file.
+    host.rename((0, path_1.join)(options.appProjectRoot, 'src/main.tsx'), (0, path_1.join)(options.appProjectRoot, 'src/bootstrap.tsx'));
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/common`), options.appProjectRoot, templateVariables);
+    // New entry file is created here.
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/module-federation`), options.appProjectRoot, templateVariables);
+}
+exports.addModuleFederationFiles = addModuleFederationFiles;
+//# sourceMappingURL=add-module-federation-files.js.map

package/src/generators/host/lib/add-module-federation-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-module-federation-files.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/host/lib/add-module-federation-files.ts"],"names":[],"mappings":";;;AACA,uCAAkD;AAClD,+BAA4B;AAC5B,+EAA+E;AAE/E,SAAgB,wBAAwB,CACtC,IAAI,EACJ,OAAyB,EACzB,qBAAuD;IAEvD,MAAM,iBAAiB,iDAClB,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,GACnB,OAAO,KACV,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;YACpD,MAAM,MAAM,GAAG,IAAA,wCAAoB,kCAAM,OAAO,KAAE,IAAI,IAAG,CAAC;YAC1D,uCACK,IAAA,cAAK,EAAC,MAAM,CAAC,KAChB,IAAI,IACJ;QACJ,CAAC,CAAC,GACH,CAAC;IAEF,wEAAwE;IACxE,sEAAsE;IACtE,kBAAkB;IAClB,IAAI,CAAC,MAAM,CACT,IAAA,WAAI,EAAC,OAAO,CAAC,cAAc,EAAE,cAAc,CAAC,EAC5C,IAAA,WAAI,EAAC,OAAO,CAAC,cAAc,EAAE,mBAAmB,CAAC,CAClD,CAAC;IAEF,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,iBAAiB,CAAC,EAClC,OAAO,CAAC,cAAc,EACtB,iBAAiB,CAClB,CAAC;IAEF,kCAAkC;IAClC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,4BAA4B,CAAC,EAC7C,OAAO,CAAC,cAAc,EACtB,iBAAiB,CAClB,CAAC;AACJ,CAAC;AAxCD,4DAwCC"}

package/src/generators/host/lib/setup-ssr-for-host.d.ts

@@ -0,0 +1,6 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+export declare function setupSsrForHost(tree: Tree, options: Schema, appName: string, defaultRemoteManifest: {
+    name: string;
+    port: number;
+}[]): Promise<GeneratorCallback>;

package/src/generators/host/lib/setup-ssr-for-host.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupSsrForHost = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+const normalize_options_1 = require("../../application/lib/normalize-options");
+function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const tasks = [];
+        let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
+        project.targets.serve.executor =
+            '@nrwl/react:module-federation-ssr-dev-server';
+        (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/module-federation-ssr'), project.root, Object.assign(Object.assign({}, options), { remotes: defaultRemoteManifest.map(({ name, port }) => {
+                const remote = (0, normalize_options_1.normalizeProjectName)(Object.assign(Object.assign({}, options), { name }));
+                return Object.assign(Object.assign({}, (0, devkit_1.names)(remote)), { port });
+            }), appName, tmpl: '', browserBuildOutputPath: project.targets.build.options.outputPath }));
+        const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            '@module-federation/node': versions_1.moduleFederationNodeVersion,
+        }, {});
+        tasks.push(installTask);
+        return (0, devkit_1.runTasksInSerial)(...tasks);
+    });
+}
+exports.setupSsrForHost = setupSsrForHost;
+//# sourceMappingURL=setup-ssr-for-host.js.map

package/src/generators/host/lib/setup-ssr-for-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-ssr-for-host.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/host/lib/setup-ssr-for-host.ts"],"names":[],"mappings":";;;;AACA,uCAQoB;AAGpB,sDAAsE;AACtE,+EAA+E;AAE/E,SAAsB,eAAe,CACnC,IAAU,EACV,OAAe,EACf,OAAe,EACf,qBAAuD;;QAEvD,MAAM,KAAK,GAAwB,EAAE,CAAC;QACtC,IAAI,OAAO,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACtD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ;YAC5B,8CAA8C,CAAC;QACjD,IAAA,mCAA0B,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QAEnD,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,0BAAiB,EAAC,SAAS,EAAE,gCAAgC,CAAC,EAC9D,OAAO,CAAC,IAAI,kCAEP,OAAO,KACV,OAAO,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;gBACpD,MAAM,MAAM,GAAG,IAAA,wCAAoB,kCAAM,OAAO,KAAE,IAAI,IAAG,CAAC;gBAC1D,uCACK,IAAA,cAAK,EAAC,MAAM,CAAC,KAChB,IAAI,IACJ;YACJ,CAAC,CAAC,EACF,OAAO,EACP,IAAI,EAAE,EAAE,EACR,sBAAsB,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,IAEnE,CAAC;QAEF,MAAM,WAAW,GAAG,IAAA,qCAA4B,EAC9C,IAAI,EACJ;YACE,yBAAyB,EAAE,sCAA2B;SACvD,EACD,EAAE,CACH,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAExB,OAAO,IAAA,yBAAgB,EAAC,GAAG,KAAK,CAAC,CAAC;IACpC,CAAC;CAAA;AAzCD,0CAyCC"}

package/src/generators/host/lib/update-module-federation-e2e-project.d.ts

@@ -0,0 +1,3 @@
+import { NormalizedSchema } from '../schema';
+import { Tree } from '@nx/devkit';
+export declare function updateModuleFederationE2eProject(host: Tree, options: NormalizedSchema): void;

package/src/generators/host/lib/update-module-federation-e2e-project.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateModuleFederationE2eProject = void 0;
+const devkit_1 = require("@nx/devkit");
+function updateModuleFederationE2eProject(host, options) {
+    try {
+        let projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.e2eProjectName);
+        projectConfig.targets.e2e.options = Object.assign(Object.assign({}, projectConfig.targets.e2e.options), { baseUrl: `http://localhost:${options.devServerPort}` });
+        (0, devkit_1.updateProjectConfiguration)(host, options.e2eProjectName, projectConfig);
+    }
+    catch (_a) {
+        // nothing
+    }
+}
+exports.updateModuleFederationE2eProject = updateModuleFederationE2eProject;
+//# sourceMappingURL=update-module-federation-e2e-project.js.map

package/src/generators/host/lib/update-module-federation-e2e-project.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-module-federation-e2e-project.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/host/lib/update-module-federation-e2e-project.ts"],"names":[],"mappings":";;;AACA,uCAIoB;AAEpB,SAAgB,gCAAgC,CAC9C,IAAU,EACV,OAAyB;IAEzB,IAAI;QACF,IAAI,aAAa,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;QAC3E,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,mCAC5B,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,KACpC,OAAO,EAAE,oBAAoB,OAAO,CAAC,aAAa,EAAE,GACrD,CAAC;QACF,IAAA,mCAA0B,EAAC,IAAI,EAAE,OAAO,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;KACzE;IAAC,WAAM;QACN,UAAU;KACX;AACH,CAAC;AAdD,4EAcC"}

package/src/generators/host/schema.d.ts

@@ -0,0 +1,31 @@
+import { Linter } from '@nx/linter';
+import { SupportedStyles } from '../../../typings';
+
+export interface Schema {
+  classComponent?: boolean;
+  compiler?: 'babel' | 'swc';
+  devServerPort?: number;
+  directory?: string;
+  e2eTestRunner: 'cypress' | 'none';
+  globalCss?: boolean;
+  js?: boolean;
+  linter: Linter;
+  name: string;
+  pascalCaseFiles?: boolean;
+  remotes?: string[];
+  setParserOptionsProject?: boolean;
+  skipFormat?: boolean;
+  skipWorkspaceJson?: boolean;
+  ssr?: boolean;
+  strict?: boolean;
+  style: SupportedStyles;
+  tags?: string;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
+  minimal?: boolean;
+}
+
+export interface NormalizedSchema extends Schema {
+  appProjectRoot: string;
+  e2eProjectName: string;
+  projectName: string;
+}

package/src/generators/host/schema.json

@@ -0,0 +1,168 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "GeneratorReactHost",
+  "cli": "nx",
+  "title": "Generate Module Federation Setup for React Host App",
+  "description": "Create Module Federation configuration files for given React Host Application.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the host application to generate the Module Federation configuration",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use as the host application?",
+      "pattern": "^[a-zA-Z].*$",
+      "x-priority": "important"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ http://lesscss.org                       ]"
+          },
+          {
+            "value": "styled-components",
+            "label": "styled-components [ https://styled-components.com            ]"
+          },
+          {
+            "value": "@emotion/styled",
+            "label": "emotion           [ https://emotion.sh                       ]"
+          },
+          {
+            "value": "styled-jsx",
+            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ] (DEPRECATED)"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint"],
+      "default": "eslint"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipWorkspaceJson": {
+      "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "none"],
+      "description": "Test runner to use for end to end (e2e) tests.",
+      "default": "cypress"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the application (used for linting).",
+      "alias": "t"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. App.tsx).",
+      "alias": "P",
+      "default": false
+    },
+    "classComponent": {
+      "type": "boolean",
+      "description": "Use class components instead of functional component.",
+      "alias": "C",
+      "default": false
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Creates an application with strict mode and strict type checking",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
+    "compiler": {
+      "type": "string",
+      "description": "The compiler to use",
+      "enum": ["babel", "swc"],
+      "default": "babel"
+    },
+    "remotes": {
+      "type": "array",
+      "description": "A list of remote application names that the host application should consume.",
+      "default": [],
+      "x-priority": "important"
+    },
+    "devServerPort": {
+      "type": "number",
+      "description": "The port for the dev server of the remote app.",
+      "default": 4200,
+      "x-priority": "important"
+    },
+    "ssr": {
+      "description": "Whether to configure SSR for the host application",
+      "type": "boolean",
+      "default": false
+    },
+    "minimal": {
+      "description": "Generate a React app with a minimal setup. No nx starter template.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": ["name"],
+  "additionalProperties": false
+}

package/src/generators/init/init.d.ts

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { InitSchema } from './schema';
+export declare function reactInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export default reactInitGenerator;
+export declare const reactInitSchematic: (generatorOptions: InitSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/init/init.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactInitSchematic = exports.reactInitGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
+function setDefault(host) {
+    const workspace = (0, devkit_1.readNxJson)(host);
+    workspace.generators = workspace.generators || {};
+    const reactGenerators = workspace.generators['@nrwl/react'] || {};
+    const generators = Object.assign(Object.assign({}, workspace.generators), { '@nrwl/react': Object.assign(Object.assign({}, reactGenerators), { application: Object.assign(Object.assign({}, reactGenerators.application), { babel: true }) }) });
+    (0, devkit_1.updateNxJson)(host, Object.assign(Object.assign({}, workspace), { generators }));
+}
+function updateDependencies(host, schema) {
+    (0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nrwl/react'], []);
+    const dependencies = {
+        react: versions_1.reactVersion,
+        'react-dom': versions_1.reactDomVersion,
+    };
+    if (!schema.skipHelperLibs) {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, {
+        '@nrwl/react': versions_1.nxVersion,
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+        '@testing-library/react': versions_1.testingLibraryReactVersion,
+        'react-test-renderer': versions_1.reactTestRendererVersion,
+    });
+}
+function initRootBabelConfig(tree, schema) {
+    var _a;
+    if (tree.exists('/babel.config.json') || tree.exists('/babel.config.js')) {
+        return;
+    }
+    if (!schema.skipBabelConfig) {
+        (0, devkit_1.writeJson)(tree, '/babel.config.json', {
+            babelrcRoots: ['*'], // Make sure .babelrc files other than root can be loaded in a monorepo
+        });
+    }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    if ((_a = nxJson.namedInputs) === null || _a === void 0 ? void 0 : _a.sharedGlobals) {
+        nxJson.namedInputs.sharedGlobals.push('{workspaceRoot}/babel.config.json');
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+function reactInitGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const tasks = [];
+        const jsInitTask = yield (0, js_1.initGenerator)(host, Object.assign(Object.assign({}, schema), { tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json', skipFormat: true }));
+        tasks.push(jsInitTask);
+        setDefault(host);
+        if (!schema.e2eTestRunner || schema.e2eTestRunner === 'cypress') {
+            (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+            const { cypressInitGenerator } = yield Promise.resolve().then(() => require('@nx/cypress/src/generators/init/init'));
+            const cypressTask = yield cypressInitGenerator(host, {});
+            tasks.push(cypressTask);
+        }
+        if (!schema.skipPackageJson && !schema.skipBabelConfig) {
+            const installBabelTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
+                '@babel/preset-react': versions_1.babelPresetReactVersion,
+            });
+            tasks.push(installBabelTask);
+        }
+        if (!schema.skipBabelConfig) {
+            initRootBabelConfig(host, schema);
+        }
+        if (!schema.skipPackageJson) {
+            const installTask = updateDependencies(host, schema);
+            tasks.push(installTask);
+        }
+        return (0, devkit_1.runTasksInSerial)(...tasks);
+    });
+}
+exports.reactInitGenerator = reactInitGenerator;
+exports.default = reactInitGenerator;
+exports.reactInitSchematic = (0, devkit_1.convertNxGenerator)(reactInitGenerator);
+//# sourceMappingURL=init.js.map

package/src/generators/init/init.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/init/init.ts"],"names":[],"mappings":"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"}

package/src/generators/init/schema.d.ts

@@ -0,0 +1,11 @@
+export interface InitSchema {
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
+  e2eTestRunner?: 'cypress' | 'none';
+  skipBabelConfig?: boolean;
+  skipFormat?: boolean;
+  skipPackageJson?: boolean;
+  skipHelperLibs?: boolean;
+  js?: boolean;
+
+  rootProject?: boolean;
+}