@nx/react 0.0.0-pr-22179-271588f

package/src/generators/remote/remote.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remoteGeneratorInternal = exports.remoteGenerator = exports.addModuleFederationFiles = void 0;
+const path_1 = require("path");
+const devkit_1 = require("@nx/devkit");
+const normalize_options_1 = require("../application/lib/normalize-options");
+const application_1 = require("../application/application");
+const update_host_with_remote_1 = require("./lib/update-host-with-remote");
+const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
+const setup_ssr_1 = require("../setup-ssr/setup-ssr");
+const setup_ssr_for_remote_1 = require("./lib/setup-ssr-for-remote");
+const setup_tspath_for_remote_1 = require("./lib/setup-tspath-for-remote");
+const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
+const maybe_js_1 = require("../../utils/maybe-js");
+function addModuleFederationFiles(host, options) {
+    const templateVariables = {
+        ...(0, devkit_1.names)(options.name),
+        ...options,
+        tmpl: '',
+    };
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
+    const pathToModuleFederationFiles = options.typescriptConfiguration
+        ? 'module-federation-ts'
+        : 'module-federation';
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
+    if (options.typescriptConfiguration) {
+        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js');
+        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.prod.js');
+        if (host.exists(pathToWebpackConfig)) {
+            host.delete(pathToWebpackConfig);
+        }
+        if (host.exists(pathToWebpackProdConfig)) {
+            host.delete(pathToWebpackProdConfig);
+        }
+    }
+}
+exports.addModuleFederationFiles = addModuleFederationFiles;
+async function remoteGenerator(host, schema) {
+    return await remoteGeneratorInternal(host, {
+        projectNameAndRootFormat: 'derived',
+        ...schema,
+    });
+}
+exports.remoteGenerator = remoteGenerator;
+async function remoteGeneratorInternal(host, schema) {
+    const tasks = [];
+    const options = {
+        ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:remote')),
+        // when js is set to true, we want to use the js configuration
+        js: schema.js ?? false,
+        typescriptConfiguration: schema.js
+            ? false
+            : schema.typescriptConfiguration ?? true,
+        dynamic: schema.dynamic ?? false,
+        // TODO(colum): remove when MF works with Crystal
+        addPlugin: false,
+    };
+    const initAppTask = await (0, application_1.default)(host, {
+        ...options,
+        // Only webpack works with module federation for now.
+        bundler: 'webpack',
+        skipFormat: true,
+    });
+    tasks.push(initAppTask);
+    if (schema.host) {
+        (0, update_host_with_remote_1.updateHostWithRemote)(host, schema.host, options.projectName);
+    }
+    // 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, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
+    addModuleFederationFiles(host, options);
+    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
+    (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);
+    if (options.ssr) {
+        const setupSsrTask = await (0, setup_ssr_1.default)(host, {
+            project: options.projectName,
+            serverPort: options.devServerPort,
+            skipFormat: true,
+        });
+        tasks.push(setupSsrTask);
+        const setupSsrForRemoteTask = await (0, setup_ssr_for_remote_1.setupSsrForRemote)(host, options, options.projectName);
+        tasks.push(setupSsrForRemoteTask);
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
+        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
+    }
+    if (!options.setParserOptionsProject) {
+        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
+    }
+    if (options.host && options.dynamic) {
+        const hostConfig = (0, devkit_1.readProjectConfiguration)(host, schema.host);
+        const pathToMFManifest = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'assets/module-federation.manifest.json');
+        (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.name, options.devServerPort, pathToMFManifest);
+    }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.remoteGeneratorInternal = remoteGeneratorInternal;
+exports.default = remoteGenerator;

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

@@ -0,0 +1,34 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+import type { SupportedStyles } from '../../../typings/style';
+import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
+
+export interface Schema {
+  classComponent?: boolean;
+  compiler?: 'babel' | 'swc';
+  devServerPort?: number;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  e2eTestRunner: 'cypress' | 'playwright' | 'none';
+  globalCss?: boolean;
+  host?: string;
+  js?: boolean;
+  linter: Linter;
+  name: string;
+  pascalCaseFiles?: boolean;
+  routing?: boolean;
+  setParserOptionsProject?: boolean;
+  skipFormat: boolean;
+  skipNxJson?: boolean;
+  ssr?: boolean;
+  strict?: boolean;
+  style: SupportedStyles;
+  tags?: string;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
+  typescriptConfiguration?: boolean;
+  dynamic?: boolean;
+}
+
+export interface NormalizedSchema extends ApplicationNormalizedSchema {
+  typescriptConfiguration: boolean;
+}

package/src/generators/remote/schema.json

@@ -0,0 +1,183 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "GeneratorReactRemote",
+  "cli": "nx",
+  "title": "Generate Module Federation Setup for React Remote App",
+  "description": "Create Module Federation configuration files for given React Remote Application.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the remote application to generate the Module Federation configuration",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use as the remote application?",
+      "pattern": "^[a-zA-Z][^:]*$",
+      "x-priority": "important"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "dynamic": {
+      "type": "boolean",
+      "description": "Should the host application use dynamic federation?",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "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)       [ https://sass-lang.com                     ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ https://lesscss.org                       ]"
+          },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
+          },
+          {
+            "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"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint"],
+      "default": "eslint"
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate application with routes.",
+      "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipNxJson": {
+      "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", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
+      "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"
+    },
+    "host": {
+      "type": "string",
+      "description": "The host / shell application for this remote.",
+      "x-priority": "important"
+    },
+    "devServerPort": {
+      "type": "number",
+      "description": "The port for the dev server of the remote app.",
+      "x-priority": "important"
+    },
+    "ssr": {
+      "description": "Whether to configure SSR for the host application",
+      "type": "boolean",
+      "default": false
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.",
+      "default": true
+    }
+  },
+  "required": ["name"],
+  "additionalProperties": false
+}

package/src/generators/setup-ssr/files/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, () => {
+  // Server has started
+});
+
+server.on('error', console.error);

package/src/generators/setup-ssr/files/src/main.server.tsx__tmpl__

@@ -0,0 +1,47 @@
+import type { Request, Response } from 'express';
+import * as fs from 'fs';
+import * as ReactDOMServer from 'react-dom/server';
+import isbot from 'isbot'
+
+import App from './<%= appComponentImport %>';
+
+
+let indexHtml: null | string = null;
+
+export function handleRequest(indexPath: string) {
+  return function render(req: Request, res: Response) {
+    let didError = false;
+
+    if (!indexHtml) {
+      indexHtml = fs.readFileSync(indexPath).toString();
+    }
+
+    const [htmlStart, htmlEnd] = indexHtml.split(`<div id="root"></div>`);
+
+    // For bots (e.g. search engines), the content will not be streamed but render all at once.
+    // For users, content should be streamed to the user as they are ready.
+    const callbackName = isbot(req.headers['user-agent']) ? 'onAllReady' : 'onShellReady';
+
+    const stream = ReactDOMServer.renderToPipeableStream(
+      <App />,
+      {
+        [callbackName]() {
+          res.statusCode = didError ? 500 : 200;
+          res.setHeader('Content-type', 'text/html; charset=utf-8');
+          res.write(`${htmlStart}<div id="root">`);
+          stream.pipe(res);
+          res.write(`</div>${htmlEnd}`);
+        },
+        onShellError(error) {
+          console.error(error);
+          res.statusCode = 500;
+          res.send('<!doctype html><h1>Server Error</h1>');
+        },
+        onError(error) {
+          didError = true;
+          console.error(error);
+        }
+      }
+    );
+  }
+}

package/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/server",
+    "target": "es2019",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    <%- extraInclude %>
+    "src/main.server.tsx",
+    "server.ts"
+  ]
+}

package/src/generators/setup-ssr/schema.d.ts

@@ -0,0 +1,7 @@
+export interface Schema {
+  project: string;
+  appComponentImportPath?: string;
+  serverPort?: number;
+  skipFormat?: boolean;
+  extraInclude?: string[];
+}

package/src/generators/setup-ssr/schema.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "GeneratorReactSSRSetup",
+  "cli": "nx",
+  "title": "Generate SSR setup for a React app",
+  "description": "Create the additional configuration required to enable SSR via Express for a React application.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the application to add SSR support to.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What app would you like to add SSR support to?",
+      "x-dropdown": "projects",
+      "x-priority": "important"
+    },
+    "appComponentImportPath": {
+      "type": "string",
+      "description": "The import path of the <App/ > component, relative to project sourceRoot.",
+      "default": "app/app"
+    },
+    "serverPort": {
+      "type": "number",
+      "default": 4200,
+      "description": "The port for the Express server.",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting the workspace after the generator completes.",
+      "x-priority": "internal"
+    },
+    "extraInclude": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "hidden": true,
+      "description": "Extra include entries in tsconfig.",
+      "default": []
+    }
+  },
+  "required": ["project"],
+  "additionalProperties": false
+}

package/src/generators/setup-ssr/setup-ssr.d.ts

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

package/src/generators/setup-ssr/setup-ssr.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupSsrGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+const ast_utils_1 = require("../../utils/ast-utils");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const path_1 = require("path");
+let tsModule;
+function readEntryFile(host, path) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const content = host.read(path, 'utf-8');
+    return {
+        content,
+        source: tsModule.createSourceFile(path, content, tsModule.ScriptTarget.Latest, true),
+    };
+}
+async function getProjectConfig(tree, projectName) {
+    let maybeProjectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    if (!maybeProjectConfig.targets?.build) {
+        let projectGraph;
+        try {
+            projectGraph = (0, devkit_1.readCachedProjectGraph)();
+        }
+        catch {
+            projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+        }
+        maybeProjectConfig = projectGraph.nodes[projectName].data;
+    }
+    return maybeProjectConfig;
+}
+async function setupSsrGenerator(tree, options) {
+    const projectConfig = await getProjectConfig(tree, options.project);
+    const projectRoot = projectConfig.root;
+    const appImportCandidates = [
+        options.appComponentImportPath ?? 'app/app',
+        'app',
+        'App',
+        'app/App',
+        'App/App',
+    ].map((importPath) => {
+        return {
+            importPath,
+            filePath: (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot || projectConfig.root, `${importPath}.tsx`),
+        };
+    });
+    const appComponentInfo = appImportCandidates.find((candidate) => tree.exists(candidate.filePath));
+    if (!appComponentInfo) {
+        throw new Error(`Cannot find an import path for <App/> component. Try passing setting --appComponentImportPath option.`);
+    }
+    if (!projectConfig.targets.build || !projectConfig.targets.serve) {
+        throw new Error(`Project ${options.project} does not have build and serve targets`);
+    }
+    if (projectConfig.targets.server) {
+        throw new Error(`Project ${options.project} already has a server target.`);
+    }
+    const originalOutputPath = projectConfig.targets.build?.options?.outputPath ??
+        projectConfig.targets.build?.outputs[0];
+    if (!originalOutputPath) {
+        throw new Error(`Project ${options.project} does not contain a outputPath for the build target.`);
+    }
+    // TODO(colum): We need to figure out how to handle this for Crystal
+    if (projectConfig.targets.build.options?.outputPath) {
+        projectConfig.targets.build.options.outputPath = (0, devkit_1.joinPathFragments)(originalOutputPath, 'browser');
+    }
+    projectConfig.targets = {
+        ...projectConfig.targets,
+        server: {
+            dependsOn: ['build'],
+            executor: '@nx/webpack:webpack',
+            outputs: ['{options.outputPath}'],
+            defaultConfiguration: 'production',
+            options: {
+                target: 'node',
+                main: `${projectRoot}/server.ts`,
+                outputPath: (0, devkit_1.joinPathFragments)(originalOutputPath, 'server'),
+                outputFileName: 'server.js',
+                tsConfig: `${projectRoot}/tsconfig.server.json`,
+                compiler: 'babel',
+                externalDependencies: 'all',
+                outputHashing: 'none',
+                webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
+            },
+            configurations: {
+                development: {
+                    optimization: false,
+                    sourceMap: true,
+                },
+                production: {
+                    fileReplacements: [
+                        {
+                            replace: `${projectRoot}/src/environments/environment.ts`,
+                            with: `${projectRoot}/src/environments/environment.prod.ts`,
+                        },
+                    ],
+                    sourceMap: false,
+                },
+            },
+        },
+        'serve-browser': projectConfig.targets.serve,
+        'serve-server': {
+            executor: '@nx/js:node',
+            defaultConfiguration: 'development',
+            options: {
+                buildTarget: `${options.project}:server:development`,
+                buildTargetOptions: {
+                    watch: true,
+                },
+            },
+            configurations: {
+                development: {},
+                production: {
+                    buildTarget: `${options.project}:server:production`,
+                },
+            },
+        },
+        serve: {
+            executor: '@nx/webpack:ssr-dev-server',
+            defaultConfiguration: 'development',
+            options: {
+                browserTarget: `${options.project}:build:development`,
+                serverTarget: `${options.project}:serve-server:development`,
+                port: options.serverPort,
+                browserTargetOptions: {
+                    watch: true,
+                },
+            },
+            configurations: {
+                development: {},
+                production: {
+                    browserTarget: `${options.project}:build:production`,
+                    serverTarget: `${options.project}:serve-server:production`,
+                },
+            },
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    if (nxJson.tasksRunnerOptions?.default &&
+        !nxJson.tasksRunnerOptions?.default.options.cacheableOperations.includes('server')) {
+        nxJson.tasksRunnerOptions.default.options.cacheableOperations = [
+            ...nxJson.tasksRunnerOptions.default.options.cacheableOperations,
+            'server',
+        ];
+    }
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults['server'] ??= {};
+    nxJson.targetDefaults.server.cache = true;
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), projectRoot, {
+        tmpl: '',
+        extraInclude: options.extraInclude?.length > 0
+            ? `"${options.extraInclude.join('", "')}",`
+            : '',
+        appComponentImport: appComponentInfo.importPath,
+        browserBuildOutputPath: projectConfig.targets.build?.options?.outputPath ??
+            projectConfig.targets.build?.outputs[0],
+    });
+    // Add <StaticRouter> to server main if needed.
+    // TODO: need to read main.server.tsx not main.tsx.
+    const appContent = tree.read(appComponentInfo.filePath, 'utf-8');
+    const isRouterPresent = appContent.match(/react-router-dom/);
+    if (isRouterPresent) {
+        const serverEntry = (0, devkit_1.joinPathFragments)(projectRoot, 'src/main.server.tsx');
+        const { content, source } = readEntryFile(tree, serverEntry);
+        const changes = (0, devkit_1.applyChangesToString)(content, (0, ast_utils_1.addStaticRouter)(serverEntry, source));
+        tree.write(serverEntry, changes);
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+        express: versions_1.expressVersion,
+        isbot: versions_1.isbotVersion,
+        cors: versions_1.corsVersion,
+    }, {
+        '@types/express': versions_1.typesExpressVersion,
+        '@types/cors': versions_1.typesCorsVersion,
+    });
+    await (0, devkit_1.formatFiles)(tree);
+    return installTask;
+}
+exports.setupSsrGenerator = setupSsrGenerator;
+exports.default = setupSsrGenerator;

package/src/generators/setup-tailwind/files/postcss.config.js__tmpl__

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+}