[C3] Design tweaks (#3235)

* Tweaking copy and changing simple worker template option

* Updating copy in Angular configuration step

Author: jculvey

packages/create-cloudflare/src/cli.ts

@@ -86,7 +86,7 @@ const validateType = async (args: PagesGeneratorArgs) => {
 		question: "What type of application do you want to create?",
 		options: templateOptions,
 		renderSubmitted: (option: Option) => {
-			return `${brandColor("type")} ${dim(option.value)}`;
+			return `${brandColor("type")} ${dim(option.label)}`;
 		},
 	});
 
@@ -103,11 +103,11 @@ type TemplateConfig = {
 
 const templateMap: Record<string, TemplateConfig> = {
 	webFramework: {
-		label: "Web Framework",
+		label: "Website or web app",
 		handler: runPagesGenerator,
 	},
 	simple: {
-		label: `Simple Worker`,
+		label: `"Hello World" script`,
 		handler: runWorkersGenerator,
 	},
 	common: {

packages/create-cloudflare/src/common.ts

@@ -167,7 +167,7 @@ export const printSummary = async (ctx: PagesGeneratorContext) => {
 		const msg = [
 			`${gray(shapes.leftT)}`,
 			`${bgGreen(" APPLICATION CREATED ")}`,
-			`${dim(`Deploy your appliction with`)}`,
+			`${dim(`Deploy your application with`)}`,
 			`${blue(
 				`${npm} run ${ctx.framework?.config.deployCommand ?? "deploy"}`
 			)}`,

packages/create-cloudflare/src/frameworks/angular/index.ts

@@ -1,5 +1,6 @@
 import { cp, rm } from "node:fs/promises";
 import { resolve } from "node:path";
+import { logRaw } from "helpers/cli";
 import { brandColor, dim } from "helpers/colors";
 import {
 	detectPackageManager,
@@ -12,7 +13,7 @@ import { spinner } from "helpers/interactive";
 import { getFrameworkVersion } from "../index";
 import type { PagesGeneratorContext, FrameworkConfig } from "types";
 
-const { npx } = detectPackageManager();
+const { npx, npm } = detectPackageManager();
 
 const generate = async (ctx: PagesGeneratorContext) => {
 	const version = getFrameworkVersion(ctx);
@@ -21,17 +22,19 @@ const generate = async (ctx: PagesGeneratorContext) => {
 		ctx,
 		`${npx} @angular/cli@${version} new ${ctx.project.name} --standalone`
 	);
+
+	logRaw("");
 };
 
 const configure = async (ctx: PagesGeneratorContext) => {
 	process.chdir(ctx.project.path);
 	await runCommand(`${npx} @angular/cli@next analytics disable`, {
 		silent: true,
 	});
-	await addSSRAdaptor();
+	await addSSRAdapter();
 	await installCFWorker(ctx);
 	await updateAppCode();
-	await updateAngularJson(ctx);
+	updateAngularJson(ctx);
 };
 
 const config: FrameworkConfig = {
@@ -54,14 +57,14 @@ export default config;
 
 async function installCFWorker(ctx: PagesGeneratorContext) {
 	const s = spinner();
-	s.start(`Adding Cloudflare Pages adaptor code`);
+	s.start(`Adding Cloudflare Pages adapter code`);
 	await cp(
 		// eslint-disable-next-line no-restricted-globals
 		resolve(__dirname, "./angular/templates"),
 		resolve(ctx.project.path),
 		{ recursive: true, force: true }
 	);
-	s.stop(`${brandColor("added")} ${dim("Cloudflare Pages adaptor code`")}`);
+	s.stop(`${brandColor("copied")} ${dim("adapter code")}`);
 
 	await installPackages(
 		[
@@ -75,38 +78,38 @@ async function installCFWorker(ctx: PagesGeneratorContext) {
 		],
 		{
 			dev: true,
-			startText: "Installing adaptor dependencies",
-			doneText: "Installed",
+			startText: "Installing adapter dependencies",
+			doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
 		}
 	);
 }
 
-async function addSSRAdaptor() {
-	await runCommand(
-		`${npx} ng add @nguniversal/express-engine --skip-confirmation`,
-		{
-			silent: true,
-			startText: "Installing Angular SSR",
-			doneText: `${brandColor("installed")}`,
-		}
-	);
+async function addSSRAdapter() {
+	const cmd = `${npx} ng add @nguniversal/express-engine`;
+
+	await runCommand(`${cmd} --skip-confirmation`, {
+		silent: true,
+		startText: "Installing Angular SSR",
+		doneText: `${brandColor("installed")} ${dim(`via \`${cmd}\``)}`,
+	});
 }
 
 async function updateAppCode() {
 	const s = spinner();
 	s.start(`Updating application code`);
 
 	// Add the `provideClientHydration()` provider to the app config.
-	const appConfig = readFile(resolve("src/app/app.config.ts"));
+	const appConfigPath = "src/app/app.config.ts";
+	const appConfig = readFile(resolve(appConfigPath));
 	const newAppConfig =
 		"import { provideClientHydration } from '@angular/platform-browser';\n" +
 		appConfig.replace("providers: [", "providers: [provideClientHydration(), ");
-	await writeFile(resolve("src/app/app.config.ts"), newAppConfig);
+	writeFile(resolve(appConfigPath), newAppConfig);
 
 	// Remove the unwanted node.js server entry-point
 	await rm(resolve("server.ts"));
 
-	s.stop(`Done updating application code`);
+	s.stop(`${brandColor(`updated`)} ${dim(appConfigPath)}`);
 }
 
 function updateAngularJson(ctx: PagesGeneratorContext) {
@@ -121,5 +124,5 @@ function updateAngularJson(ctx: PagesGeneratorContext) {
 	delete architectSection["serve-ssr"];
 
 	writeFile(resolve("angular.json"), JSON.stringify(angularJson, null, 2));
-	s.stop(`Updated angular.json config`);
+	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);
 }

packages/create-cloudflare/src/helpers/command.ts

@@ -74,7 +74,7 @@ export const runFrameworkGenerator = async (
 ) => {
 	endSection(
 		`Continue with ${ctx.framework?.config.displayName}`,
-		`Creating your application via \`${cmd.trim()}\``
+		`via \`${cmd.trim()}\``
 	);
 
 	if (process.env.VITEST) {

packages/create-cloudflare/src/workers.ts

@@ -29,9 +29,9 @@ export const runWorkersGenerator = async (args: Args) => {
 	await copyFiles(ctx);
 	await copyExistingWorkerFiles(ctx);
 	await updateFiles(ctx);
-	endSection("Project created");
+	endSection("Application created");
 
-	startSection("Installing your dependencies", "Step 2 of 3");
+	startSection("Installing dependencies", "Step 2 of 3");
 	chdir(ctx.project.path);
 	await npmInstall();
 	endSection("Dependencies Installed");
@@ -47,7 +47,7 @@ async function getTemplate(ctx: Context) {
 		ctx.args.ts = await confirmInput({
 			question: "Do you want to use TypeScript?",
 			renderSubmitted: (value) =>
-				`${brandColor("typescript")} ${dim(`"${value}"`)}`,
+				`${brandColor("typescript")} ${dim(`${value ? "yes" : "no"}`)}`,
 			defaultValue: true,
 		});
 	}