C3: replace Svelte's pages:dev with pages:preview and add optional previewScript to the c3 summary (#4850)

* C3: replace svelteKit `pages:dev` script with `pages:preview`

* C3: add new optional `previewScript` to summary

Author: dario-piotrowicz

.changeset/forty-needles-turn.md

@@ -0,0 +1,7 @@
+---
+"create-cloudflare": minor
+---
+
+introduce a new optional `previewScript` to the C3 summary
+
+such script is to be used to locally preview the application (using wrangler)

.changeset/four-teachers-push.md

@@ -0,0 +1,8 @@
+---
+"create-cloudflare": patch
+---
+
+update the svelteKit c3 scripts
+
+replace the incorrect `pages:dev` with a new `pages:preview` script
+(and use the standard `dev` script as the `devScript`)

packages/create-cloudflare/src/common.ts

@@ -286,36 +286,44 @@ export const printSummary = async (ctx: C3Context) => {
 	const dirRelativePath = relative(ctx.originalCWD, ctx.project.path);
 	const nextSteps = [
 		dirRelativePath
-			? [`Navigate to the new directory`, `cd ${dirRelativePath}`]
+			? ["Navigate to the new directory", `cd ${dirRelativePath}`]
 			: [],
 		[
-			`Run the development server`,
+			"Run the development server",
 			quoteShellArgs([npm, "run", ctx.template.devScript ?? "start"]),
 		],
+		...(ctx.template.previewScript
+			? [
+					[
+						"Preview your application",
+						quoteShellArgs([npm, "run", ctx.template.previewScript]),
+					],
+			  ]
+			: []),
 		[
-			`Deploy your application`,
+			"Deploy your application",
 			quoteShellArgs([npm, "run", ctx.template.deployScript ?? "deploy"]),
 		],
 		[
-			`Read the documentation`,
+			"Read the documentation",
 			`https://developers.cloudflare.com/${ctx.template.platform}`,
 		],
-		[`Stuck? Join us at`, `https://discord.gg/cloudflaredev`],
+		["Stuck? Join us at", "https://discord.gg/cloudflaredev"],
 	];
 
 	if (ctx.deployment.url) {
 		const msg = [
 			`${gray(shapes.leftT)}`,
 			`${bgGreen(" SUCCESS ")}`,
-			`${dim(`View your deployed application at`)}`,
+			`${dim("View your deployed application at")}`,
 			`${blue(ctx.deployment.url)}`,
 		].join(" ");
 		logRaw(msg);
 	} else {
 		const msg = [
 			`${gray(shapes.leftT)}`,
 			`${bgGreen(" APPLICATION CREATED ")}`,
-			`${dim(`Deploy your application with`)}`,
+			`${dim("Deploy your application with")}`,
 			`${blue(
 				quoteShellArgs([npm, "run", ctx.template.deployScript ?? "deploy"])
 			)}`,

packages/create-cloudflare/src/templates.ts

@@ -73,6 +73,8 @@ export type TemplateConfig = {
 	deployScript?: string;
 	/** The key of the package.json "scripts" entry for developing the project. Defaults to `pages:dev` */
 	devScript?: string;
+	/** The key of the package.json "scripts" entry for previewing the project. Defaults to undefined (there might not be such script) */
+	previewScript?: string;
 
 	/** The file path of the template. This is used internally and isn't a user facing config value.*/
 	path?: string;

packages/create-cloudflare/templates/next/c3.ts

@@ -178,6 +178,7 @@ export default {
 	platform: "pages",
 	displayName: "Next",
 	devScript: "dev",
+	previewScript: "pages:preview",
 	generate,
 	configure,
 	transformPackageJson: async () => {

packages/create-cloudflare/templates/solid/c3.ts

@@ -32,6 +32,7 @@ const config: TemplateConfig = {
 		},
 	}),
 	devScript: "dev",
+	previewScript: "pages:preview",
 	compatibilityFlags: ["nodejs_compat"],
 };
 export default config;

packages/create-cloudflare/templates/svelte/c3.ts

@@ -67,9 +67,11 @@ const config: TemplateConfig = {
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 5173 -- ${npm} run dev`,
+			"pages:preview": `${npm} run build && wrangler pages dev .svelte-kit/cloudflare`,
 			"pages:deploy": `${npm} run build && wrangler pages deploy .svelte-kit/cloudflare`,
 		},
 	}),
+	devScript: "dev",
+	previewScript: "pages:preview",
 };
 export default config;