Confused about which Cloudflare preset to use and basic setup for workers

[ymansurozer]

I am migrating an app deployed on Vercel to Cloudflare. But every step of the way, I encountered a new issue. At this point I decided to start from scratch and build it for CF.

Available Presets

When you create a new Nuxt app, you get many Cloudflare presets, I understand there are two usable presets:

• Pages: cloudflare_pages
• Module Workers: cloudflare_module

I want to use observability, cron, durable objects etc. in my app so I understand workers is the one for me.

Wrangler Preset vs Nitro Present

This is where it gets interesting: If I create worker for Nuxt based on CF's own recommended command npm create cloudflare@latest my-nuxt-app -- --framework=nuxt --experimental, I see this is set as the Nitro preset:

nitro: {
    preset: "./cloudflare-preset"
  }

And the preset generated by wrangler is:

import { type NitroPreset } from "nitropack";

export default <NitroPreset>{
	extends: "cloudflare",
	exportConditions: ["workerd"],
	output: {
		dir: "{{ rootDir }}/dist",
		publicDir: "{{ output.dir }}/public",
		serverDir: "{{ output.dir }}/worker",
	},
	commands: {
		preview: "npx wrangler dev",
		deploy: "npx wrangler deploy",
	},
	wasm: {
		lazy: false,
		esmImport: true,
	},
	rollupConfig: {
		output: {
			entryFileNames: "index.js",
			format: "esm",
			exports: "named",
			inlineDynamicImports: false,
		},
	},
};

And this is my wrangler.toml file:

#:schema node_modules/wrangler/config-schema.json
name = "saas-starter-cf"
compatibility_date = "2024-11-12"
main = "./dist/worker/index.js"
assets = { directory = "./dist/public", binding = "ASSETS" }

routes = [
  { pattern = "[MY CUSTOM DOMAIN]", custom_domain = true }
]

[observability]
enabled = true

Differences

Now:

• if I deploy with wrangler's preset, I see this log in the console: Building Nuxt Nitro server (preset: cloudflare-worker, compatibility date: 2024-04-03). And all works fine.
• if I deploy with cloudflare-module, I see this log in the console Building Nuxt Nitro server (preset: cloudflare-module-legacy, compatibility date: 2024-04-03). Then it fails with this error (note that I updated my .toml file to point to .output folder and worker/index.js to server/index.mjs):

  Uncaught Error: No such module "__STATIC_CONTENT_MANIFEST".
    imported from "index.js"
   [code: 10021]

So why are there differences between Cloudflare's preset and Nitro's own preset? And Why do I keep getting an error if I deploy with cloudflare-module, which actually seems to be using the cloudflare-module-legacy?

I have so many questions because the whole Cloudflare thing with Nitro looks so confusing, despite having read the whole Nitro + CF documentation and countless Github issues.

Does anyone have any ideas? 🙏🏽 Sorry for tagging you here @pi0, but would be grateful to know what you think.

Edit: Full codebase available here.

[pi0]

I am so sorry about your inconvenience in the migration path.

Certainly please do not use the cloudflare (experimental) starter template, it is unsupported.

Instead:

• Upgrade Nuxt and Nitro to the latest versions
• Remove the custom preset directory and config
• Set compatibilityDate to 2024-11-01 (or newer)
• Update wrangler for static assets (follow this guide)

Let me know how it goes.

[ymansurozer]

Thank you very much Pooya! This cleared it up a lot, at least in terms of the build preset. I think the most confusing part of all this was that Cloudflare UI does not provide a way to just deploy a Github repo as a worker and only the Pages menu has that. I was able to deploy as a worker only via Wrangler later on.

I'm taking notes during the migration process right now and will open a PR to maybe add more information to the Nitro's Cloudflare deployment page.