create-cloudflare 0.0.0-d1cdcff3 → 0.0.0-d1d5b5313

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/README.md +1 -1
  2. package/dist/cli.js +66639 -63782
  3. package/dist/tsconfig.tsbuildinfo +1 -0
  4. package/package.json +39 -30
  5. package/templates/analog/c3.ts +135 -0
  6. package/templates/analog/snippets/devBindingsModule.ts +7 -0
  7. package/templates/analog/templates/env.d.ts +13 -0
  8. package/templates/analog/templates/src/dev-bindings.ts +18 -0
  9. package/templates/analog/templates/worker-configuration.d.ts +4 -0
  10. package/templates/analog/templates/wrangler.jsonc +5 -0
  11. package/templates/angular/c3.ts +62 -29
  12. package/templates/angular/templates/src/server.ts +15 -0
  13. package/templates/angular/templates/tools/copy-files.mjs +8 -2
  14. package/templates/astro/c3.ts +67 -20
  15. package/templates/astro/templates/js/wrangler.jsonc +8 -0
  16. package/templates/astro/templates/ts/src/env.d.ts +5 -0
  17. package/templates/astro/templates/ts/worker-configuration.d.ts +4 -0
  18. package/templates/astro/templates/ts/wrangler.jsonc +8 -0
  19. package/templates/common/c3.ts +10 -6
  20. package/templates/common/js/.editorconfig +0 -1
  21. package/templates/common/js/package.json +1 -1
  22. package/templates/common/js/wrangler.jsonc +8 -0
  23. package/templates/common/ts/.editorconfig +0 -1
  24. package/templates/common/ts/package.json +4 -3
  25. package/templates/common/ts/src/ab-test.ts +2 -2
  26. package/templates/common/ts/src/index.ts +5 -2
  27. package/templates/common/ts/src/proxy.ts +2 -2
  28. package/templates/common/ts/src/redirect.ts +2 -2
  29. package/templates/common/ts/tsconfig.json +37 -95
  30. package/templates/common/ts/worker-configuration.d.ts +2 -14
  31. package/templates/common/ts/wrangler.jsonc +8 -0
  32. package/templates/docusaurus/c3.ts +5 -23
  33. package/templates/docusaurus/pages/c3.ts +30 -0
  34. package/templates/docusaurus/workers/c3.ts +33 -0
  35. package/templates/docusaurus/workers/templates/wrangler.jsonc +10 -0
  36. package/templates/gatsby/c3.ts +8 -5
  37. package/templates/hello-world/c3.ts +29 -8
  38. package/templates/hello-world/js/.editorconfig +0 -1
  39. package/templates/hello-world/js/package.json +5 -2
  40. package/templates/hello-world/js/test/index.spec.js +20 -0
  41. package/templates/hello-world/js/vitest.config.js +11 -0
  42. package/templates/hello-world/js/wrangler.jsonc +8 -0
  43. package/templates/hello-world/py/.python-version +1 -0
  44. package/templates/hello-world/py/README.md +23 -0
  45. package/templates/hello-world/py/__dot__gitignore +68 -0
  46. package/templates/hello-world/py/package.json +13 -0
  47. package/templates/hello-world/py/pyproject.toml +9 -0
  48. package/templates/hello-world/py/src/entry.py +4 -0
  49. package/templates/hello-world/py/uv.lock +22 -0
  50. package/templates/hello-world/py/wrangler.jsonc +9 -0
  51. package/templates/hello-world/ts/.editorconfig +0 -1
  52. package/templates/hello-world/ts/package.json +7 -3
  53. package/templates/hello-world/ts/src/index.ts +5 -19
  54. package/templates/hello-world/ts/test/index.spec.ts +25 -0
  55. package/templates/hello-world/ts/test/tsconfig.json +8 -0
  56. package/templates/hello-world/ts/tsconfig.json +39 -96
  57. package/templates/hello-world/ts/vitest.config.mts +11 -0
  58. package/templates/hello-world/ts/worker-configuration.d.ts +4 -0
  59. package/templates/hello-world/ts/wrangler.jsonc +8 -0
  60. package/templates/hello-world-durable-object/c3.ts +10 -7
  61. package/templates/hello-world-durable-object/js/.editorconfig +0 -1
  62. package/templates/hello-world-durable-object/js/package.json +1 -1
  63. package/templates/hello-world-durable-object/js/src/index.js +21 -17
  64. package/templates/hello-world-durable-object/js/wrangler.jsonc +24 -0
  65. package/templates/hello-world-durable-object/ts/.editorconfig +0 -1
  66. package/templates/hello-world-durable-object/ts/package.json +4 -4
  67. package/templates/hello-world-durable-object/ts/src/index.ts +26 -39
  68. package/templates/hello-world-durable-object/ts/tsconfig.json +36 -95
  69. package/templates/hello-world-durable-object/ts/worker-configuration.d.ts +5 -0
  70. package/templates/hello-world-durable-object/ts/wrangler.jsonc +24 -0
  71. package/templates/hono/c3.ts +48 -3
  72. package/templates/hono/snippets/appDeclaration.ts +1 -0
  73. package/templates/hono/templates/worker-configuration.d.ts +4 -0
  74. package/templates/hono/templates/wrangler.jsonc +8 -0
  75. package/templates/next/README.md +67 -0
  76. package/templates/next/app/js/app/api/hello/route.js +21 -0
  77. package/templates/next/app/js/app/not-found.js +58 -0
  78. package/templates/next/app/ts/app/api/hello/route.ts +21 -0
  79. package/templates/next/app/ts/app/not-found.tsx +58 -0
  80. package/templates/next/c3.ts +96 -84
  81. package/templates/next/env.d.ts +5 -0
  82. package/templates/next/pages/js/pages/api/hello.js +23 -0
  83. package/templates/next/pages/ts/pages/api/hello.ts +24 -0
  84. package/templates/next/wrangler.jsonc +8 -0
  85. package/templates/nuxt/c3.ts +94 -19
  86. package/templates/nuxt/templates/env.d.ts +14 -0
  87. package/templates/nuxt/templates/worker-configuration.d.ts +4 -0
  88. package/templates/nuxt/templates/wrangler.jsonc +8 -0
  89. package/templates/openapi/c3.ts +1 -1
  90. package/templates/openapi/ts/README.md +3 -3
  91. package/templates/openapi/ts/package.json +7 -4
  92. package/templates/openapi/ts/src/endpoints/taskCreate.ts +26 -16
  93. package/templates/openapi/ts/src/endpoints/taskDelete.ts +20 -19
  94. package/templates/openapi/ts/src/endpoints/taskFetch.ts +30 -23
  95. package/templates/openapi/ts/src/endpoints/taskList.ts +27 -24
  96. package/templates/openapi/ts/src/index.ts +14 -20
  97. package/templates/openapi/ts/src/types.ts +9 -8
  98. package/templates/openapi/ts/worker-configuration.d.ts +4 -0
  99. package/templates/openapi/ts/wrangler.jsonc +8 -0
  100. package/templates/pre-existing/c3.ts +39 -22
  101. package/templates/pre-existing/js/.editorconfig +0 -1
  102. package/templates/pre-existing/js/package.json +1 -1
  103. package/templates/queues/c3.ts +9 -6
  104. package/templates/queues/js/.editorconfig +0 -1
  105. package/templates/queues/js/package.json +1 -1
  106. package/templates/queues/js/wrangler.jsonc +21 -0
  107. package/templates/queues/ts/.editorconfig +0 -1
  108. package/templates/queues/ts/package.json +4 -3
  109. package/templates/queues/ts/src/index.ts +6 -8
  110. package/templates/queues/ts/tsconfig.json +36 -95
  111. package/templates/queues/ts/worker-configuration.d.ts +5 -0
  112. package/templates/queues/ts/wrangler.jsonc +21 -0
  113. package/templates/qwik/c3.ts +121 -9
  114. package/templates/qwik/snippets/getPlatformProxy.ts +6 -0
  115. package/templates/qwik/templates/worker-configuration.d.ts +4 -0
  116. package/templates/qwik/templates/wrangler.jsonc +8 -0
  117. package/templates/react/c3.ts +38 -6
  118. package/templates/remix/c3.ts +41 -7
  119. package/templates/remix/templates/worker-configuration.d.ts +4 -0
  120. package/templates/remix/templates/wrangler.jsonc +5 -0
  121. package/templates/scheduled/c3.ts +9 -6
  122. package/templates/scheduled/js/.editorconfig +0 -1
  123. package/templates/scheduled/js/package.json +3 -3
  124. package/templates/scheduled/js/src/index.js +9 -2
  125. package/templates/scheduled/js/wrangler.jsonc +13 -0
  126. package/templates/scheduled/ts/.editorconfig +0 -1
  127. package/templates/scheduled/ts/package.json +5 -4
  128. package/templates/scheduled/ts/src/index.ts +8 -25
  129. package/templates/scheduled/ts/tsconfig.json +36 -95
  130. package/templates/scheduled/ts/worker-configuration.d.ts +4 -0
  131. package/templates/scheduled/ts/wrangler.jsonc +13 -0
  132. package/templates/solid/c3.ts +57 -18
  133. package/templates/solid/templates/wrangler.jsonc +8 -0
  134. package/templates/svelte/c3.ts +112 -29
  135. package/templates/svelte/templates/wrangler.jsonc +5 -0
  136. package/templates/vue/c3.ts +8 -6
  137. package/templates-experimental/angular/c3.ts +130 -0
  138. package/templates-experimental/angular/templates/src/server.ts +15 -0
  139. package/templates-experimental/angular/templates/wrangler.jsonc +12 -0
  140. package/templates-experimental/astro/c3.ts +98 -0
  141. package/templates-experimental/astro/templates/js/public/.assetsignore +4 -0
  142. package/templates-experimental/astro/templates/js/wrangler.jsonc +15 -0
  143. package/templates-experimental/astro/templates/ts/public/.assetsignore +4 -0
  144. package/templates-experimental/astro/templates/ts/src/env.d.ts +5 -0
  145. package/templates-experimental/astro/templates/ts/worker-configuration.d.ts +4 -0
  146. package/templates-experimental/astro/templates/ts/wrangler.jsonc +15 -0
  147. package/templates-experimental/gatsby/c3.ts +53 -0
  148. package/templates-experimental/gatsby/templates/wrangler.jsonc +10 -0
  149. package/templates-experimental/hello-world-assets-only/c3.ts +15 -0
  150. package/templates-experimental/hello-world-assets-only/templates/package.json +13 -0
  151. package/templates-experimental/hello-world-assets-only/templates/public/index.html +11 -0
  152. package/templates-experimental/hello-world-assets-only/templates/wrangler.jsonc +10 -0
  153. package/templates-experimental/hello-world-durable-object-with-assets/c3.ts +23 -0
  154. package/templates-experimental/hello-world-durable-object-with-assets/js/.editorconfig +12 -0
  155. package/templates-experimental/hello-world-durable-object-with-assets/js/.prettierrc +6 -0
  156. package/{templates/chatgptPlugin/ts → templates-experimental/hello-world-durable-object-with-assets/js}/__dot__gitignore +1 -0
  157. package/templates-experimental/hello-world-durable-object-with-assets/js/package.json +13 -0
  158. package/templates-experimental/hello-world-durable-object-with-assets/js/public/index.html +19 -0
  159. package/templates-experimental/hello-world-durable-object-with-assets/js/src/index.js +69 -0
  160. package/templates-experimental/hello-world-durable-object-with-assets/js/wrangler.jsonc +28 -0
  161. package/templates-experimental/hello-world-durable-object-with-assets/ts/.editorconfig +12 -0
  162. package/templates-experimental/hello-world-durable-object-with-assets/ts/.prettierrc +6 -0
  163. package/templates-experimental/hello-world-durable-object-with-assets/ts/__dot__gitignore +172 -0
  164. package/templates-experimental/hello-world-durable-object-with-assets/ts/package.json +15 -0
  165. package/templates-experimental/hello-world-durable-object-with-assets/ts/public/index.html +19 -0
  166. package/templates-experimental/hello-world-durable-object-with-assets/ts/src/index.ts +66 -0
  167. package/templates-experimental/hello-world-durable-object-with-assets/ts/tsconfig.json +42 -0
  168. package/templates-experimental/hello-world-durable-object-with-assets/ts/worker-configuration.d.ts +5 -0
  169. package/templates-experimental/hello-world-durable-object-with-assets/ts/wrangler.jsonc +28 -0
  170. package/templates-experimental/hello-world-with-assets/c3.ts +22 -0
  171. package/templates-experimental/hello-world-with-assets/js/.editorconfig +12 -0
  172. package/templates-experimental/hello-world-with-assets/js/.prettierrc +6 -0
  173. package/templates-experimental/hello-world-with-assets/js/__dot__gitignore +172 -0
  174. package/templates-experimental/hello-world-with-assets/js/package.json +16 -0
  175. package/templates-experimental/hello-world-with-assets/js/public/index.html +31 -0
  176. package/templates-experimental/hello-world-with-assets/js/src/index.js +23 -0
  177. package/templates-experimental/hello-world-with-assets/js/test/index.spec.js +41 -0
  178. package/templates-experimental/hello-world-with-assets/js/vitest.config.js +11 -0
  179. package/templates-experimental/hello-world-with-assets/js/wrangler.jsonc +15 -0
  180. package/templates-experimental/hello-world-with-assets/py/__dot__gitignore +68 -0
  181. package/templates-experimental/hello-world-with-assets/py/package.json +13 -0
  182. package/templates-experimental/hello-world-with-assets/py/public/index.html +31 -0
  183. package/templates-experimental/hello-world-with-assets/py/src/entry.py +9 -0
  184. package/templates-experimental/hello-world-with-assets/py/wrangler.jsonc +15 -0
  185. package/templates-experimental/hello-world-with-assets/ts/.editorconfig +12 -0
  186. package/templates-experimental/hello-world-with-assets/ts/.prettierrc +6 -0
  187. package/templates-experimental/hello-world-with-assets/ts/__dot__gitignore +172 -0
  188. package/templates-experimental/hello-world-with-assets/ts/package.json +18 -0
  189. package/templates-experimental/hello-world-with-assets/ts/public/index.html +31 -0
  190. package/templates-experimental/hello-world-with-assets/ts/src/index.ts +26 -0
  191. package/templates-experimental/hello-world-with-assets/ts/test/index.spec.ts +41 -0
  192. package/templates-experimental/hello-world-with-assets/ts/test/tsconfig.json +8 -0
  193. package/templates-experimental/hello-world-with-assets/ts/tsconfig.json +44 -0
  194. package/templates-experimental/hello-world-with-assets/ts/vitest.config.mts +11 -0
  195. package/templates-experimental/hello-world-with-assets/ts/worker-configuration.d.ts +4 -0
  196. package/templates-experimental/hello-world-with-assets/ts/wrangler.jsonc +15 -0
  197. package/templates-experimental/hono/c3.ts +44 -0
  198. package/templates-experimental/hono/templates/public/index.html +19 -0
  199. package/templates-experimental/hono/templates/src/index.ts +9 -0
  200. package/templates-experimental/hono/templates/worker-configuration.d.ts +4 -0
  201. package/templates-experimental/hono/templates/wrangler.jsonc +9 -0
  202. package/templates-experimental/next/c3.ts +75 -0
  203. package/templates-experimental/next/templates/.dev.vars +2 -0
  204. package/templates-experimental/next/templates/__dot__gitignore +39 -0
  205. package/templates-experimental/next/templates/cloudflare-env.d.ts +5 -0
  206. package/templates-experimental/next/templates/open-next.config.ts +28 -0
  207. package/templates-experimental/next/templates/wrangler.jsonc +13 -0
  208. package/templates-experimental/nuxt/c3.ts +135 -0
  209. package/templates-experimental/nuxt/templates/env.d.ts +14 -0
  210. package/templates-experimental/nuxt/templates/worker-configuration.d.ts +4 -0
  211. package/templates-experimental/nuxt/templates/wrangler.jsonc +12 -0
  212. package/templates-experimental/qwik/c3.ts +154 -0
  213. package/templates-experimental/qwik/snippets/getPlatformProxy.ts +6 -0
  214. package/templates-experimental/qwik/templates/public/.assetsignore +4 -0
  215. package/templates-experimental/qwik/templates/worker-configuration.d.ts +4 -0
  216. package/templates-experimental/qwik/templates/wrangler.jsonc +15 -0
  217. package/templates-experimental/react/c3.ts +182 -0
  218. package/templates-experimental/react/js/api/index.js +13 -0
  219. package/templates-experimental/react/js/src/App.jsx +58 -0
  220. package/templates-experimental/react/js/src/assets/Cloudflare_Logo.svg +26 -0
  221. package/templates-experimental/react/js/wrangler.json +9 -0
  222. package/templates-experimental/react/ts/api/index.ts +17 -0
  223. package/templates-experimental/react/ts/src/App.tsx +58 -0
  224. package/templates-experimental/react/ts/src/assets/Cloudflare_Logo.svg +26 -0
  225. package/templates-experimental/react/ts/tsconfig.worker.json +8 -0
  226. package/templates-experimental/react/ts/wrangler.json +9 -0
  227. package/templates-experimental/remix/c3.ts +52 -0
  228. package/templates-experimental/remix/templates/public/.assetsignore +0 -0
  229. package/templates-experimental/remix/templates/worker-configuration.d.ts +4 -0
  230. package/templates-experimental/remix/templates/wrangler.toml +11 -0
  231. package/templates-experimental/solid/c3.ts +94 -0
  232. package/templates-experimental/solid/templates/wrangler.jsonc +15 -0
  233. package/templates-experimental/svelte/c3.ts +129 -0
  234. package/templates-experimental/svelte/templates/static/.assetsignore +4 -0
  235. package/templates-experimental/svelte/templates/wrangler.jsonc +12 -0
  236. package/templates-experimental/vue/c3.ts +33 -0
  237. package/templates-experimental/vue/templates/wrangler.jsonc +10 -0
  238. package/templates/angular/templates/server.ts +0 -34
  239. package/templates/angular/templates/tools/alter-polyfills.mjs +0 -27
  240. package/templates/angular/templates/tools/paths.mjs +0 -9
  241. package/templates/chatgptPlugin/c3.ts +0 -10
  242. package/templates/chatgptPlugin/ts/.assets/example.png +0 -0
  243. package/templates/chatgptPlugin/ts/README.md +0 -25
  244. package/templates/chatgptPlugin/ts/package.json +0 -16
  245. package/templates/chatgptPlugin/ts/src/index.ts +0 -33
  246. package/templates/chatgptPlugin/ts/src/search.ts +0 -59
  247. package/templates/chatgptPlugin/ts/wrangler.toml +0 -3
  248. package/templates/common/js/wrangler.toml +0 -51
  249. package/templates/common/ts/wrangler.toml +0 -51
  250. package/templates/hello-world/js/wrangler.toml +0 -51
  251. package/templates/hello-world/ts/wrangler.toml +0 -51
  252. package/templates/hello-world-durable-object/js/wrangler.toml +0 -51
  253. package/templates/hello-world-durable-object/ts/wrangler.toml +0 -51
  254. package/templates/next/templates.ts +0 -281
  255. package/templates/openapi/ts/wrangler.toml +0 -3
  256. package/templates/pre-existing/js/wrangler.toml +0 -3
  257. package/templates/queues/js/wrangler.toml +0 -19
  258. package/templates/queues/ts/wrangler.toml +0 -19
  259. package/templates/scheduled/js/wrangler.toml +0 -9
  260. package/templates/scheduled/ts/wrangler.toml +0 -9
  261. package/templates/solid/js/vite.config.js +0 -7
  262. package/templates/solid/ts/vite.config.ts +0 -7
  263. package/templates/svelte/templates.ts +0 -13
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "<TBD>",
3
+ "main": "src/index.ts",
4
+ "compatibility_date": "<TBD>",
5
+ "migrations": [
6
+ {
7
+ "new_classes": [
8
+ "MyDurableObject"
9
+ ],
10
+ "tag": "v1"
11
+ }
12
+ ],
13
+ "durable_objects": {
14
+ "bindings": [
15
+ {
16
+ "class_name": "MyDurableObject",
17
+ "name": "MY_DURABLE_OBJECT"
18
+ }
19
+ ]
20
+ },
21
+ "observability": {
22
+ "enabled": true
23
+ }
24
+ }
@@ -1,25 +1,70 @@
1
1
  import { logRaw } from "@cloudflare/cli";
2
- import { runFrameworkGenerator } from "helpers/command";
2
+ import { brandColor, dim } from "@cloudflare/cli/colors";
3
+ import { spinner } from "@cloudflare/cli/interactive";
4
+ import { runFrameworkGenerator } from "frameworks/index";
5
+ import { loadTemplateSnippets, transformFile } from "helpers/codemod";
6
+ import { detectPackageManager } from "helpers/packageManagers";
3
7
  import type { TemplateConfig } from "../../src/templates";
8
+ import type * as recast from "recast";
4
9
  import type { C3Context } from "types";
5
10
 
6
11
  const generate = async (ctx: C3Context) => {
12
+ const { name: pm } = detectPackageManager();
13
+
7
14
  await runFrameworkGenerator(ctx, [
8
15
  ctx.project.name,
9
16
  "--template",
10
17
  "cloudflare-workers",
18
+ "--install",
19
+ "--pm",
20
+ pm,
11
21
  ]);
12
22
 
13
23
  logRaw(""); // newline
14
24
  };
15
25
 
26
+ const configure = async (ctx: C3Context) => {
27
+ const indexFile = "src/index.ts";
28
+
29
+ const s = spinner();
30
+ s.start(`Updating \`${indexFile}\``);
31
+
32
+ const snippets = loadTemplateSnippets(ctx);
33
+
34
+ transformFile(indexFile, {
35
+ visitVariableDeclarator(n) {
36
+ if (n.node.id.type === "Identifier" && n.node.id.name === "app") {
37
+ n.node.init = snippets
38
+ .appDeclarationTs[0] as recast.types.namedTypes.NewExpression;
39
+
40
+ return false;
41
+ }
42
+ },
43
+ });
44
+
45
+ s.stop(`${brandColor("updated")} \`${dim(indexFile)}\``);
46
+ };
47
+
16
48
  const config: TemplateConfig = {
17
49
  configVersion: 1,
18
50
  id: "hono",
51
+ frameworkCli: "create-hono",
19
52
  displayName: "Hono",
53
+ copyFiles: {
54
+ path: "./templates",
55
+ },
20
56
  platform: "workers",
21
57
  generate,
22
- devCommand: ["dev"],
23
- deployCommand: ["deploy"],
58
+ configure,
59
+ transformPackageJson: async () => ({
60
+ scripts: {
61
+ dev: "wrangler dev",
62
+ deploy: "wrangler deploy --minify",
63
+ "cf-typegen": "wrangler types --env-interface CloudflareBindings",
64
+ },
65
+ }),
66
+ devScript: "dev",
67
+ deployScript: "deploy",
68
+ previewScript: "dev",
24
69
  };
25
70
  export default config;
@@ -0,0 +1 @@
1
+ new Hono<{ Bindings: CloudflareBindings }>()
@@ -0,0 +1,4 @@
1
+ // Generated by Wrangler
2
+ // After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
3
+ interface CloudflareBindings {
4
+ }
@@ -0,0 +1,8 @@
1
+ {
2
+ "name": "<TBD>",
3
+ "main": "src/index.ts",
4
+ "compatibility_date": "<TBD>",
5
+ "observability": {
6
+ "enabled": true
7
+ }
8
+ }
@@ -0,0 +1,67 @@
1
+ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
2
+
3
+ ## Getting Started
4
+
5
+ First, run the development server:
6
+
7
+ ```bash
8
+ npm run dev
9
+ # or
10
+ yarn dev
11
+ # or
12
+ pnpm dev
13
+ # or
14
+ bun dev
15
+ ```
16
+
17
+ Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18
+
19
+ ## Cloudflare integration
20
+
21
+ Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
22
+ - `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
23
+ - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
24
+ - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
25
+
26
+ > __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
27
+
28
+ ### Bindings
29
+
30
+ Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
31
+
32
+ You can use bindings during development, when previewing locally your application and of course in the deployed application:
33
+
34
+ - To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
35
+
36
+ - To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
37
+
38
+ - To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
39
+
40
+ #### KV Example
41
+
42
+ `c3` has added for you an example showing how you can use a KV binding.
43
+
44
+ In order to enable the example:
45
+ - Search for javascript/typescript lines containing the following comment:
46
+ ```ts
47
+ // KV Example:
48
+ ```
49
+ and uncomment the commented lines below it (also uncomment the relevant imports).
50
+ - In the `wrangler.jsonc` file add the following configuration line:
51
+ ```
52
+ "kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
53
+ ```
54
+ - If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
55
+ ```bash
56
+ npm run cf-typegen
57
+ # or
58
+ yarn cf-typegen
59
+ # or
60
+ pnpm cf-typegen
61
+ # or
62
+ bun cf-typegen
63
+ ```
64
+
65
+ After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
66
+
67
+ Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.
@@ -0,0 +1,21 @@
1
+ // import { getRequestContext } from '@cloudflare/next-on-pages'
2
+
3
+ export const runtime = 'edge'
4
+
5
+ export async function GET() {
6
+ const responseText = 'Hello World'
7
+
8
+ // In the edge runtime you can use Bindings that are available in your application
9
+ // (for more details see:
10
+ // - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
11
+ // - https://developers.cloudflare.com/pages/functions/bindings/
12
+ // )
13
+ //
14
+ // KV Example:
15
+ // const myKv = getRequestContext().env.MY_KV_NAMESPACE
16
+ // await myKv.put('suffix', ' from a KV store!')
17
+ // const suffix = await myKv.get('suffix')
18
+ // return new Response(responseText + suffix)
19
+
20
+ return new Response(responseText)
21
+ }
@@ -0,0 +1,58 @@
1
+ export const runtime = "edge";
2
+
3
+ export default function NotFound() {
4
+ return (
5
+ <>
6
+ <title>404: This page could not be found.</title>
7
+ <div style={styles.error}>
8
+ <div>
9
+ <style
10
+ dangerouslySetInnerHTML={{
11
+ __html: `body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}`,
12
+ }}
13
+ />
14
+ <h1 className="next-error-h1" style={styles.h1}>
15
+ 404
16
+ </h1>
17
+ <div style={styles.desc}>
18
+ <h2 style={styles.h2}>This page could not be found.</h2>
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </>
23
+ );
24
+ }
25
+
26
+ const styles = {
27
+ error: {
28
+ fontFamily:
29
+ 'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
30
+ height: "100vh",
31
+ textAlign: "center",
32
+ display: "flex",
33
+ flexDirection: "column",
34
+ alignItems: "center",
35
+ justifyContent: "center",
36
+ },
37
+
38
+ desc: {
39
+ display: "inline-block",
40
+ },
41
+
42
+ h1: {
43
+ display: "inline-block",
44
+ margin: "0 20px 0 0",
45
+ padding: "0 23px 0 0",
46
+ fontSize: 24,
47
+ fontWeight: 500,
48
+ verticalAlign: "top",
49
+ lineHeight: "49px",
50
+ },
51
+
52
+ h2: {
53
+ fontSize: 14,
54
+ fontWeight: 400,
55
+ lineHeight: "49px",
56
+ margin: 0,
57
+ },
58
+ };
@@ -0,0 +1,21 @@
1
+ // import { getRequestContext } from '@cloudflare/next-on-pages'
2
+
3
+ export const runtime = 'edge'
4
+
5
+ export async function GET() {
6
+ const responseText = 'Hello World'
7
+
8
+ // In the edge runtime you can use Bindings that are available in your application
9
+ // (for more details see:
10
+ // - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
11
+ // - https://developers.cloudflare.com/pages/functions/bindings/
12
+ // )
13
+ //
14
+ // KV Example:
15
+ // const myKv = getRequestContext().env.MY_KV_NAMESPACE
16
+ // await myKv.put('suffix', ' from a KV store!')
17
+ // const suffix = await myKv.get('suffix')
18
+ // return new Response(responseText + suffix)
19
+
20
+ return new Response(responseText)
21
+ }
@@ -0,0 +1,58 @@
1
+ export const runtime = "edge";
2
+
3
+ export default function NotFound() {
4
+ return (
5
+ <>
6
+ <title>404: This page could not be found.</title>
7
+ <div style={styles.error}>
8
+ <div>
9
+ <style
10
+ dangerouslySetInnerHTML={{
11
+ __html: `body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}`,
12
+ }}
13
+ />
14
+ <h1 className="next-error-h1" style={styles.h1}>
15
+ 404
16
+ </h1>
17
+ <div style={styles.desc}>
18
+ <h2 style={styles.h2}>This page could not be found.</h2>
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </>
23
+ );
24
+ }
25
+
26
+ const styles = {
27
+ error: {
28
+ fontFamily:
29
+ 'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
30
+ height: "100vh",
31
+ textAlign: "center",
32
+ display: "flex",
33
+ flexDirection: "column",
34
+ alignItems: "center",
35
+ justifyContent: "center",
36
+ },
37
+
38
+ desc: {
39
+ display: "inline-block",
40
+ },
41
+
42
+ h1: {
43
+ display: "inline-block",
44
+ margin: "0 20px 0 0",
45
+ padding: "0 23px 0 0",
46
+ fontSize: 24,
47
+ fontWeight: 500,
48
+ verticalAlign: "top",
49
+ lineHeight: "49px",
50
+ },
51
+
52
+ h2: {
53
+ fontSize: 14,
54
+ fontWeight: 400,
55
+ lineHeight: "49px",
56
+ margin: 0,
57
+ },
58
+ } as const;
@@ -1,31 +1,23 @@
1
- import { existsSync, mkdirSync } from "fs";
2
- import { crash, updateStatus, warn } from "@cloudflare/cli";
3
- import { processArgument } from "@cloudflare/cli/args";
1
+ import { join } from "path";
2
+ import { updateStatus, warn } from "@cloudflare/cli";
4
3
  import { brandColor, dim } from "@cloudflare/cli/colors";
5
- import { installPackages, runFrameworkGenerator } from "helpers/command";
4
+ import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
5
+ import { runFrameworkGenerator } from "frameworks/index";
6
6
  import {
7
- compatDateFlag,
7
+ copyFile,
8
8
  probePaths,
9
+ readFile,
9
10
  readJSON,
10
11
  usesEslint,
11
12
  usesTypescript,
12
13
  writeFile,
13
14
  writeJSON,
14
15
  } from "helpers/files";
15
- import { detectPackageManager } from "helpers/packages";
16
- import {
17
- apiAppDirHelloJs,
18
- apiAppDirHelloTs,
19
- apiPagesDirHelloJs,
20
- apiPagesDirHelloTs,
21
- appDirNotFoundJs,
22
- appDirNotFoundTs,
23
- envDts,
24
- nextConfig,
25
- readme,
26
- } from "./templates";
16
+ import { detectPackageManager } from "helpers/packageManagers";
17
+ import { installPackages } from "helpers/packages";
18
+ import { getTemplatePath } from "../../src/templates";
27
19
  import type { TemplateConfig } from "../../src/templates";
28
- import type { C3Args, C3Context } from "types";
20
+ import type { C3Context } from "types";
29
21
 
30
22
  const { npm, npx } = detectPackageManager();
31
23
 
@@ -33,27 +25,35 @@ const generate = async (ctx: C3Context) => {
33
25
  const projectName = ctx.project.name;
34
26
 
35
27
  await runFrameworkGenerator(ctx, [projectName]);
28
+
29
+ const wranglerConfig = readFile(join(getTemplatePath(ctx), "wrangler.jsonc"));
30
+ writeFile(join(ctx.project.path, "wrangler.jsonc"), wranglerConfig);
31
+ updateStatus("Created wrangler.jsonc file");
36
32
  };
37
33
 
38
- const getApiTemplate = (
39
- apiPath: string,
40
- isTypescript: boolean
41
- ): [string, string] => {
42
- const isAppDir = /\/app\/api$/.test(apiPath);
34
+ const updateNextConfig = (usesTs: boolean) => {
35
+ const s = spinner();
43
36
 
44
- if (isAppDir) {
45
- // App directory uses route handlers that are defined in a subdirectory (`/api/hello/route.ts`).
46
- const routeHandlerPath = `${apiPath}/hello`;
47
- mkdirSync(routeHandlerPath, { recursive: true });
37
+ const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
38
+ s.start(`Updating \`${configFile}\``);
48
39
 
49
- return isTypescript
50
- ? [`${routeHandlerPath}/route.ts`, apiAppDirHelloTs]
51
- : [`${routeHandlerPath}/route.js`, apiAppDirHelloJs];
52
- }
40
+ const configContent = readFile(configFile);
41
+
42
+ const updatedConfigFile =
43
+ `import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
44
+
45
+ // Here we use the @cloudflare/next-on-pages next-dev module to allow us to
46
+ // use bindings during local development (when running the application with
47
+ // \`next dev\`). This function is only necessary during development and
48
+ // has no impact outside of that. For more information see:
49
+ // https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
50
+ setupDevPlatform().catch(console.error);
51
+
52
+ `.replace(/\n\t*/g, "\n") + configContent;
53
+
54
+ writeFile(configFile, updatedConfigFile);
53
55
 
54
- return isTypescript
55
- ? [`${apiPath}/hello.ts`, apiPagesDirHelloTs]
56
- : [`${apiPath}/hello.js`, apiPagesDirHelloJs];
56
+ s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
57
57
  };
58
58
 
59
59
  const configure = async (ctx: C3Context) => {
@@ -70,39 +70,16 @@ const configure = async (ctx: C3Context) => {
70
70
  ]);
71
71
 
72
72
  if (!path) {
73
- crash("Could not find the `/api` or `/app` directory");
73
+ throw new Error("Could not find the `/api` or `/app` directory");
74
74
  }
75
75
 
76
- // App directory template may not generate an API route handler, so we update the path to add an `api` directory.
77
- const apiPath = path.replace(/\/app$/, "/app/api");
78
-
79
76
  const usesTs = usesTypescript(ctx);
80
77
 
81
- const appDirPath = probePaths([
82
- `${projectPath}/src/app`,
83
- `${projectPath}/app`,
84
- ]);
85
-
86
- if (appDirPath) {
87
- // Add a custom app not-found edge route as recommended in next-on-pages
88
- // (see: https://github.com/cloudflare/next-on-pages/blob/2b5c8f25/packages/next-on-pages/docs/gotchas.md#not-found)
89
- const notFoundPath = `${appDirPath}/not-found.${usesTs ? "tsx" : "js"}`;
90
- if (!existsSync(notFoundPath)) {
91
- const notFoundContent = usesTs ? appDirNotFoundTs : appDirNotFoundJs;
92
- writeFile(notFoundPath, notFoundContent);
93
- updateStatus("Created a custom edge not-found route");
94
- }
95
- }
96
-
97
- const [handlerPath, handlerFile] = getApiTemplate(
98
- apiPath,
99
- usesTypescript(ctx)
100
- );
101
- writeFile(handlerPath, handlerFile);
102
- updateStatus("Created an example API route handler");
103
-
104
78
  if (usesTs) {
105
- writeFile(`${projectPath}/env.d.ts`, envDts);
79
+ copyFile(
80
+ join(getTemplatePath(ctx), "env.d.ts"),
81
+ join(projectPath, "env.d.ts"),
82
+ );
106
83
  updateStatus("Created an env.d.ts file");
107
84
  }
108
85
 
@@ -112,30 +89,34 @@ const configure = async (ctx: C3Context) => {
112
89
  await writeEslintrc(ctx);
113
90
  }
114
91
 
115
- writeFile(`${projectPath}/next.config.js`, nextConfig);
116
- updateStatus("Updated the next.config.js file");
92
+ updateNextConfig(usesTs);
117
93
 
118
- writeFile(`${projectPath}/README.md`, readme);
94
+ copyFile(
95
+ join(getTemplatePath(ctx), "README.md"),
96
+ join(projectPath, "README.md"),
97
+ );
119
98
  updateStatus("Updated the README file");
120
99
 
121
100
  await addDevDependencies(installEslintPlugin);
122
101
  };
123
102
 
124
103
  export const shouldInstallNextOnPagesEslintPlugin = async (
125
- ctx: C3Context
104
+ ctx: C3Context,
126
105
  ): Promise<boolean> => {
127
106
  const eslintUsage = usesEslint(ctx);
128
107
 
129
- if (!eslintUsage.used) return false;
108
+ if (!eslintUsage.used) {
109
+ return false;
110
+ }
130
111
 
131
112
  if (eslintUsage.configType !== ".eslintrc.json") {
132
113
  warn(
133
- `Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`
114
+ `Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
134
115
  );
135
116
  return false;
136
117
  }
137
118
 
138
- return await processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
119
+ return await inputPrompt({
139
120
  type: "confirm",
140
121
  question: "Do you want to use the next-on-pages eslint-plugin?",
141
122
  label: "eslint-plugin",
@@ -144,7 +125,10 @@ export const shouldInstallNextOnPagesEslintPlugin = async (
144
125
  };
145
126
 
146
127
  export const writeEslintrc = async (ctx: C3Context): Promise<void> => {
147
- const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`);
128
+ const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`) as {
129
+ plugins: string[];
130
+ extends: string | string[];
131
+ };
148
132
 
149
133
  eslintConfig.plugins ??= [];
150
134
  eslintConfig.plugins.push("eslint-plugin-next-on-pages");
@@ -175,11 +159,43 @@ const addDevDependencies = async (installEslintPlugin: boolean) => {
175
159
  export default {
176
160
  configVersion: 1,
177
161
  id: "next",
162
+ frameworkCli: "create-next-app",
178
163
  platform: "pages",
179
- displayName: "Next",
164
+ displayName: "Next.js",
180
165
  generate,
181
166
  configure,
182
- transformPackageJson: async () => {
167
+ copyFiles: {
168
+ async selectVariant(ctx) {
169
+ const isApp = probePaths([
170
+ `${ctx.project.path}/src/app`,
171
+ `${ctx.project.path}/app`,
172
+ ]);
173
+
174
+ const isTypescript = usesTypescript(ctx);
175
+
176
+ const dir = isApp ? "app" : "pages";
177
+ return `${dir}/${isTypescript ? "ts" : "js"}`;
178
+ },
179
+ destinationDir(ctx) {
180
+ const srcPath = probePaths([`${ctx.project.path}/src`]);
181
+ return srcPath ? "./src" : "./";
182
+ },
183
+ variants: {
184
+ "app/ts": {
185
+ path: "./app/ts",
186
+ },
187
+ "app/js": {
188
+ path: "./app/js",
189
+ },
190
+ "pages/ts": {
191
+ path: "./pages/ts",
192
+ },
193
+ "pages/js": {
194
+ path: "./pages/js",
195
+ },
196
+ },
197
+ },
198
+ transformPackageJson: async (_, ctx) => {
183
199
  const isNpm = npm === "npm";
184
200
  const isBun = npm === "bun";
185
201
  const isNpmOrBun = isNpm || isBun;
@@ -192,20 +208,16 @@ export default {
192
208
  return {
193
209
  scripts: {
194
210
  "pages:build": `${pmCommand} ${nextOnPagesCommand}`,
195
- "pages:preview": `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
196
- "pages:deploy": `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
211
+ preview: `${pagesBuildRunCommand} && wrangler pages dev`,
212
+ deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
213
+ ...(usesTypescript(ctx) && {
214
+ "cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
215
+ }),
197
216
  },
198
217
  };
199
218
  },
200
- testFlags: [
201
- "--typescript",
202
- "--no-install",
203
- "--eslint",
204
- "--tailwind",
205
- "--src-dir",
206
- "--app",
207
- "--import-alias",
208
- "@/*",
209
- ],
219
+ devScript: "dev",
220
+ previewScript: "preview",
221
+ deployScript: "deploy",
210
222
  compatibilityFlags: ["nodejs_compat"],
211
223
  } as TemplateConfig;
@@ -0,0 +1,5 @@
1
+ // Generated by Wrangler
2
+ // by running `wrangler types --env-interface CloudflareEnv env.d.ts`
3
+
4
+ interface CloudflareEnv {
5
+ }
@@ -0,0 +1,23 @@
1
+ import { getRequestContext } from '@cloudflare/next-on-pages'
2
+
3
+ export const config = {
4
+ runtime: 'edge',
5
+ }
6
+
7
+ export default async function handler(req) {
8
+ let responseText = 'Hello World'
9
+
10
+ // In the edge runtime you can use Bindings that are available in your application
11
+ // (for more details see:
12
+ // - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
13
+ // - https://developers.cloudflare.com/pages/functions/bindings/
14
+ // )
15
+ //
16
+ // KV Example:
17
+ // const myKv = getRequestContext().env.MY_KV_NAMESPACE
18
+ // await myKv.put('suffix', ' from a KV store!')
19
+ // const suffix = await myKv.get('suffix')
20
+ // responseText += suffix
21
+
22
+ return new Response(responseText)
23
+ }
@@ -0,0 +1,24 @@
1
+ import type { NextRequest } from 'next/server'
2
+ import { getRequestContext } from '@cloudflare/next-on-pages'
3
+
4
+ export const config = {
5
+ runtime: 'edge',
6
+ }
7
+
8
+ export default async function handler(req: NextRequest) {
9
+ let responseText = 'Hello World'
10
+
11
+ // In the edge runtime you can use Bindings that are available in your application
12
+ // (for more details see:
13
+ // - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
14
+ // - https://developers.cloudflare.com/pages/functions/bindings/
15
+ // )
16
+ //
17
+ // KV Example:
18
+ // const myKv = getRequestContext().env.MY_KV_NAMESPACE
19
+ // await myKv.put('suffix', ' from a KV store!')
20
+ // const suffix = await myKv.get('suffix')
21
+ // responseText += suffix
22
+
23
+ return new Response(responseText)
24
+ }
@@ -0,0 +1,8 @@
1
+ {
2
+ "name": "<TBD>",
3
+ "compatibility_date": "<TBD>",
4
+ "compatibility_flags": [
5
+ "nodejs_compat"
6
+ ],
7
+ "pages_build_output_dir": ".vercel/output/static"
8
+ }