[@hono/vite-dev-server] environment variables not loading

[Soviut]

In vite, environment variables are loaded from .env and .env.lcoal files as long as they start with a VITE_ prefix https://vite.dev/guide/env-and-mode

However, none of these variables seem to be importing to my context.

How can I pass environment variables when using the vite dev server?

[dihmeetree]

@yusukebe Also having this issue as well. I expected in my vite.config.ts I could do something like this

import { defineConfig, loadEnv } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig(({ mode }) => {
  // Load env file based on `mode` in the current directory.
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      devServer({
        entry: './api/index.ts',
        env // <-- figured this would just work
      }),
      // ...
    ]
  }
}

According to the type def for devServer, it does accept an env parameter.. but passing Environment variables to this doesn't seem to properly work.. (i.e - Can't access with process.env)

Any ideas how to pass environment variables to devServer properly?

[ilmeskio]

I found a workaround in this blueprint. Completing @dihmeetree proposal this works leveraging vite loadEnv function.

const env = loadEnv(mode, process.cwd(), '')
process.env = env
return {
    plugins: [
        build({
            entry: "src/index.ts",
        }),
        devServer({
            entry: 'src/index.ts',
        }),
    ],
}

I am now using import 'dotenv/config' in vite.config.ts as I'll be using a node environment. This should not create issues on client side as only the prefixed env will be accessed through import.meta.env. Note: using dotenv and nodeAdapter also the context environment is populated.

@dihmeetree solution populates correctly c.env on handlers but is not accessible using the env helper unless with the cloudflareAdapter. The env helper in fact use the context environment only in case of cloudflare-workers.

This is specified in the documentation.

In a development environment, I would have expected the helper to consider the context environment also with the node adapter so that I could write portable code. That is anyway a change on Hono. I will create an issue on the main project to discuss a standard approach.

[Soviut]

@ilmeskio did you ever create that ticket? If so, can you link it here?

[ilmeskio]

@Soviut no, I had to focus on other topics. Let me know if you do!

[yusukebe]

Hey. There are some ways to get environment variables:

1. Getting from c.env by passing the variables to devServer.env as @dihmeetree mentioned.
2. Using Vite specific functions as @ilmeskio mentioned
3. Using env function in hono/adapter.

The ideal is using the 3, to access the envs unified method, though I'm not sure it can since I've never tried.

[Soviut]

The ideal is using the 3, to access the envs unified method, though I'm not sure it can since I've never tried.

3 is what I've been trying to use but it didn't work unless I did the following

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  process.env = env

  return { // ...

[yusukebe]

@Soviut

I see. By the way, are you using an adapter like @hono/vite-dev-server/cloudflare?

[Soviut]

@Soviut

I see. By the way, are you using an adapter like @hono/vite-dev-server/cloudflare?

No, this is a straight up hono project using node-server.

[yusukebe]

I think this is just difficult to use, but it's expected behavior.

We have to get the variables that are set with a VITE_ prefix in .env and .env.local files from import.meta.env.

app.get('/', (c) => {
  const key = import.meta.env.VITE_SOME_KEY
  return c.text(`Your key is ${key}`)
})

The context of hono can't handle it. So you can't get them from c.env. The better way is to use process.env = env in vite.config.ts.