CD
Cloudflare Developers•3mo ago
Baran

Incorrect `.env` file with Vite deployment

Hi all, My aim: - Cloudflare preview links to run with .env.development file - Cloudflare production deployment to run with .env.production file My current setup: ./package.json 
...
  "scripts": {
    "build": "tsc -b && NODE_OPTIONS=--max-old-space-size=4096 vite build",
    ...
  },
  "devDependencies": {
    "@cloudflare/vite-plugin": "^1.13.1", // latest
    "wrangler": "^4.37.0" // latest
    ...
  }
...
...
  "scripts": {
    "build": "tsc -b && NODE_OPTIONS=--max-old-space-size=4096 vite build",
    ...
  },
  "devDependencies": {
    "@cloudflare/vite-plugin": "^1.13.1", // latest
    "wrangler": "^4.37.0" // latest
    ...
  }
...
./wrangler.jsonc 
// nothing related to env variables, and I want to keep it like that; since my source of truth is `.env` files
// nothing related to env variables, and I want to keep it like that; since my source of truth is `.env` files
Cloudflare GUI: - Build command for both: npm run build (I can't change this because of@cloudflare/vite-plugin limitation, source: https://developers.cloudflare.com/workers/wrangler/configuration/#custom-builds) - Non-prod deploy command: npx wrangler versions upload - Prod deploy command: npx wrangler deploy Current result: Both Preview and Production builds load .env.production. --- How do I achieve this? I am stuck for the past few days
9 Replies
Walshy
Walshy•3mo ago
You need to specify the environment for Vite - https://developers.cloudflare.com/workers/vite-plugin/reference/secrets/ so you'd need to do CLOUDFLARE_ENV=staging vite build and CLOUDFLARE_ENV=production vite build
Baran
BaranOP•3mo ago
but how do i achieve this when i have only 1 build command? https://developers.cloudflare.com/workers/wrangler/configuration/#custom-builds
Baran
BaranOP•3mo ago
No description
Walshy
Walshy•3mo ago
you'd need to do it as part of the deploy commands - npm run build && npx wrangler deploy and npm run build:staging && npx wrangler versions upload This will hopefully be nicer in the future cc: @texan
Baran
BaranOP•3mo ago
i did this, and preview deployments are still loading production env variables despite logging "development". Cloudflare GUI: - Build command (Optional) echo "building..." - Deploy command CLOUDFLARE_ENV=production npm run build && npx wrangler deploy - Non-production branch deploy command (Optional): CLOUDFLARE_ENV=development npm run build && npx wrangler versions upload -- Logs: 
...
2025-09-15T13:46:58.949Z    Run `npm audit` for details.
2025-09-15T13:46:59.165Z    Executing user build command: echo "building..."
2025-09-15T13:46:59.171Z    building...
2025-09-15T13:46:59.172Z    Success: Build command completed
2025-09-15T13:46:59.173Z    Executing user deploy command: CLOUDFLARE_ENV=development npm run build && npx wrangler versions upload
2025-09-15T13:46:59.578Z    
2025-09-15T13:46:59.579Z    > my-react-app@0.0.0 build
2025-09-15T13:46:59.579Z    > echo "CLOUDFLARE_ENV=$CLOUDFLARE_ENV" && tsc -b && NODE_OPTIONS=--max-old-space-size=4096 CLOUDFLARE_ENV=$CLOUDFLARE_ENV vite build
2025-09-15T13:46:59.579Z    
2025-09-15T13:46:59.584Z    CLOUDFLARE_ENV=development
2025-09-15T13:47:25.443Z    ▲ [WARNING] Processing wrangler.jsonc configuration:
2025-09-15T13:47:25.443Z    
2025-09-15T13:47:25.444Z        - No environment found in configuration with name "development".
2025-09-15T13:47:25.444Z          Before using `--env=development` there should be an equivalent environment section in the configuration.
2025-09-15T13:47:25.444Z      
2025-09-15T13:47:25.444Z          Consider adding an environment configuration section to the wrangler.json file:
2025-09-15T13:47:25.444Z          
...
2025-09-15T13:46:58.949Z    Run `npm audit` for details.
2025-09-15T13:46:59.165Z    Executing user build command: echo "building..."
2025-09-15T13:46:59.171Z    building...
2025-09-15T13:46:59.172Z    Success: Build command completed
2025-09-15T13:46:59.173Z    Executing user deploy command: CLOUDFLARE_ENV=development npm run build && npx wrangler versions upload
2025-09-15T13:46:59.578Z    
2025-09-15T13:46:59.579Z    > my-react-app@0.0.0 build
2025-09-15T13:46:59.579Z    > echo "CLOUDFLARE_ENV=$CLOUDFLARE_ENV" && tsc -b && NODE_OPTIONS=--max-old-space-size=4096 CLOUDFLARE_ENV=$CLOUDFLARE_ENV vite build
2025-09-15T13:46:59.579Z    
2025-09-15T13:46:59.584Z    CLOUDFLARE_ENV=development
2025-09-15T13:47:25.443Z    ▲ [WARNING] Processing wrangler.jsonc configuration:
2025-09-15T13:47:25.443Z    
2025-09-15T13:47:25.444Z        - No environment found in configuration with name "development".
2025-09-15T13:47:25.444Z          Before using `--env=development` there should be an equivalent environment section in the configuration.
2025-09-15T13:47:25.444Z      
2025-09-15T13:47:25.444Z          Consider adding an environment configuration section to the wrangler.json file:
2025-09-15T13:47:25.444Z
2025-09-15T13:47:25.444Z [env.development] 2025-09-15T13:47:25.445Z 
x3
...
x3
...
Walshy
Walshy•3mo ago
No environment found in configuration with name "development".
You don't have an environment development
Baran
BaranOP•3mo ago
but shouldn't wrangler pickup my env file? the rest of the logs are even more confusing 
x3
...
...
2025-09-15T13:47:26.211Z    Using vars defined in .env.development
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/.vite/manifest.json  0.16 kB
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/.dev.vars            0.61 kB
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/wrangler.json        1.28 kB
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/index.js             7.56 kB │ map: 15.10 kB
2025-09-15T13:47:26.238Z    ✓ built in 504ms
2025-09-15T13:47:26.238Z    vite v7.1.1 building for production...
2025-09-15T13:47:26.240Z    
...
2025-09-15T13:47:26.241Z    
2025-09-15T13:47:26.306Z    transforming...
2025-09-15T13:47:58.045Z    ✓ 4132 modules transformed.
2025-09-15T13:48:05.013Z    rendering chunks...
...
2025-09-15T13:48:22.831Z    dist/client/index.html                     6.95 kB │ gzip:     1.79 kB
...
x3
...
...
2025-09-15T13:47:26.211Z    Using vars defined in .env.development
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/.vite/manifest.json  0.16 kB
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/.dev.vars            0.61 kB
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/wrangler.json        1.28 kB
2025-09-15T13:47:26.231Z    dist/{PROJECT_NAME}/index.js             7.56 kB │ map: 15.10 kB
2025-09-15T13:47:26.238Z    ✓ built in 504ms
2025-09-15T13:47:26.238Z    vite v7.1.1 building for production...
2025-09-15T13:47:26.240Z    
...
2025-09-15T13:47:26.241Z    
2025-09-15T13:47:26.306Z    transforming...
2025-09-15T13:47:58.045Z    ✓ 4132 modules transformed.
2025-09-15T13:48:05.013Z    rendering chunks...
...
2025-09-15T13:48:22.831Z    dist/client/index.html                     6.95 kB │ gzip:     1.79 kB
...
2025-09-15T13:47:26.211Z Using vars defined in .env.development
but i am confident that vars in .env.production were used for this preview link 
2025-09-15T13:48:22.832Z    ✓ built in 56.59s
2025-09-15T13:48:25.726Z    
2025-09-15T13:48:25.726Z     ⛅️ wrangler 4.37.0
2025-09-15T13:48:25.726Z    ───────────────────
2025-09-15T13:48:25.729Z    Using redirected Wrangler configuration.
2025-09-15T13:48:25.729Z     - Configuration being used: "dist/{PROJECT_NAME}/wrangler.json"
2025-09-15T13:48:25.729Z     - Original user's configuration: "wrangler.jsonc"
2025-09-15T13:48:25.729Z     - Deploy configuration file: ".wrangler/deploy/config.json"
2025-09-15T13:48:25.872Z    ▲ [WARNING] Failed to match Worker name. Your config file is using the Worker name "{PROJECT_NAME}-development", but the CI system expected "{PROJECT_NAME}". Overriding using the CI provided Worker name. Workers Builds connected builds will attempt to open a pull request to resolve this config name mismatch.
2025-09-15T13:48:25.872Z    
2025-09-15T13:48:25.872Z    
2025-09-15T13:48:26.767Z    🌀 Building list of assets...
2025-09-15T13:48:26.811Z    ✨ Read 2467 files from the assets directory /opt/buildhome/repo/dist/client
2025-09-15T13:48:27.666Z    🌀 Starting asset upload...
...   
2025-09-15T13:48:38.982Z    
2025-09-15T13:48:38.983Z    Uploaded {PROJECT_NAME} (12.22 sec)
2025-09-15T13:48:38.983Z    Worker Version ID: {REDACTED}
2025-09-15T13:48:40.063Z    Version Preview URL: {REDACTED}
2025-09-15T13:48:40.063Z    Version Preview Alias URL: {REDACTED}
...
2025-09-15T13:48:40.188Z    Success: Deploy command completed
2025-09-15T13:48:40.190Z    Skipping build output cache as it's not supported for your project
2025-09-15T13:48:40.260Z    ✨ Success! Build completed.
2025-09-15T13:48:22.832Z    ✓ built in 56.59s
2025-09-15T13:48:25.726Z    
2025-09-15T13:48:25.726Z     ⛅️ wrangler 4.37.0
2025-09-15T13:48:25.726Z    ───────────────────
2025-09-15T13:48:25.729Z    Using redirected Wrangler configuration.
2025-09-15T13:48:25.729Z     - Configuration being used: "dist/{PROJECT_NAME}/wrangler.json"
2025-09-15T13:48:25.729Z     - Original user's configuration: "wrangler.jsonc"
2025-09-15T13:48:25.729Z     - Deploy configuration file: ".wrangler/deploy/config.json"
2025-09-15T13:48:25.872Z    ▲ [WARNING] Failed to match Worker name. Your config file is using the Worker name "{PROJECT_NAME}-development", but the CI system expected "{PROJECT_NAME}". Overriding using the CI provided Worker name. Workers Builds connected builds will attempt to open a pull request to resolve this config name mismatch.
2025-09-15T13:48:25.872Z    
2025-09-15T13:48:25.872Z    
2025-09-15T13:48:26.767Z    🌀 Building list of assets...
2025-09-15T13:48:26.811Z    ✨ Read 2467 files from the assets directory /opt/buildhome/repo/dist/client
2025-09-15T13:48:27.666Z    🌀 Starting asset upload...
...   
2025-09-15T13:48:38.982Z    
2025-09-15T13:48:38.983Z    Uploaded {PROJECT_NAME} (12.22 sec)
2025-09-15T13:48:38.983Z    Worker Version ID: {REDACTED}
2025-09-15T13:48:40.063Z    Version Preview URL: {REDACTED}
2025-09-15T13:48:40.063Z    Version Preview Alias URL: {REDACTED}
...
2025-09-15T13:48:40.188Z    Success: Deploy command completed
2025-09-15T13:48:40.190Z    Skipping build output cache as it's not supported for your project
2025-09-15T13:48:40.260Z    ✨ Success! Build completed.
i added 
  "env": {
    "development": {
      "vars": {},
    },
  },
  "env": {
    "development": {
      "vars": {},
    },
  },
to get rid of the error, and its still using the variables in .env.production SOLVED ✅ This shouldn't have taken 2 days, the docs for this are conflicting/outdated/confusing. package.json 
...
  "scripts": {
    "build": "tsc -b && vite build --mode ${CLOUDFLARE_ENV:-production}",
  },
  "dependencies": {
    "react": "^19.1.0",
  },
  "devDependencies": {
    "@cloudflare/vite-plugin": "^1.12.4",
    "vite": "^7.1.1",
    "wrangler": "^4.37.0"
  },
...
...
  "scripts": {
    "build": "tsc -b && vite build --mode ${CLOUDFLARE_ENV:-production}",
  },
  "dependencies": {
    "react": "^19.1.0",
  },
  "devDependencies": {
    "@cloudflare/vite-plugin": "^1.12.4",
    "vite": "^7.1.1",
    "wrangler": "^4.37.0"
  },
...
wrangler.jsonc 
// i don't have anything related to any `env` object
// i don't have anything related to any `env` object
.env.development 
i didn't make any changes
i didn't make any changes
.env.production 
i didn't make any changes
i didn't make any changes
Cloudflare GUI (Workers > your worker > Settings): Build Edit your build configuration settings Build configuration Build command echo "building..." Deploy command CLOUDFLARE_ENV=production npm run build && npx wrangler deploy Non-production branch deploy command CLOUDFLARE_ENV=development npm run build && npx wrangler versions upload Result: - Cloudflare preview links load .env.development - Cloudflare production link loads .env.production
hiradsab
hiradsab•3mo ago
@Baran how are you accessing your .env files? are you committing your .env.* files to git?
Baran
BaranOP•2mo ago
my .env.* files don't contain any private environment variables/secrets, so i push them to git i upload the private env vars/secrets via cloudflare gui or cli -- I access via process.env. or import.meta.env. in code.

Did you find this page helpful?