nx 21.0.0-beta.0 → 21.0.0-beta.2

package/src/command-line/init/configure-plugins.js

@@ -1,64 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runPackageManagerInstallPlugins = runPackageManagerInstallPlugins;
-exports.installPlugin = installPlugin;
-exports.installPlugins = installPlugins;
+exports.installPluginPackages = installPluginPackages;
+exports.runPluginInitGenerator = runPluginInitGenerator;
+exports.runPluginInitGenerators = runPluginInitGenerators;
 exports.configurePlugins = configurePlugins;
 exports.getFailedToInstallPluginErrorMessages = getFailedToInstallPluginErrorMessages;
 const createSpinner = require("ora");
 const chalk_1 = require("chalk");
 const package_manager_1 = require("../../utils/package-manager");
 const output_1 = require("../../utils/output");
-const tree_1 = require("../../generators/tree");
-const generator_utils_1 = require("../generate/generator-utils");
 const workspace_root_1 = require("../../utils/workspace-root");
 const utils_1 = require("./implementation/utils");
-const plugins_1 = require("../../utils/plugins");
 const angular_json_1 = require("../../adapter/angular-json");
 const error_types_1 = require("../../project-graph/error-types");
-function runPackageManagerInstallPlugins(repoRoot, pmc = (0, package_manager_1.getPackageManagerCommand)(), plugins) {
+const generator_utils_1 = require("../generate/generator-utils");
+const path_1 = require("path");
+const fs_1 = require("fs");
+const configuration_1 = require("../../config/configuration");
+const versions_1 = require("../../utils/versions");
+const child_process_1 = require("../../utils/child-process");
+function installPluginPackages(repoRoot, pmc = (0, package_manager_1.getPackageManagerCommand)(), plugins) {
     if (plugins.length === 0) {
         return;
     }
-    (0, utils_1.addDepsToPackageJson)(repoRoot, plugins);
-    (0, utils_1.runInstall)(repoRoot, pmc);
+    if ((0, fs_1.existsSync)((0, path_1.join)(repoRoot, 'package.json'))) {
+        (0, utils_1.addDepsToPackageJson)(repoRoot, plugins);
+        (0, utils_1.runInstall)(repoRoot, pmc);
+    }
+    else {
+        const nxJson = (0, configuration_1.readNxJson)(repoRoot);
+        nxJson.installation.plugins ??= {};
+        for (const plugin of plugins) {
+            nxJson.installation.plugins[plugin] = versions_1.nxVersion;
+        }
+        // Invoking nx wrapper to install plugins.
+        (0, child_process_1.runNxSync)('--version', { stdio: 'ignore' });
+    }
 }
 /**
  * Installs a plugin by running its init generator. It will change the file system tree passed in.
  * @param plugin The name of the plugin to install
  * @param repoRoot repo root
- * @param verbose verbose
- * @param options options passed to init generator
+ * @param pmc package manager commands
+ * @param updatePackageScripts whether to update package scripts
+ * @param verbose whether to run in verbose mode
  * @returns void
  */
-async function installPlugin(plugin, repoRoot = workspace_root_1.workspaceRoot, verbose = false, options) {
-    const host = new tree_1.FsTree(repoRoot, verbose, `install ${plugin}`);
-    const capabilities = await (0, plugins_1.getPluginCapabilities)(repoRoot, plugin, {});
-    const generators = capabilities?.generators;
-    if (!generators) {
-        throw new Error(`No generators found in ${plugin}.`);
+async function runPluginInitGenerator(plugin, repoRoot = workspace_root_1.workspaceRoot, updatePackageScripts = false, verbose = false, pmc = (0, package_manager_1.getPackageManagerCommand)()) {
+    try {
+        const { schema } = (0, generator_utils_1.getGeneratorInformation)(plugin, 'init', workspace_root_1.workspaceRoot, {});
+        let command = `g ${plugin}:init ${verbose ? '--verbose' : ''}`;
+        if (!!schema.properties['keepExistingVersions']) {
+            command += ` --keepExistingVersions`;
+        }
+        if (updatePackageScripts && !!schema.properties['updatePackageScripts']) {
+            command += ` --updatePackageScripts`;
+        }
+        (0, child_process_1.runNxSync)(command, {
+            stdio: [0, 1, 2],
+            cwd: repoRoot,
+            windowsHide: false,
+            packageManagerCommand: pmc,
+        });
     }
-    const initGenerator = findInitGenerator(generators);
-    if (!initGenerator) {
+    catch {
+        // init generator does not exist, so this function should noop
         output_1.output.log({
             title: `No "init" generator found in ${plugin}. Skipping initialization.`,
         });
         return;
     }
-    const { implementationFactory } = (0, generator_utils_1.getGeneratorInformation)(plugin, initGenerator, repoRoot, {});
-    const implementation = implementationFactory();
-    const task = await implementation(host, options);
-    (0, tree_1.flushChanges)(repoRoot, host.listChanges());
-    if (task) {
-        await task();
-    }
 }
 /**
  * Install plugins
  * Get the implementation of the plugin's init generator and run it
  * @returns a list of succeeded plugins and a map of failed plugins to errors
  */
-async function installPlugins(plugins, updatePackageScripts, repoRoot = workspace_root_1.workspaceRoot, verbose = false) {
+async function runPluginInitGenerators(plugins, updatePackageScripts, pmc, repoRoot = workspace_root_1.workspaceRoot, verbose = false) {
     if (plugins.length === 0) {
         return {
             succeededPlugins: [],
@@ -71,13 +89,7 @@ async function installPlugins(plugins, updatePackageScripts, repoRoot = workspac
     for (const plugin of plugins) {
         try {
             spinner.start('Installing plugin ' + plugin);
-            await installPlugin(plugin, repoRoot, verbose, {
-                keepExistingVersions: true,
-                updatePackageScripts,
-                addPlugin: true,
-                skipFormat: false,
-                skipPackageJson: false,
-            });
+            await runPluginInitGenerator(plugin, repoRoot, updatePackageScripts, verbose, pmc);
             succeededPlugins.push(plugin);
             spinner.succeed('Installed plugin ' + plugin);
         }
@@ -103,7 +115,7 @@ async function configurePlugins(plugins, updatePackageScripts, pmc, repoRoot = w
         };
     }
     output_1.output.log({ title: '🔨 Configuring plugins' });
-    let { succeededPlugins, failedPlugins } = await installPlugins(plugins, updatePackageScripts, repoRoot, verbose);
+    let { succeededPlugins, failedPlugins } = await runPluginInitGenerators(plugins, updatePackageScripts, pmc, repoRoot, verbose);
     if (succeededPlugins.length > 0) {
         output_1.output.success({
             title: 'Installed Plugins',

package/src/command-line/init/implementation/add-nx-to-turborepo.d.ts

@@ -0,0 +1,4 @@
+import { InitArgs } from '../init-v1';
+type Options = Pick<InitArgs, 'nxCloud' | 'interactive'>;
+export declare function addNxToTurborepo(_options: Options): Promise<void>;
+export {};

package/src/command-line/init/implementation/add-nx-to-turborepo.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNxToTurborepo = addNxToTurborepo;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const fileutils_1 = require("../../../utils/fileutils");
+const output_1 = require("../../../utils/output");
+const package_manager_1 = require("../../../utils/package-manager");
+const utils_1 = require("./utils");
+async function addNxToTurborepo(_options) {
+    const repoRoot = process.cwd();
+    output_1.output.log({
+        title: 'Initializing Nx based on your old Turborepo configuration',
+    });
+    output_1.output.log({
+        title: '💡 Did you know?',
+        bodyLines: [
+            '- Turborepo requires you to maintain all your common scripts like "build", "lint", "test" in all your packages, as well as their applicable cache inputs and outputs.',
+            `- Nx is extensible and has plugins for the tools you use to infer all of this for you purely based on that tool's configuration file within your packages.`,
+            '',
+            '  - E.g. the `@nx/vite` plugin will infer the "build" script based on the existence of a vite.config.js file.',
+            '  - Therefore with zero package level config, `nx build my-app` knows to run the `vite build` CLI directly, with all Nx cache inputs and outputs automatically inferred.',
+            '',
+            `NOTE: None of your existing package.json scripts will be modified as part of this initialization process, you can already use them as-is with Nx, but you can learn more about the benefits of Nx's inferred tasks at https://nx.dev/concepts/inferred-tasks`,
+        ],
+    });
+    let nxJson = (0, utils_1.createNxJsonFromTurboJson)((0, fileutils_1.readJsonFile)('turbo.json'));
+    const nxJsonPath = (0, node_path_1.join)(repoRoot, 'nx.json');
+    // Turborepo workspaces usually have prettier installed, so try and match the formatting before writing the file
+    try {
+        const prettier = await Promise.resolve().then(() => require('prettier'));
+        const config = await prettier.resolveConfig(repoRoot);
+        (0, node_fs_1.writeFileSync)(nxJsonPath, 
+        // @ts-ignore - Always await prettier.format, in modern versions it's async
+        await prettier.format(JSON.stringify(nxJson, null, 2), {
+            ...(config ?? {}),
+            parser: 'json',
+        }));
+    }
+    catch (err) {
+        // Apply fallback JSON write
+        (0, fileutils_1.writeJsonFile)(nxJsonPath, nxJson);
+    }
+    const pmc = (0, package_manager_1.getPackageManagerCommand)();
+    (0, utils_1.updateGitIgnore)(repoRoot);
+    (0, utils_1.addDepsToPackageJson)(repoRoot);
+    output_1.output.log({ title: '📦 Installing dependencies' });
+    (0, utils_1.runInstall)(repoRoot, pmc);
+}

package/src/command-line/init/implementation/check-compatible-with-plugins.js

@@ -72,7 +72,13 @@ function findPluginAndFilesWithError(error) {
             },
         ];
     }
-    excludeFiles = excludeFiles.filter(Boolean);
+    excludeFiles = excludeFiles.filter(Boolean).map((excludeFile) => {
+        const file = excludeFile.file;
+        excludeFile.file = file.startsWith(workspace_root_1.workspaceRoot)
+            ? (0, node_path_1.relative)(workspace_root_1.workspaceRoot, file)
+            : file;
+        return excludeFile;
+    });
     return {
         pluginIndex,
         excludeFiles,

package/src/command-line/init/implementation/deduce-default-base.d.ts

@@ -0,0 +1 @@
+export declare function deduceDefaultBase(): string;

package/src/command-line/init/implementation/deduce-default-base.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deduceDefaultBase = deduceDefaultBase;
+const node_child_process_1 = require("node:child_process");
+const default_base_1 = require("../../../utils/default-base");
+function deduceDefaultBase() {
+    try {
+        (0, node_child_process_1.execSync)(`git rev-parse --verify main`, {
+            stdio: ['ignore', 'ignore', 'ignore'],
+            windowsHide: false,
+        });
+        return 'main';
+    }
+    catch {
+        try {
+            (0, node_child_process_1.execSync)(`git rev-parse --verify dev`, {
+                stdio: ['ignore', 'ignore', 'ignore'],
+                windowsHide: false,
+            });
+            return 'dev';
+        }
+        catch {
+            try {
+                (0, node_child_process_1.execSync)(`git rev-parse --verify develop`, {
+                    stdio: ['ignore', 'ignore', 'ignore'],
+                    windowsHide: false,
+                });
+                return 'develop';
+            }
+            catch {
+                try {
+                    (0, node_child_process_1.execSync)(`git rev-parse --verify next`, {
+                        stdio: ['ignore', 'ignore', 'ignore'],
+                        windowsHide: false,
+                    });
+                    return 'next';
+                }
+                catch {
+                    try {
+                        (0, node_child_process_1.execSync)(`git rev-parse --verify master`, {
+                            stdio: ['ignore', 'ignore', 'ignore'],
+                            windowsHide: false,
+                        });
+                        return 'master';
+                    }
+                    catch {
+                        return (0, default_base_1.deduceDefaultBase)();
+                    }
+                }
+            }
+        }
+    }
+}

package/src/command-line/init/implementation/react/add-vite-commands-to-package-scripts.js

@@ -9,10 +9,12 @@ function addViteCommandsToPackageScripts(appName, isStandalone) {
     const packageJson = (0, fileutils_1.readJsonFile)(packageJsonPath);
     packageJson.scripts = {
         ...packageJson.scripts,
-        start: 'nx exec -- vite',
-        serve: 'nx exec -- vite',
-        build: `nx exec -- vite build`,
-        test: 'nx exec -- vitest',
+        // These should be replaced by the vite init generator later.
+        start: 'vite',
+        test: 'vitest',
+        dev: 'vite',
+        build: 'vite build',
+        eject: undefined,
     };
     (0, fileutils_1.writeJsonFile)(packageJsonPath, packageJson, { spaces: 2 });
 }

package/src/command-line/init/implementation/react/index.d.ts

@@ -1,4 +1,4 @@
 import { InitArgs } from '../../init-v1';
 type Options = InitArgs;
-export declare function addNxToCraRepo(options: Options): Promise<void>;
+export declare function addNxToCraRepo(_options: Options): Promise<void>;
 export {};

package/src/command-line/init/implementation/react/index.js

@@ -2,43 +2,52 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addNxToCraRepo = addNxToCraRepo;
 const child_process_1 = require("child_process");
-const node_fs_1 = require("node:fs");
 const path_1 = require("path");
+const fs_1 = require("fs");
 const fileutils_1 = require("../../../../utils/fileutils");
 const output_1 = require("../../../../utils/output");
 const package_manager_1 = require("../../../../utils/package-manager");
 const check_for_custom_webpack_setup_1 = require("./check-for-custom-webpack-setup");
-const check_for_uncommitted_changes_1 = require("./check-for-uncommitted-changes");
-const clean_up_files_1 = require("./clean-up-files");
 const read_name_from_package_json_1 = require("./read-name-from-package-json");
 const rename_js_to_jsx_1 = require("./rename-js-to-jsx");
-const tsconfig_setup_1 = require("./tsconfig-setup");
-const write_craco_config_1 = require("./write-craco-config");
 const write_vite_config_1 = require("./write-vite-config");
 const write_vite_index_html_1 = require("./write-vite-index-html");
-const connect_to_nx_cloud_1 = require("../../../connect/connect-to-nx-cloud");
-async function addNxToCraRepo(options) {
-    if (!options.force) {
-        (0, check_for_uncommitted_changes_1.checkForUncommittedChanges)();
+async function addNxToCraRepo(_options) {
+    if (!_options.force) {
         (0, check_for_custom_webpack_setup_1.checkForCustomWebpackSetup)();
     }
-    output_1.output.log({ title: '🐳 Nx initialization' });
-    const normalizedOptions = await normalizeOptions(options);
-    await reorgnizeWorkspaceStructure(normalizedOptions);
+    const options = await normalizeOptions(_options);
+    await addBundler(options);
+    (0, fs_1.appendFileSync)(`.gitignore`, '\nnode_modules');
+    (0, fs_1.appendFileSync)(`.gitignore`, '\ndist');
+    installDependencies(options);
+    // Vite expects index.html to be in the root as the main entry point.
+    const indexPath = options.isStandalone
+        ? 'index.html'
+        : (0, path_1.join)('apps', options.reactAppName, 'index.html');
+    const oldIndexPath = options.isStandalone
+        ? (0, path_1.join)('public', 'index.html')
+        : (0, path_1.join)('apps', options.reactAppName, 'public', 'index.html');
+    output_1.output.note({
+        title: `A new ${indexPath} has been created. Compare it to the previous ${oldIndexPath} file and make any changes needed, then delete the previous file.`,
+    });
+    if (_options.force) {
+        output_1.output.note({
+            title: `Using --force converts projects with custom Webpack setup. You will need to manually update your vite.config.js file to match the plugins used in your old Webpack configuration.`,
+        });
+    }
 }
 function installDependencies(options) {
     const dependencies = [
+        '@rollup/plugin-replace',
         '@testing-library/jest-dom',
+        '@vitejs/plugin-react',
         'eslint-config-react-app',
         'web-vitals',
         'jest-watch-typeahead',
+        'vite',
+        'vitest',
     ];
-    if (options.isVite) {
-        dependencies.push('vite', 'vitest', '@vitejs/plugin-react');
-    }
-    else {
-        dependencies.push('@craco/craco', 'cross-env', 'react-scripts', 'tsconfig-paths-webpack-plugin');
-    }
     (0, child_process_1.execSync)(`${options.pmc.addDev} ${dependencies.join(' ')}`, {
         stdio: [0, 1, 2],
         windowsHide: false,
@@ -49,182 +58,20 @@ async function normalizeOptions(options) {
     const pmc = (0, package_manager_1.getPackageManagerCommand)(packageManager);
     const appIsJs = !(0, fileutils_1.fileExists)(`tsconfig.json`);
     const reactAppName = (0, read_name_from_package_json_1.readNameFromPackageJson)();
-    const packageJson = (0, fileutils_1.readJsonFile)((0, path_1.join)(process.cwd(), 'package.json'));
-    const deps = {
-        ...packageJson.dependencies,
-        ...packageJson.devDependencies,
-    };
-    const isCRA5 = /^[^~]?5/.test(deps['react-scripts']);
-    const npmVersion = (0, child_process_1.execSync)('npm -v', {
-        windowsHide: false,
-    }).toString();
-    // Should remove this check 04/2023 once Node 14 & npm 6 reach EOL
-    const npxYesFlagNeeded = !npmVersion.startsWith('6'); // npm 7 added -y flag to npx
-    const isVite = options.vite;
     const isStandalone = !options.integrated;
-    const nxCloud = options.nxCloud ??
-        (options.interactive ? await (0, connect_to_nx_cloud_1.connectExistingRepoToNxCloudPrompt)() : false);
     return {
         ...options,
-        nxCloud,
         packageManager,
         pmc,
         appIsJs,
         reactAppName,
-        isCRA5,
-        npxYesFlagNeeded,
-        isVite,
         isStandalone,
     };
 }
-/**
- * - Create a temp workspace
- * - Move all files to temp workspace
- * - Add bundler to temp workspace
- * - Move files back to root
- * - Clean up unused files
- */
-async function reorgnizeWorkspaceStructure(options) {
-    createTempWorkspace(options);
-    moveFilesToTempWorkspace(options);
-    await addBundler(options);
-    output_1.output.log({ title: '🧶  Updating .gitignore file' });
-    (0, child_process_1.execSync)(`echo "node_modules" >> .gitignore`, {
-        stdio: [0, 1, 2],
-        windowsHide: false,
-    });
-    (0, child_process_1.execSync)(`echo "dist" >> .gitignore`, {
-        stdio: [0, 1, 2],
-        windowsHide: false,
-    });
-    process.chdir('..');
-    copyFromTempWorkspaceToRoot();
-    cleanUpUnusedFilesAndAddConfigFiles(options);
-    output_1.output.log({ title: '🙂 Please be patient, one final step remaining!' });
-    output_1.output.log({ title: '📦 Installing dependencies' });
-    installDependencies(options);
-    if (options.isVite) {
-        const indexPath = options.isStandalone
-            ? 'index.html'
-            : (0, path_1.join)('apps', options.reactAppName, 'index.html');
-        const oldIndexPath = options.isStandalone
-            ? (0, path_1.join)('public', 'index.html')
-            : (0, path_1.join)('apps', options.reactAppName, 'public', 'index.html');
-        output_1.output.note({
-            title: `A new ${indexPath} has been created. Compare it to the previous ${oldIndexPath} file and make any changes needed, then delete the previous file.`,
-        });
-    }
-}
-function createTempWorkspace(options) {
-    (0, node_fs_1.rmSync)('temp-workspace', { recursive: true, force: true });
-    (0, child_process_1.execSync)(`npx ${options.npxYesFlagNeeded ? '-y' : ''} create-nx-workspace@latest temp-workspace --appName=${options.reactAppName} --preset=react-monorepo --style=css --bundler=${options.isVite ? 'vite' : 'webpack'} --packageManager=${options.packageManager} ${options.nxCloud ? '--nxCloud=yes' : '--nxCloud=skip'} ${options.addE2e ? '--e2eTestRunner=playwright' : '--e2eTestRunner=none'}`, { stdio: [0, 1, 2], windowsHide: false });
-    output_1.output.log({ title: '👋 Welcome to Nx!' });
-    output_1.output.log({ title: '🧹 Clearing unused files' });
-    (0, node_fs_1.cpSync)((0, path_1.join)('temp-workspace', 'apps', options.reactAppName, 'project.json'), 'project.json', { recursive: true });
-    (0, node_fs_1.rmSync)((0, path_1.join)('temp-workspace', 'apps', options.reactAppName), {
-        recursive: true,
-        force: true,
-    });
-    (0, node_fs_1.rmSync)('node_modules', { recursive: true, force: true });
-}
-function copyPackageJsonDepsFromTempWorkspace() {
-    const repoRoot = process.cwd();
-    let rootPackageJson = (0, fileutils_1.readJsonFile)((0, path_1.join)(repoRoot, 'package.json'));
-    const tempWorkspacePackageJson = (0, fileutils_1.readJsonFile)((0, path_1.join)(repoRoot, 'temp-workspace', 'package.json'));
-    rootPackageJson = overridePackageDeps('dependencies', rootPackageJson, tempWorkspacePackageJson);
-    rootPackageJson = overridePackageDeps('devDependencies', rootPackageJson, tempWorkspacePackageJson);
-    rootPackageJson.scripts = {}; // remove existing scripts
-    (0, fileutils_1.writeJsonFile)((0, path_1.join)(repoRoot, 'package.json'), rootPackageJson);
-    (0, fileutils_1.writeJsonFile)((0, path_1.join)(repoRoot, 'temp-workspace', 'package.json'), rootPackageJson);
-}
-function overridePackageDeps(depConfigName, base, override) {
-    if (!base[depConfigName]) {
-        base[depConfigName] = override[depConfigName];
-        return base;
-    }
-    const deps = override[depConfigName];
-    Object.keys(deps).forEach((dep) => {
-        if (base.dependencies?.[dep]) {
-            delete base.dependencies[dep];
-        }
-        if (base.devDependencies?.[dep]) {
-            delete base.devDependencies[dep];
-        }
-        base[depConfigName][dep] = deps[dep];
-    });
-    return base;
-}
-function moveSync(src, dest) {
-    const destParentDir = (0, path_1.dirname)(dest);
-    (0, node_fs_1.mkdirSync)(destParentDir, { recursive: true });
-    (0, node_fs_1.rmSync)(dest, { recursive: true, force: true });
-    return (0, node_fs_1.renameSync)(src, dest);
-}
-function moveFilesToTempWorkspace(options) {
-    output_1.output.log({ title: '🚚 Moving your React app in your new Nx workspace' });
-    copyPackageJsonDepsFromTempWorkspace();
-    const requiredCraFiles = [
-        'project.json',
-        'package.json',
-        'src',
-        'public',
-        options.appIsJs ? null : 'tsconfig.json',
-        options.packageManager === 'yarn' ? 'yarn.lock' : null,
-        options.packageManager === 'pnpm' ? 'pnpm-lock.yaml' : null,
-        options.packageManager === 'npm' ? 'package-lock.json' : null,
-        options.packageManager === 'bun' ? 'bun.lockb' : null,
-    ];
-    const optionalCraFiles = ['README.md'];
-    const filesToMove = [...requiredCraFiles, ...optionalCraFiles].filter(Boolean);
-    filesToMove.forEach((f) => {
-        try {
-            moveSync(f, options.isStandalone
-                ? (0, path_1.join)('temp-workspace', f)
-                : (0, path_1.join)('temp-workspace', 'apps', options.reactAppName, f));
-        }
-        catch (error) {
-            if (requiredCraFiles.includes(f)) {
-                throw error;
-            }
-        }
-    });
-    process.chdir('temp-workspace');
-}
 async function addBundler(options) {
-    if (options.isVite) {
-        output_1.output.log({ title: '🧑‍🔧  Setting up Vite' });
-        const { addViteCommandsToPackageScripts } = await Promise.resolve().then(() => require('./add-vite-commands-to-package-scripts'));
-        addViteCommandsToPackageScripts(options.reactAppName, options.isStandalone);
-        (0, write_vite_config_1.writeViteConfig)(options.reactAppName, options.isStandalone, options.appIsJs);
-        (0, write_vite_index_html_1.writeViteIndexHtml)(options.reactAppName, options.isStandalone, options.appIsJs);
-        await (0, rename_js_to_jsx_1.renameJsToJsx)(options.reactAppName, options.isStandalone);
-    }
-    else {
-        output_1.output.log({ title: '🧑‍🔧  Setting up craco + Webpack' });
-        const { addCracoCommandsToPackageScripts } = await Promise.resolve().then(() => require('./add-craco-commands-to-package-scripts'));
-        addCracoCommandsToPackageScripts(options.reactAppName, options.isStandalone);
-        (0, write_craco_config_1.writeCracoConfig)(options.reactAppName, options.isCRA5, options.isStandalone);
-        output_1.output.log({
-            title: '🛬 Skip CRA preflight check since Nx manages the monorepo',
-        });
-        (0, child_process_1.execSync)(`echo "SKIP_PREFLIGHT_CHECK=true" > .env`, {
-            stdio: [0, 1, 2],
-            windowsHide: false,
-        });
-    }
-}
-function copyFromTempWorkspaceToRoot() {
-    output_1.output.log({ title: '🚚 Folder restructuring.' });
-    (0, node_fs_1.readdirSync)('temp-workspace').forEach((f) => {
-        moveSync((0, path_1.join)('temp-workspace', f), f);
-    });
-}
-function cleanUpUnusedFilesAndAddConfigFiles(options) {
-    output_1.output.log({ title: '🧹  Cleaning up.' });
-    (0, clean_up_files_1.cleanUpFiles)(options.reactAppName, options.isStandalone);
-    output_1.output.log({ title: "📃 Extend the app's tsconfig.json from the base" });
-    (0, tsconfig_setup_1.setupTsConfig)(options.reactAppName, options.isStandalone);
-    if (options.isStandalone) {
-        (0, node_fs_1.rmSync)('apps', { recursive: true, force: true });
-    }
+    const { addViteCommandsToPackageScripts } = await Promise.resolve().then(() => require('./add-vite-commands-to-package-scripts'));
+    addViteCommandsToPackageScripts(options.reactAppName, options.isStandalone);
+    (0, write_vite_config_1.writeViteConfig)(options.reactAppName, options.isStandalone, options.appIsJs);
+    (0, write_vite_index_html_1.writeViteIndexHtml)(options.reactAppName, options.isStandalone, options.appIsJs);
+    await (0, rename_js_to_jsx_1.renameJsToJsx)(options.reactAppName, options.isStandalone);
 }

package/src/command-line/init/implementation/react/write-vite-config.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.writeViteConfig = writeViteConfig;
 const fs_1 = require("fs");
 function writeViteConfig(appName, isStandalone, isJs) {
-    let port = 4200;
+    let port = 3000;
     // Use PORT from .env file if it exists in project.
     if ((0, fs_1.existsSync)(`../.env`)) {
         const envFile = (0, fs_1.readFileSync)(`../.env`).toString();
@@ -13,8 +13,20 @@ function writeViteConfig(appName, isStandalone, isJs) {
             port = portCandidate;
         }
     }
-    (0, fs_1.writeFileSync)(isStandalone ? 'vite.config.js' : `apps/${appName}/vite.config.js`, `import { defineConfig } from 'vite'
+    (0, fs_1.writeFileSync)(isStandalone ? 'vite.config.mjs' : `apps/${appName}/vite.config.mjs`, `import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import replace from '@rollup/plugin-replace';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+// Match CRA's environment variables.
+// TODO: Replace these with VITE_ prefixed environment variables, and using import.meta.env.VITE_* instead of process.env.REACT_APP_*.
+const craEnvVarRegex = /^REACT_APP/i;
+const craEnvVars = Object.keys(process.env)
+  .filter((key) => craEnvVarRegex.test(key))
+  .reduce((env, key) => {
+    env[\`process.env.\${key}\`] = JSON.stringify(process.env[key]);
+    return env;
+  }, {});
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -31,7 +43,11 @@ export default defineConfig({
     setupFiles: 'src/setupTests.${isJs ? 'js' : 'ts'}',
     css: true,
   },
-  plugins: [react()],
+  plugins: [
+    react(),
+    replace({ values: craEnvVars, preventAssignment: true }),
+    nxViteTsPaths(),
+  ],
 });
 `);
 }

package/src/command-line/init/implementation/utils.d.ts

@@ -1,12 +1,14 @@
+import { NxJsonConfiguration } from '../../../config/nx-json';
 import { PackageJson } from '../../../utils/package-json';
 import { PackageManagerCommands } from '../../../utils/package-manager';
 export declare function createNxJsonFile(repoRoot: string, topologicalTargets: string[], cacheableOperations: string[], scriptOutputs: {
     [name: string]: string;
 }): void;
+export declare function createNxJsonFromTurboJson(turboJson: Record<string, any>): NxJsonConfiguration;
 export declare function addDepsToPackageJson(repoRoot: string, additionalPackages?: string[]): void;
 export declare function updateGitIgnore(root: string): void;
 export declare function runInstall(repoRoot: string, pmc?: PackageManagerCommands): void;
-export declare function initCloud(installationSource: 'nx-init' | 'nx-init-angular' | 'nx-init-cra' | 'nx-init-monorepo' | 'nx-init-nest' | 'nx-init-npm-repo'): Promise<void>;
+export declare function initCloud(installationSource: 'nx-init' | 'nx-init-angular' | 'nx-init-cra' | 'nx-init-monorepo' | 'nx-init-nest' | 'nx-init-npm-repo' | 'nx-init-turborepo'): Promise<void>;
 export declare function addVsCodeRecommendedExtensions(repoRoot: string, extensions: string[]): void;
 export declare function markRootPackageJsonAsNxProjectLegacy(repoRoot: string, cacheableScripts: string[], pmc: PackageManagerCommands): void;
 export declare function markPackageJsonAsNxProject(packageJsonPath: string): void;
@@ -14,3 +16,4 @@ export declare function printFinalMessage({ learnMoreLink, }: {
     learnMoreLink?: string;
 }): void;
 export declare function isMonorepo(packageJson: PackageJson): boolean;
+export declare function isCRA(packageJson: PackageJson): boolean;