Feat: create astro add install step (#3190)

* feat: add instlal step with pkg manager detection

* feat: add package emoji for style points

* feat: update next steps to match pkg manager

* refactor: extract some create-astro test utils

* refactor: extract promp msgs to utils

* chore: add install step tests

* chore: changeset

* fix: remove directory test skip

* fix: unset env variables after install step test

* deps: add execa to create-astro

* refactor: use execa for install step

* chore: remove old comment

* fix: rework install step test for node 14?

* chore: remove "politely stolen" footnote

* temp: show stdout dialog

* feat: remove debugging logs, add dryrun flag for testing

* chore: more stray logs

* fix: remove rmdir

.changeset/strong-seals-grow.md

@@ -0,0 +1,5 @@
+---
+'create-astro': minor
+---
+
+Feat: add option to install dependencies during setup. This respects the package manager used to run create-astro (ex. "yarn create astro" vs "pnpm create astro@latest").

packages/create-astro/package.json

@@ -31,6 +31,7 @@
     "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.14",
     "degit": "^2.8.4",
+    "execa": "^6.1.0",
     "kleur": "^4.1.4",
     "node-fetch": "^3.2.3",
     "ora": "^6.1.0",

packages/create-astro/src/index.ts

@@ -10,6 +10,7 @@ import { FRAMEWORKS, COUNTER_COMPONENTS, Integration } from './frameworks.js';
 import { TEMPLATES } from './templates.js';
 import { createConfig } from './config.js';
 import { logger, defaultLogLevel } from './logger.js';
+import { execa } from 'execa';
 
 // NOTE: In the v7.x version of npm, the default behavior of `npm init` was changed
 // to no longer require `--` to pass args and instead pass `--` directly to us. This
@@ -40,6 +41,8 @@ const FILES_TO_REMOVE = ['.stackblitzrc', 'sandbox.config.json']; // some files
 const POSTPROCESS_FILES = ['package.json', 'astro.config.mjs', 'CHANGELOG.md']; // some files need processing after copying.
 
 export async function main() {
+	const pkgManager = pkgManagerFromUserAgent(process.env.npm_config_user_agent);
+
 	logger.debug('Verbose logging turned on');
 	console.log(`\n${bold('Welcome to Astro!')} ${gray(`(create-astro v${version})`)}`);
 	console.log(
@@ -138,6 +141,7 @@ export async function main() {
 	spinner = ora({ color: 'green', text: 'Copying project files...' }).start();
 
 	// Copy
+	if (!args.dryrun) {
 		try {
 			emitter.on('info', (info) => {
 				logger.debug(info.message);
@@ -268,10 +272,38 @@ export async function main() {
 				});
 			await fs.promises.writeFile(pageFileLoc, newContent);
 		}
+	}
 
 	spinner.succeed();
 	console.log(bold(green('✔') + ' Done!'));
 
+	const installResponse = await prompts({
+		type: 'confirm',
+		name: 'install',
+		message: `Would you like us to run "${pkgManager} install?"`,
+		initial: true,
+	});
+
+	if (!installResponse) {
+		process.exit(0);
+	}
+
+	if (installResponse.install) {
+		const installExec = execa(pkgManager, ['install'], { cwd });
+		const installingPackagesMsg = `Installing packages${emojiWithFallback(' 📦', '...')}`;
+		spinner = ora({ color: 'green', text: installingPackagesMsg }).start();
+		if (!args.dryrun) {
+			await new Promise<void>((resolve, reject) => {
+				installExec.stdout?.on('data', function (data) {
+					spinner.text = `${installingPackagesMsg}\n${bold(`[${pkgManager}]`)} ${data}`;
+				});
+				installExec.on('error', (error) => reject(error));
+				installExec.on('close', () => resolve());
+			});
+		}
+		spinner.succeed();
+	}
+
 	console.log('\nNext steps:');
 	let i = 1;
 	const relative = path.relative(process.cwd(), cwd);
@@ -279,14 +311,28 @@ export async function main() {
 		console.log(`  ${i++}: ${bold(cyan(`cd ${relative}`))}`);
 	}
 
-	console.log(`  ${i++}: ${bold(cyan('npm install'))} (or pnpm install, yarn, etc)`);
+	if (!installResponse.install) {
+		console.log(`  ${i++}: ${bold(cyan(`${pkgManager} install`))}`);
+	}
 	console.log(
 		`  ${i++}: ${bold(
 			cyan('git init && git add -A && git commit -m "Initial commit"')
 		)} (optional step)`
 	);
-	console.log(`  ${i++}: ${bold(cyan('npm run dev'))} (or pnpm, yarn, etc)`);
+	const runCommand = pkgManager === 'npm' ? 'npm run dev' : `${pkgManager} dev`;
+	console.log(`  ${i++}: ${bold(cyan(runCommand))}`);
 
 	console.log(`\nTo close the dev server, hit ${bold(cyan('Ctrl-C'))}`);
 	console.log(`\nStuck? Visit us at ${cyan('https://astro.build/chat')}\n`);
 }
+
+function emojiWithFallback(char: string, fallback: string) {
+	return process.platform !== 'win32' ? char : fallback;
+}
+
+function pkgManagerFromUserAgent(userAgent?: string) {
+	if (!userAgent) return 'npm';
+	const pkgSpec = userAgent.split(' ')[0];
+	const pkgSpecArr = pkgSpec.split('/');
+	return pkgSpecArr[0];
+}

packages/create-astro/test/directory-step.test.js

@@ -1,54 +1,20 @@
-import { execa } from 'execa';
+import { resolve } from 'path';
-import { fileURLToPath } from 'url';
-import { dirname, resolve } from 'path';
 import { promises, existsSync } from 'fs';
+import { PROMPT_MESSAGES, testDir, setup, promiseWithTimeout, timeout } from './utils.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const createAstroError = new Error(
-	'Timed out waiting for create-astro to respond with expected output.'
-);
-const timeout = 5000;
-
-const instructions = {
-	directory: 'Where would you like to create your app?',
-	template: 'Which app template would you like to use?',
-};
 const inputs = {
 	nonEmptyDir: './fixtures/select-directory/nonempty-dir',
 	emptyDir: './fixtures/select-directory/empty-dir',
 	nonexistentDir: './fixtures/select-directory/banana-dir',
 };
 
-function promiseWithTimeout(testFn) {
-	return new Promise((resolve, reject) => {
-		const timeoutEvent = setTimeout(() => {
-			reject(createAstroError);
-		}, timeout);
-		function resolver() {
-			clearTimeout(timeoutEvent);
-			resolve();
-		}
-		testFn(resolver);
-	});
-}
-
-function setup(args = []) {
-	const { stdout, stdin } = execa('../create-astro.mjs', args, { cwd: __dirname });
-	return {
-		stdin,
-		stdout,
-	};
-}
-
 describe('[create-astro] select directory', function () {
 	this.timeout(timeout);
 	it('should prompt for directory when none is provided', function () {
 		return promiseWithTimeout((resolve) => {
 			const { stdout } = setup();
 			stdout.on('data', (chunk) => {
-				if (chunk.includes(instructions.directory)) {
+				if (chunk.includes(PROMPT_MESSAGES.directory)) {
 					resolve();
 				}
 			});
@@ -58,21 +24,21 @@ describe('[create-astro] select directory', function () {
 		return promiseWithTimeout((resolve) => {
 			const { stdout } = setup([inputs.nonEmptyDir]);
 			stdout.on('data', (chunk) => {
-				if (chunk.includes(instructions.directory)) {
+				if (chunk.includes(PROMPT_MESSAGES.directory)) {
 					resolve();
 				}
 			});
 		});
 	});
 	it('should proceed on an empty directory', async function () {
-		const resolvedEmptyDirPath = resolve(__dirname, inputs.emptyDir);
+		const resolvedEmptyDirPath = resolve(testDir, inputs.emptyDir);
 		if (!existsSync(resolvedEmptyDirPath)) {
 			await promises.mkdir(resolvedEmptyDirPath);
 		}
 		return promiseWithTimeout((resolve) => {
 			const { stdout } = setup([inputs.emptyDir]);
 			stdout.on('data', (chunk) => {
-				if (chunk.includes(instructions.template)) {
+				if (chunk.includes(PROMPT_MESSAGES.template)) {
 					resolve();
 				}
 			});
@@ -82,7 +48,7 @@ describe('[create-astro] select directory', function () {
 		return promiseWithTimeout((resolve) => {
 			const { stdout } = setup([inputs.nonexistentDir]);
 			stdout.on('data', (chunk) => {
-				if (chunk.includes(instructions.template)) {
+				if (chunk.includes(PROMPT_MESSAGES.template)) {
 					resolve();
 				}
 			});
@@ -95,7 +61,7 @@ describe('[create-astro] select directory', function () {
 				if (chunk.includes('Please clear contents or choose a different path.')) {
 					resolve();
 				}
-				if (chunk.includes(instructions.directory)) {
+				if (chunk.includes(PROMPT_MESSAGES.directory)) {
 					stdin.write(`${inputs.nonEmptyDir}\x0D`);
 				}
 			});

packages/create-astro/test/install-step.test.js

@@ -0,0 +1,71 @@
+import { setup, promiseWithTimeout, timeout, PROMPT_MESSAGES } from './utils.js';
+import { sep } from 'path';
+import fs from 'fs';
+import os from 'os';
+
+const FAKE_PACKAGE_MANAGER = 'banana';
+let initialEnvValue = null;
+
+describe('[create-astro] install', function () {
+	this.timeout(timeout);
+	let tempDir = '';
+	beforeEach(async () => {
+		tempDir = await fs.promises.mkdtemp(`${os.tmpdir()}${sep}`);
+	});
+	this.beforeAll(() => {
+		initialEnvValue = process.env.npm_config_user_agent;
+		process.env.npm_config_user_agent = FAKE_PACKAGE_MANAGER;
+	})
+	this.afterAll(() => {
+		process.env.npm_config_user_agent = initialEnvValue;
+	})
+
+	it('should respect package manager in prompt', function() {
+		const { stdout, stdin } = setup([tempDir, '--dryrun']);
+		return promiseWithTimeout((resolve) => {
+			const seen = new Set();
+			const installPrompt = PROMPT_MESSAGES.install(FAKE_PACKAGE_MANAGER);
+			stdout.on('data', (chunk) => {
+				if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
+					seen.add(PROMPT_MESSAGES.template);
+					stdin.write('\x0D');
+				}
+				if (!seen.has(PROMPT_MESSAGES.frameworks) && chunk.includes(PROMPT_MESSAGES.frameworks)) {
+					seen.add(PROMPT_MESSAGES.frameworks);
+					stdin.write('\x0D');
+				}
+				
+				if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
+					seen.add(installPrompt);
+					resolve();
+				}
+			});
+		});
+	});
+
+	it('should respect package manager in next steps', function() {
+		const { stdout, stdin } = setup([tempDir, '--dryrun']);
+		return promiseWithTimeout((resolve) => {
+			const seen = new Set();
+			const installPrompt = PROMPT_MESSAGES.install(FAKE_PACKAGE_MANAGER);
+			stdout.on('data', (chunk) => {
+				if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
+					seen.add(PROMPT_MESSAGES.template);
+					stdin.write('\x0D');
+				}
+				if (!seen.has(PROMPT_MESSAGES.frameworks) && chunk.includes(PROMPT_MESSAGES.frameworks)) {
+					seen.add(PROMPT_MESSAGES.frameworks);
+					stdin.write('\x0D');
+				}
+				
+				if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
+					seen.add(installPrompt)
+					stdin.write('n\x0D');
+				}
+				if (chunk.includes('banana dev')) {
+					resolve();
+				}
+			});
+		});
+	});
+})

packages/create-astro/test/utils.js

@@ -0,0 +1,40 @@
+import { execa } from 'execa'
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+export const testDir = dirname(__filename);
+export const timeout = 5000;
+
+const createAstroError = new Error(
+	'Timed out waiting for create-astro to respond with expected output.'
+);
+
+export function promiseWithTimeout(testFn) {
+	return new Promise((resolve, reject) => {
+		const timeoutEvent = setTimeout(() => {
+			reject(createAstroError);
+		}, timeout);
+		function resolver() {
+			clearTimeout(timeoutEvent);
+			resolve();
+		}
+		testFn(resolver);
+	});
+}
+
+export const PROMPT_MESSAGES = {
+	directory: 'Where would you like to create your app?',
+	template: 'Which app template would you like to use?',
+	// TODO: remove when framework selector is removed
+	frameworks: 'Which frameworks would you like to use?',
+	install: (pkgManager) => `Would you like us to run "${pkgManager} install?"`,
+};
+
+export function setup(args = []) {
+	const { stdout, stdin } = execa('../create-astro.mjs', args, { cwd: testDir });
+	return {
+		stdin,
+		stdout,
+	};
+}

pnpm-lock.yaml

@@ -1216,6 +1216,7 @@ importers:
       astro-scripts: workspace:*
       chai: ^4.3.6
       degit: ^2.8.4
+      execa: ^6.1.0
       kleur: ^4.1.4
       mocha: ^9.2.2
       node-fetch: ^3.2.3
@@ -1227,6 +1228,7 @@ importers:
       '@types/degit': 2.8.3
       '@types/prompts': 2.0.14
       degit: 2.8.4
+      execa: 6.1.0
       kleur: 4.1.4
       node-fetch: 3.2.3
       ora: 6.1.0
@@ -1241,6 +1243,12 @@ importers:
       mocha: 9.2.2
       uvu: 0.5.3
 
+  packages/create-astro/test/fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir./fixtures/select-directory/nonempty-dir:
+    specifiers:
+      astro: ^1.0.0-beta.17
+    devDependencies:
+      astro: link:../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../astro
+
   packages/integrations/deno:
     specifiers:
       astro: workspace:*