feat(react): cra-to-nx to use PORT from .env file when migrating to Vite (#13116)

e2e/cra-to-nx/src/cra-to-nx.test.ts

@@ -3,9 +3,11 @@ import {
   getPackageManagerCommand,
   getPublishedVersion,
   getSelectedPackageManager,
+  readFile,
   readJson,
   runCLI,
   runCommand,
+  updateFile,
 } from '@nrwl/e2e/utils';
 import { createReactApp } from './utils';
 
@@ -49,7 +51,25 @@ describe('cra-to-nx', () => {
 
     expect(craToNxOutput).toContain('🎉 Done!');
 
+    const viteConfig = readFile(`apps/${appName}/vite.config.js`);
+    expect(viteConfig).toContain('port: 4200'); // default port
+
     runCLI(`build ${appName}`);
     checkFilesExist(`dist/apps/${appName}/index.html`);
   });
+
+  it('should convert to an integrated workspace with Vite with custom port', () => {
+    const appName = 'my-app';
+    createReactApp(appName);
+    updateFile(`.env`, `NOT_THE_PORT=8000\nPORT=3000\nSOMETHING_ELSE=whatever`);
+
+    runCommand(
+      `${
+        pmc.runUninstalledPackage
+      } cra-to-nx@${getPublishedVersion()} --nxCloud=false --vite --force`
+    );
+
+    const viteConfig = readFile(`apps/${appName}/vite.config.js`);
+    expect(viteConfig).toContain('port: 3000');
+  });
 });

packages/cra-to-nx/src/index.ts

@@ -7,21 +7,26 @@ export * from './lib/cra-to-nx';
 
 export const commandsObject = yargs
   .parserConfiguration({ 'strip-dashed': true })
+  .option('force', {
+    type: 'boolean',
+    describe: 'Skip validation and run the migration.',
+    default: false,
+  })
   .option('e2e', {
     type: 'boolean',
     describe: 'Generate end-to-end tests with Cypress',
     default: false,
   })
-  .option('vite', {
-    type: 'boolean',
-    describe: 'Use Vite and Vitest (instead of Webpack and Jest)',
-    default: false,
-  })
   .option('nxCloud', {
     type: 'boolean',
     describe: 'Setup Nx Cloud',
     default: true,
   })
+  .option('vite', {
+    type: 'boolean',
+    describe: 'Use Vite and Vitest (instead of Webpack and Jest)',
+    default: false,
+  })
   .help();
 
 createNxWorkspaceForReact(commandsObject.argv).catch((e) => {

packages/cra-to-nx/src/lib/check-for-custom-webpack-setup.ts

@@ -0,0 +1,17 @@
+import { readJsonFile } from 'nx/src/utils/fileutils';
+
+export function checkForCustomWebpackSetup() {
+  const packageJson = readJsonFile('package.json');
+  const combinedDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+  };
+  ['react-app-rewired', '@craco/craco'].forEach((pkg) => {
+    if (combinedDeps[pkg]) {
+      console.log(
+        `Skipping migration due to custom webpack setup. Found "${pkg}" usage. Use --force to continue anyway.`
+      );
+      process.exit(1);
+    }
+  });
+}

packages/cra-to-nx/src/lib/cra-to-nx.ts

@@ -18,6 +18,7 @@ import { cleanUpFiles } from './clean-up-files';
 import { writeViteConfig } from './write-vite-config';
 import { renameJsToJsx } from './rename-js-to-jsx';
 import { writeViteIndexHtml } from './write-vite-index-html';
+import { checkForCustomWebpackSetup } from './check-for-custom-webpack-setup';
 
 function addDependencies(pmc: PackageManagerCommands, ...deps: string[]) {
   const depsArg = deps.join(' ');
@@ -26,7 +27,10 @@ function addDependencies(pmc: PackageManagerCommands, ...deps: string[]) {
 }
 
 export async function createNxWorkspaceForReact(options: Record<string, any>) {
-  checkForUncommittedChanges();
+  if (!options.force) {
+    checkForUncommittedChanges();
+    checkForCustomWebpackSetup();
+  }
   const packageManager = detectPackageManager();
   const pmc = getPackageManagerCommand(packageManager);
 

packages/cra-to-nx/src/lib/write-vite-config.ts

@@ -1,6 +1,18 @@
 import * as fs from 'fs';
 
 export function writeViteConfig(appName: string) {
+  let port = 4200;
+
+  // Use PORT from .env file if it exists in project.
+  if (fs.existsSync(`../.env`)) {
+    const envFile = fs.readFileSync(`../.env`).toString();
+    const result = envFile.match(/\bport=(?<port>\d{4})/i);
+    const portCandidate = Number(result?.groups?.port);
+    if (!isNaN(portCandidate)) {
+      port = portCandidate;
+    }
+  }
+
   fs.writeFileSync(
     `apps/${appName}/vite.config.js`,
     `import { defineConfig } from 'vite'
@@ -12,6 +24,7 @@ export default defineConfig({
     outDir: '../../dist/apps/${appName}'
   },
   server: {
+    port: ${port},
     open: true,
   },
   test: {