{"id":34,"date":"2025-08-08T01:00:00","date_gmt":"2025-08-08T01:00:00","guid":{"rendered":"https:\/\/wordpress.securinsight.ca\/index.php\/2025\/08\/08\/workers-wrangler-and-the-cloudflare-vite-plugin-support-env-files-in-local-development-2\/"},"modified":"2025-08-08T01:00:00","modified_gmt":"2025-08-08T01:00:00","slug":"workers-wrangler-and-the-cloudflare-vite-plugin-support-env-files-in-local-development-2","status":"publish","type":"post","link":"https:\/\/wordpress.securinsight.ca\/index.php\/2025\/08\/08\/workers-wrangler-and-the-cloudflare-vite-plugin-support-env-files-in-local-development-2\/","title":{"rendered":"Workers – Wrangler and the Cloudflare Vite plugin support `.env` files in local development"},"content":{"rendered":"

Now, you can use .env<\/code> files to provide secrets and override environment variables on the env<\/code> object during local development with Wrangler and the Cloudflare Vite plugin.<\/p>\n

Previously in local development, if you wanted to provide secrets or environment variables during local development, you had to use .dev.vars<\/code> files.
\nThis is still supported, but you can now also use .env<\/code> files, which are more familiar to many developers.<\/p>\n

Using .env<\/code> files in local development<\/h4>\n

You can create a .env<\/code> file in your project root to define environment variables that will be used when running wrangler dev<\/code> or vite dev<\/code>. The .env<\/code> file should be formatted like a dotenv<\/code> file, such as KEY=\"VALUE\"<\/code>:<\/p>\n

\n
\n
TITLE<\/span>=<\/span>\"My Worker\"<\/span><\/div><\/div>
API_TOKEN<\/span>=<\/span>\"dev-token\"<\/span><\/div><\/div><\/code><\/pre>\n
<\/div>\n<\/figure>\n<\/div>\n
When you run wrangler dev<\/code> or vite dev<\/code>, the environment variables defined in the .env<\/code> file will be available in your Worker code via the env<\/code> object:<\/p>\n
\n
\n
export<\/span> <\/span>default<\/span> <\/span>{<\/span><\/div><\/div>
  <\/span>async<\/span> <\/span>fetch<\/span>(<\/span>request<\/span>,<\/span> <\/span>env<\/span>)<\/span> <\/span>{<\/span><\/div><\/div>
    <\/span>const<\/span> <\/span>title<\/span> <\/span>=<\/span> <\/span>env<\/span>.<\/span>TITLE<\/span>;<\/span> <\/span>\/\/ \"My Worker\"<\/span><\/div><\/div>
    <\/span>const<\/span> <\/span>apiToken<\/span> <\/span>=<\/span> <\/span>env<\/span>.<\/span>API_TOKEN<\/span>;<\/span> <\/span>\/\/ \"dev-token\"<\/span><\/div><\/div>
    <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span><\/div><\/div>
      <\/span>`https:\/\/api.example.com\/data?token=<\/span>${<\/span>apiToken<\/span>}<\/span>`<\/span>,<\/span><\/div><\/div>
    <\/span><\/span>)<\/span>;<\/span><\/div><\/div>
    <\/span>return<\/span> <\/span>new<\/span> <\/span>Response<\/span>(<\/span>`Title: <\/span>${<\/span>title<\/span>}<\/span> - `<\/span> <\/span>+<\/span> (<\/span>await<\/span> <\/span>response<\/span>.<\/span>text<\/span>()))<\/span>;<\/span><\/div><\/div>
  <\/span>},<\/span><\/div><\/div>
};<\/span><\/div><\/div><\/code><\/pre>\n
<\/div>\n<\/figure>\n<\/div>\n
Multiple environments with .env<\/code> files<\/h4>\n
You may be using Cloudflare Environments<\/a> to deploy different versions of a Worker with distinct environment variables. For instance, you may have a production and staging environment.<\/p>\n
To set different environment variables for each Cloudflare Environment, create files named .env.<environment-name><\/code>.<\/p>\n
When you use wrangler <command> --env <environment-name><\/code> or CLOUDFLARE_ENV=<environment-name> vite dev<\/code>, the corresponding environment-specific file will also be loaded and merged with the .env<\/code> file.<\/p>\n
For example, if you want to set different environment variables for the staging<\/code> environment, you can create a file named .env.staging<\/code>:<\/p>\n
\n
\n
API_TOKEN<\/span>=<\/span>\"staging-token\"<\/span><\/div><\/div><\/code><\/pre>\n
<\/div>\n<\/figure>\n<\/div>\n
When you run wrangler dev --env staging<\/code> or CLOUDFLARE_ENV=staging vite dev<\/code>, the environment variables from .env.staging<\/code> will be merged onto those from .env<\/code>.<\/p>\n
\n
\n
export<\/span> <\/span>default<\/span> <\/span>{<\/span><\/div><\/div>
  <\/span>async<\/span> <\/span>fetch<\/span>(<\/span>request<\/span>,<\/span> <\/span>env<\/span>)<\/span> <\/span>{<\/span><\/div><\/div>
    <\/span>const<\/span> <\/span>title<\/span> <\/span>=<\/span> <\/span>env<\/span>.<\/span>TITLE<\/span>;<\/span> <\/span>\/\/ \"My Worker\" (from `.env`)<\/span><\/div><\/div>
    <\/span>const<\/span> <\/span>apiToken<\/span> <\/span>=<\/span> <\/span>env<\/span>.<\/span>API_TOKEN<\/span>;<\/span> <\/span>\/\/ \"staging-token\" (from `.env.staging`, overriding the value from `.env`)<\/span><\/div><\/div>
    <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span><\/div><\/div>
      <\/span>`https:\/\/api.example.com\/data?token=<\/span>${<\/span>apiToken<\/span>}<\/span>`<\/span>,<\/span><\/div><\/div>
    <\/span><\/span>)<\/span>;<\/span><\/div><\/div>
    <\/span>return<\/span> <\/span>new<\/span> <\/span>Response<\/span>(<\/span>`Title: <\/span>${<\/span>title<\/span>}<\/span> - `<\/span> <\/span>+<\/span> (<\/span>await<\/span> <\/span>response<\/span>.<\/span>text<\/span>()))<\/span>;<\/span><\/div><\/div>
  <\/span>},<\/span><\/div><\/div>
};<\/span><\/div><\/div><\/code><\/pre>\n
<\/div>\n<\/figure>\n<\/div>\n
Find out more<\/h4>\n
For more information on how to use .env<\/code> files with Wrangler and the Cloudflare Vite plugin, see the following documentation:<\/p>\n