Nuxt•2mo ago

How to deploy a different stage for an app that uses the cloudflare-module preset?

I'm trying to deploy a different version of my app with different environment variables (in my case the stage is named "preview" but it could be "staging" or "beta etc). When I try to run npx wrangler deploy --env preview the command fails with the following error message:

 ⛅️ wrangler 4.20.5 (update available 4.26.1)
─────────────────────────────────────────────
Using redirected Wrangler configuration.
 - Configuration being used: ".output/server/wrangler.json"
 - Original user's configuration: "wrangler.jsonc"
 - Deploy configuration file: ".wrangler/deploy/config.json"

✘ [ERROR] Processing .output/server/wrangler.json configuration:

    - You have specified the environment "preview", but are using a redirected
  configuration, produced by a build tool such as Vite.
      You need to set the environment in your build tool, rather than via Wrangler.
      For example, if you are using Vite, refer to these docs:
  https://developers.cloudflare.com/workers/vite-plugin/reference/cloudflare-environments/

 ⛅️ wrangler 4.20.5 (update available 4.26.1)
─────────────────────────────────────────────
Using redirected Wrangler configuration.
 - Configuration being used: ".output/server/wrangler.json"
 - Original user's configuration: "wrangler.jsonc"
 - Deploy configuration file: ".wrangler/deploy/config.json"

✘ [ERROR] Processing .output/server/wrangler.json configuration:

    - You have specified the environment "preview", but are using a redirected
  configuration, produced by a build tool such as Vite.
      You need to set the environment in your build tool, rather than via Wrangler.
      For example, if you are using Vite, refer to these docs:
  https://developers.cloudflare.com/workers/vite-plugin/reference/cloudflare-environments/

I followed the given link and I think I'm supposed to use the CLOUDFLARE_ENV environment variable to select an environment.

CLOUDFLARE_ENV=preview pnpm run build

CLOUDFLARE_ENV=preview pnpm run build

However, this doesn't seem to have any effect. The reason I need this is to be able to specify settings other than the varibles (e.g. bindings or routes for a different domain).

6 Replies

kapa.ai•2mo ago

Hi @Mirage. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, Nuxt's deployment to Cloudflare Workers (using the cloudflare_module preset) does not natively document support for selecting a different environment (such as "preview", "staging", or "beta") via the --env flag in the wrangler deploy command. In fact, the error message you encountered is expected: when using a redirected configuration (as Nuxt does by generating .output/server/wrangler.json), Wrangler expects the environment to be set at build time, not deploy time. Key points from the documentation: - Nuxt generates the Cloudflare Worker configuration during the build process, not at deploy time. This means that environment-specific settings (bindings, routes, etc.) must be determined when you run the build, not when you deploy with Wrangler Deploy to Cloudflare Workers. - The Nuxt config supports per-environment overrides using the $env key in nuxt.config.ts, and you can select the environment at build time using the --envName flag, e.g.:

  npx nuxi build --envName preview

  npx nuxi build --envName preview

This will apply the configuration overrides for the "preview" environment during the build, and the generated output (including the wrangler config) will reflect those settings Nuxt Configuration: Environment Overrides. - The CLOUDFLARE_ENV variable is not mentioned in the Nuxt documentation as a supported way to select environments for the build process. Instead, use Nuxt's own environment override mechanism. Recommended approach: 1. Define your environment-specific configuration in nuxt.config.ts using the $env key:

   export default defineNuxtConfig({
     $env: {
       preview: {
         nitro: {
           cloudflare: {
             wrangler: {
               // Your preview-specific bindings/routes here
             }
           }
         }
       }
     }
   })

   export default defineNuxtConfig({
     $env: {
       preview: {
         nitro: {
           cloudflare: {
             wrangler: {
               // Your preview-specific bindings/routes here
             }
           }
         }
       }
     }
   })

2. Build your app for the desired environment:

   npx nuxi build --envName preview

   npx nuxi build --envName preview

3. Deploy as usual:

   npx wrangler deploy

   npx wrangler deploy

(Do not use --env preview with wrangler; the environment is already baked into the build output.) Summary:
You must select the environment at build time using Nuxt's --envName flag, not at deploy time with Wrangler. The knowledge sources do not mention support for CLOUDFLARE_ENV or using wrangler deploy --env with Nuxt's generated output Nuxt Configuration: Environment Overrides Deploy to Cloudflare Workers. If you need to deploy multiple environments, build separately for each environment using the appropriate --envName, and deploy the resulting output to the corresponding Cloudflare environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1368579779309207656> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MirageOP•2mo ago

Perfect, this solves it for me

thasmo•2mo ago

Interesting. How would I set different build commands for cloudflare/wrangler when using their GitHub integration where only one build command can be configured? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about configuring multiple build commands or dynamic environment selection for Cloudflare/Wrangler when using their GitHub integration, where only a single build command can be set. The Nuxt documentation describes how to use environment overrides with the --envName flag during the build process (e.g., nuxi build --envName preview), but it does not address how to automate or select different environments within the constraints of Cloudflare Pages or Workers GitHub integration, which typically allows only one build command in the project settings Nuxt Configuration: Environment Overrides. If you need to support multiple environments (like "preview", "staging", "production") with different build commands, the knowledge sources do not provide a documented solution for this scenario within the Cloudflare GitHub integration workflow. You may need to consult Cloudflare's own documentation or consider using separate projects or branches, but this is outside the scope of the provided Nuxt documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@110478559113416704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to deploy a different stage for an app that uses the cloudflare-module preset?

Did you find this page helpful?