mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.6 KiB
JSON
17 lines
3.6 KiB
JSON
{
|
|
"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"
|
|
} |