Configuration

Environment variables

Edit this page

Solid is built on top of Vite, which offers a convenient way to handle environment variables. The following steps will show how to set up environment variables in a Solid project:

  1. In the root directory of the project, create a file called .env. This file will store environment variables in the key = value format.
  1. In your Solid code, Vite will allow access to your environment variables by automatically injecting the environment variables into your application on compilation time.
function MyComponent() {
return (
<div>
<h2>
Component with environment variable used{" "}
{import.meta.env.VITE_VARIABLE_NAME}
the value will be replaced during compilation time.
</h2>
</div>
);
}

For more information on environment variables in Vite and enabling TypeScript intellisense for environment variables, please refer to the Vite Documentation.

Report an issue with this page