{
  "id": "fc9918b541dab1c100c08993",
  "source": "solid:signals",
  "type": "github-document",
  "title": "environment-variables",
  "content": "---\ntitle: Environment variables\nuse_cases: \u003e-\n  api keys, configuration, secrets management, build-time config,\n  environment-specific settings\ntags:\n  - environment\n  - variables\n  - config\n  - vite\n  - secrets\n  - deployment\nversion: '1.0'\ndescription: \u003e-\n  Configure public and private environment variables in Solid apps using Vite's\n  built-in support for secure configuration.\n---\n\nSolid is built on top of [Vite](https://vitejs.dev/), which offers a convenient way to handle environment variables.\n\n## Public Environment Variables\n\nPublic variables are considered safe to expose to the client-side code. These variables are prefixed with `VITE_` and are injected into the client-side code during compilation time.\n\nIn the root directory of the project, create a file called `.env`.\nThis file will store environment variables in the `key = value` format.\n\nIf working with TypeScript it is possible to make such variables type-safe and enable your TypeScript Language Service Provider (LSP) to autocomplete them by creating a file called `env.d.ts` in the root directory of the project.\n\n```typescript\ninterface ImportMetaEnv {\n\treadonly VITE_USER_ID: string;\n\treadonly VITE_PUBLIC_ENDPOINT: string;\n}\n\ninterface ImportMeta {\n\treadonly env: ImportMetaEnv;\n}\n```\n\n:::note\nTo prevent accidental exposure of environment variables to the client, only variables prefixed with `VITE_` will be exposed.\n\nFor example:\n\n```json\nVITE_SECRET_KEY = 123hello\nDB_PASSWORD = foobar\n```\n\nOnly the `VITE_SECRET_KEY` will be exposed to client source code, while `DB_PASSWORD` will not, as shown below.\n\n```jsx\nconsole.log(import.meta.env.VITE_SECRET_KEY); // 123hello\nconsole.log(import.meta.env.DB_PASSWORD); // undefined\n```\n\n:::\n\n```jsx\nfunction MyComponent() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch2\u003e\n\t\t\t\tComponent with environment variable used{\" \"}\n\t\t\t\t{import.meta.env.VITE_VARIABLE_NAME}\n\t\t\t\tthe value will be replaced during compilation time.\n\t\t\t\u003c/h2\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Private Environment Variables\n\nThese variables should only be accessed in your backend code, so it's best not to use the `VITE_` prefix for them. Instead, use `process.env` to access them. Depending on the [Nitro preset](https://nitro.build/deploy) chosen, they'll be made available automatically or they will require an external dependency such as [dotenv](https://www.npmjs.com/package/dotenv).\n\n```jsx\nDB_HOST=\"somedb://192.110.0\"\nDB_PASSWORD = super_secret_password_hash\n```\n\nTo access them, within your backend code, use `process.env`.\nFor an example, check the pseudo-code below.\n\n```jsx\n\t\"use server\"\n\n\tconst client = new DB({\n\t\thost: process.env.DB_URL,\n\t\tpassword: process.env.DB_PASSWORD\n\t});\n}\n```\n\nIt is also possible to make `process.env` type-safe via the same `env.d.ts` file.\n\n```typescript\n\ndeclare namespace NodeJS {\n\tinterface ProcessEnv {\n\t\treadonly DB_URL: string\n\t\treadonly DB_PASSWORD: string\n\t}\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/configuration/environment-variables.mdx",
  "metadata": {
    "path": "src/routes/configuration/environment-variables.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2883,
    "source_type": "github"
  },
  "hash": "e585fedf74d82a20b93607b37f118e39473398761e8b2b81d45fdcc04240b9f0",
  "timestamp": "2026-02-23T11:43:00.187010014+01:00"
}