C3: add vite+react templates with tests #8013

petebacondarwin · 2025-02-03T18:55:28Z

Fixes #0000

Adds experimental C3 templates for a React SPA using the new Cloudflare Vite plugin rather than Wrangler for local development.

Tests
- TODO (before merge)
- Tests included
- Tests not necessary because:
E2E Tests CI Job required? (Use "e2e" label or ask maintainer to run separately)
- I don't know
- Required
- Not required because: only adds a C3 template
Public documentation
- TODO (before merge)
- Cloudflare docs PR(s):
- Documentation not necessary because: experimental templates are not documented

changeset-bot · 2025-02-03T18:55:34Z

🦋 Changeset detected

Latest commit: fb1da7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-cloudflare	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-02-03T19:27:57Z

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-wrangler-8013

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/8013/npm-package-wrangler-8013

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-wrangler-8013 dev path/to/script.js

Additional artifacts:

cloudflare-workers-bindings-extension:

wget https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-workers-bindings-extension-8013 -O ./cloudflare-workers-bindings-extension.0.0.0-vfd6b10fe3.vsix && code --install-extension ./cloudflare-workers-bindings-extension.0.0.0-vfd6b10fe3.vsix

create-cloudflare:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-create-cloudflare-8013 --no-auto-update

@cloudflare/kv-asset-handler:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-kv-asset-handler-8013

miniflare:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-miniflare-8013

@cloudflare/pages-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-pages-shared-8013

@cloudflare/unenv-preset:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-unenv-preset-8013

@cloudflare/vite-plugin:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-vite-plugin-8013

@cloudflare/vitest-pool-workers:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-vitest-pool-workers-8013

@cloudflare/workers-editor-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-workers-editor-shared-8013

@cloudflare/workers-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-workers-shared-8013

@cloudflare/workflows-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13458024202/npm-package-cloudflare-workflows-shared-8013

Note that these links will no longer work once the GitHub Actions artifact expires.

[email protected] includes the following runtime dependencies:

Package	Constraint	Resolved
`miniflare`	workspace:*	3.20250214.0
`workerd`	1.20250214.0	1.20250214.0
`workerd --version`	1.20250214.0	2025-02-14

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

packages/create-cloudflare/e2e-tests/frameworks.test.ts

pnpm-lock.yaml

packages/create-cloudflare/e2e-tests/workers.test.ts

petebacondarwin · 2025-02-19T23:19:07Z

packages/create-cloudflare/e2e-tests/frameworks.test.ts

@@ -107,6 +107,8 @@ function getFrameworkTests(opts: {
 						input: [keys.enter],
 					},
 				],
+				unsupportedOSs: ["win32"],
+				unsupportedPms: ["yarn"],


This line fails in tests: https://github.com/vitejs/vite/blob/021443c5a11eedfb176f2c65d5fab65e9c21adfb/packages/create-vite/src/index.ts#L620

Create-vite basically tries to parse the npm_config_user_agent environment variable - expecting it to look like: yarn/1.22.22 node/20.0.0 etc - to grab the version of yarn.

Because we are running create-cloudflare via pnpx and "faking" the package manager it doesn't work. Something (I think the bit of pnpx/npx that actually creates the child process) is stripping the version so npm_config_user_agent ends up just looking like: yarn (no version).

Do you think there's any way to fix this?

petebacondarwin · 2025-02-20T09:18:32Z

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

@@ -25,7 +25,7 @@ export const detectPackageManager = () => {
 	if (process.env.TEST_PM && process.env.TEST_PM_VERSION) {
 		name = process.env.TEST_PM as PmName;
 		version = process.env.TEST_PM_VERSION;
-		process.env.npm_config_user_agent = name;
+		process.env.npm_config_user_agent = `${name}/${version}`;


This was an attempt to get yarn working with create-vite but something appears to be stripping the version between us running pnpx and create-vite being run.

petebacondarwin · 2025-02-20T09:20:35Z

packages/create-cloudflare/e2e-tests/frameworks.test.ts

+						input: [keys.enter],
+					},
+				],
+				unsupportedOSs: ["win32"],


The current create-vite template doesn't pass on Windows either, so this is not a regression. But at some point we should look into fixing that.

petebacondarwin · 2025-02-20T09:23:22Z

packages/create-cloudflare/e2e-tests/frameworks.test.ts

+				},
+				verifyPreview: {
+					route: "/",
+					previewArgs: ["--host=127.0.0.1"],


This is necessary because by default vite preview is only listening on localhost, which doesn't appear to include 127.0.0.1 (at least on some OSes).

petebacondarwin · 2025-02-20T09:24:01Z

packages/create-cloudflare/e2e-tests/frameworks.test.ts

@@ -742,6 +762,7 @@ const runCli = async (
 		NO_DEPLOY ? "--no-deploy" : "--deploy",
 		"--no-open",
 		"--no-git",
+		"--no-auto-update",


This is probably not really needed but seemed like a safe thing to do to ensure that we are actually running the instance of C3 that we expected.

CarmenPopoviciu · 2025-02-20T10:27:33Z

packages/create-cloudflare/templates-experimental/react/c3.ts

+		{
+			value: "react-swc-ts",
+			lang: "ts",
+			label: "TypeScript + SWC",


what does SWC stand for? and are we sure users will have this context?

This is how it appears in the create-vite CLI so I think it's OK.

packages/create-cloudflare/templates-experimental/react/c3.ts

CarmenPopoviciu · 2025-02-20T10:30:08Z

packages/create-cloudflare/templates-experimental/react/js/src/App.jsx

+          Name from API is: {name}
+        </button>
+        <p>
+          Edit <code>api/index.ts</code> to change the name


shouldn't this be <code>api/index.js</code>?

CarmenPopoviciu · 2025-02-20T10:33:09Z

packages/create-cloudflare/templates-experimental/react/js/wrangler.json

@@ -0,0 +1,9 @@
+{
+  "name": "<TBD>",
+	"main": "api/index.js",


indentation here is odd 🙃 . no biggie just calling it out. prolly prettier will fix, if you haven't run it already

CarmenPopoviciu · 2025-02-20T10:34:37Z

package.json

@@ -74,7 +74,8 @@
 			"@types/react-transition-group>@types/react": "^18",
 			"@cloudflare/elements>@types/react": "^18",
 			"capnpc-ts>typescript": "4.2.4",
-			"@types/node": "$@types/node"
+			"@types/node": "$@types/node",
+			"vitest>vite": "^5.0.0"


what is this > magic?

It is standard pnpm magic, which means override only vite version but only those that are dependencies of vitest.

CarmenPopoviciu

looks like smth is broken when running this pre-release C3 version with the two js templates. ts templates are working just fine 🚀

jamesopstad

Few minor suggestions. Not approving yet because the JS templates fail with this error:

ERROR TypeError: Cannot read properties of undefined (reading 'value')

jamesopstad · 2025-02-20T11:02:04Z

packages/create-cloudflare/e2e-tests/frameworks.test.ts

@@ -107,6 +107,8 @@ function getFrameworkTests(opts: {
 						input: [keys.enter],
 					},
 				],
+				unsupportedOSs: ["win32"],
+				unsupportedPms: ["yarn"],


Do you think there's any way to fix this?

jamesopstad · 2025-02-20T11:09:40Z

packages/create-cloudflare/e2e-tests/frameworks.test.ts

 *
- * This is rather than having a wrangler.toml in the e2e test's fixture folder,
+ * This is rather than having a wrangler configuration file in the e2e test's fixture folder,
 * which overwrites any that comes from the framework's template.
 */
 const addTestVarsToWranglerToml = async (projectPath: string) => {


Maybe not for this PR, but the name of this variable and all the references to wrangler.toml should be updated to be format agnostic.

packages/create-cloudflare/templates-experimental/react/c3.ts

jamesopstad · 2025-02-20T11:21:56Z

packages/create-cloudflare/templates-experimental/react/c3.ts

+		{
+			value: "react-swc-ts",
+			lang: "ts",
+			label: "TypeScript + SWC",


This is how it appears in the create-vite CLI so I think it's OK.

jamesopstad · 2025-02-20T11:27:54Z

packages/create-cloudflare/templates-experimental/react/js/src/App.jsx

@@ -0,0 +1,54 @@
+import { useState } from "react";


I think if we're only updating particular files in the template then we need to match the formatting of the Vite template. The prettier config should be:

{ "semi": false, "singleQuote": true, }

https://github.com/vitejs/vite/blob/main/.prettierrc.json

jamesopstad · 2025-02-20T11:30:05Z

packages/create-cloudflare/templates-experimental/react/c3.ts

+		tsconfig.references.push({ path: "./tsconfig.worker.json" });
+	}
+	writeJSON("tsconfig.json", tsconfig);
+	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);


Suggested change

s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);

s.stop(`${brandColor(`updated`)} ${dim(`\`tsconfig.json\``)}`);

jamesopstad · 2025-02-20T11:41:12Z

packages/create-cloudflare/templates-experimental/react/c3.ts

+	await installPackages(["@cloudflare/vite-plugin"], {
+		dev: true,
+		startText: "Installing the Cloudflare Vite plugin",
+		doneText: `${brandColor(`updated`)} ${dim("wrangler@latest")}`,


Suggested change

doneText: `${brandColor(`updated`)} ${dim("wrangler@latest")}`,

doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`,

jamesopstad · 2025-02-20T11:45:32Z

packages/create-cloudflare/templates-experimental/react/c3.ts

+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && vite preview`,


Why deviate from the Vite template here?

It seems like you would need the build before running the preview, right?

jamesopstad · 2025-02-20T11:53:05Z

packages/create-cloudflare/templates-experimental/react/c3.ts

+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		variant?.value,


Why is this possibly undefined?

turns out it is not

This makes it possible to preserve comments in JSON(C) files that contain them.

…tence

The create-vite app wants to process the npm_config_user_agent to get the version of yarn, but for some reason this gets stripped by the fact we are faking it and actually running pnpx.

petebacondarwin force-pushed the pbd/add-vite-c3-templates branch 2 times, most recently from 6e2abcc to 25eed83 Compare February 18, 2025 16:27

petebacondarwin changed the title ~~Pbd/add vite c3 templates~~ C3: add vite+react templates with tests Feb 18, 2025

workers-devprod added the c3-e2e label Feb 18, 2025

petebacondarwin marked this pull request as ready for review February 18, 2025 16:31

petebacondarwin requested review from a team as code owners February 18, 2025 16:31

CarmenPopoviciu reviewed Feb 19, 2025

View reviewed changes

packages/create-cloudflare/e2e-tests/frameworks.test.ts Outdated Show resolved Hide resolved

penalosa reviewed Feb 19, 2025

View reviewed changes

pnpm-lock.yaml Outdated Show resolved Hide resolved

CarmenPopoviciu reviewed Feb 19, 2025

View reviewed changes

packages/create-cloudflare/e2e-tests/workers.test.ts Outdated Show resolved Hide resolved

petebacondarwin force-pushed the pbd/add-vite-c3-templates branch from 7c911d7 to fef0bbc Compare February 19, 2025 19:18

petebacondarwin requested review from CarmenPopoviciu and penalosa February 19, 2025 19:32

petebacondarwin force-pushed the pbd/add-vite-c3-templates branch from 2967583 to 600cadf Compare February 19, 2025 20:44

petebacondarwin commented Feb 19, 2025

View reviewed changes

petebacondarwin commented Feb 20, 2025

View reviewed changes

CarmenPopoviciu reviewed Feb 20, 2025

View reviewed changes

packages/create-cloudflare/templates-experimental/react/c3.ts Show resolved Hide resolved

CarmenPopoviciu reviewed Feb 20, 2025

View reviewed changes

CarmenPopoviciu requested changes Feb 20, 2025

View reviewed changes

jamesopstad reviewed Feb 20, 2025

View reviewed changes

petebacondarwin added 2 commits February 21, 2025 13:38

chore: C3 - use comment-json to parse and stringify JSON files

99b8f85

This makes it possible to preserve comments in JSON(C) files that contain them.

test: C3 - tiny refactoring of workers tests for wrangler config exis…

eaa7a66

…tence

petebacondarwin added 10 commits February 21, 2025 13:38

feat: C3 - add experimental Vite+workerd on Workers+Assets template

33d595f

test

8ccc86a

add changeset

f08cad2

fixup! test

975d5dc

avoiding the grammar police

d5359d8

fix vitest warnings

2126dda

tighten up c3 turbo inputs

0563609

improve user agent spoofing

f1f27ab

skip react on yarn

04eb517

The create-vite app wants to process the npm_config_user_agent to get the version of yarn, but for some reason this gets stripped by the fact we are faking it and actually running pnpx.

further fixups

fb1da7a

petebacondarwin force-pushed the pbd/add-vite-c3-templates branch from 82250e4 to fb1da7a Compare February 21, 2025 13:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

C3: add vite+react templates with tests #8013

C3: add vite+react templates with tests #8013

petebacondarwin commented Feb 3, 2025 •

edited

Loading

changeset-bot bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

petebacondarwin Feb 19, 2025

petebacondarwin Feb 20, 2025

jamesopstad Feb 20, 2025

petebacondarwin Feb 20, 2025

petebacondarwin Feb 20, 2025

petebacondarwin Feb 20, 2025

petebacondarwin Feb 20, 2025

CarmenPopoviciu Feb 20, 2025

jamesopstad Feb 20, 2025

CarmenPopoviciu Feb 20, 2025

CarmenPopoviciu Feb 20, 2025

CarmenPopoviciu Feb 20, 2025

petebacondarwin Feb 20, 2025

CarmenPopoviciu left a comment

jamesopstad left a comment •

edited

Loading

jamesopstad Feb 20, 2025

jamesopstad Feb 20, 2025

jamesopstad Feb 20, 2025

jamesopstad Feb 20, 2025

jamesopstad Feb 20, 2025

jamesopstad Feb 20, 2025

jamesopstad Feb 20, 2025

petebacondarwin Feb 20, 2025

jamesopstad Feb 20, 2025

petebacondarwin Feb 20, 2025

	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);
	s.stop(`${brandColor(`updated`)} ${dim(`\`tsconfig.json\``)}`);

	doneText: `${brandColor(`updated`)} ${dim("wrangler@latest")}`,
	doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`,

C3: add vite+react templates with tests #8013

Are you sure you want to change the base?

C3: add vite+react templates with tests #8013

Conversation

petebacondarwin commented Feb 3, 2025 • edited Loading

changeset-bot bot commented Feb 3, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CarmenPopoviciu left a comment

Choose a reason for hiding this comment

jamesopstad left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petebacondarwin commented Feb 3, 2025 •

edited

Loading

changeset-bot bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

jamesopstad left a comment •

edited

Loading