Configuration

Environment variables

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:

In the root directory of the project, create a file called .env. This file will store environment variables in the key = value format.

Info:

To prevent accidental exposure of environment variables to the client, only variables prefixed with VITE_ will be exposed.

For example:

VITE_SECRET_KEY = 123hello
DB_PASSWORD = foobar

Only the VITE_SECRET_KEY will be exposed to client source code, while DB_PASSWORD will not, as shown below.

console.log(import.meta.env.VITE_SECRET_KEY); // 123hello
console.log(import.meta.env.DB_PASSWORD); // undefined

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