diff --git a/e2e/cra-to-nx/src/cra-to-nx.test.ts b/e2e/cra-to-nx/src/cra-to-nx.test.ts index 3ceb6e57ba..f38c85b797 100644 --- a/e2e/cra-to-nx/src/cra-to-nx.test.ts +++ b/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'); + }); }); diff --git a/packages/cra-to-nx/src/index.ts b/packages/cra-to-nx/src/index.ts index ac33113b06..66be0664ed 100644 --- a/packages/cra-to-nx/src/index.ts +++ b/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) => { diff --git a/packages/cra-to-nx/src/lib/check-for-custom-webpack-setup.ts b/packages/cra-to-nx/src/lib/check-for-custom-webpack-setup.ts new file mode 100644 index 0000000000..b2a19cdb2a --- /dev/null +++ b/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); + } + }); +} diff --git a/packages/cra-to-nx/src/lib/cra-to-nx.ts b/packages/cra-to-nx/src/lib/cra-to-nx.ts index c1a60fa7bc..7a97c0b8f3 100644 --- a/packages/cra-to-nx/src/lib/cra-to-nx.ts +++ b/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) { - checkForUncommittedChanges(); + if (!options.force) { + checkForUncommittedChanges(); + checkForCustomWebpackSetup(); + } const packageManager = detectPackageManager(); const pmc = getPackageManagerCommand(packageManager); diff --git a/packages/cra-to-nx/src/lib/write-vite-config.ts b/packages/cra-to-nx/src/lib/write-vite-config.ts index e644f12d42..14a3bea837 100644 --- a/packages/cra-to-nx/src/lib/write-vite-config.ts +++ b/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=(?\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: {