Skip to content

Dotenv

Build-time environment variables

Sometimes, using environment variables for configuration is the right way to go. For these cases, Storefront X supports .env files. Variables in the .env file has to be prefixed with SFX_ so that accidental leaks of environment variables to the client bundle are avoided.

Such environment variables are baked-in during build-time, so that dead-code elimination and similar optimizations can be performed. If you want environment variables to be loaded during application start-up, use run-time environment variables.

TIP

It is a good idea to not use environment variables directly, but uses them inside config files which are then used in the rest of the application.

Example

  1. Create dotenv file in the root of the project - .env
SFX_SECRET_TOKEN=XXX
  1. Create config file in your module - modules/my-module/config/SECRET_TOKEN.ts
ts
export default import.meta.env.SFX_SECRET_TOKEN
  1. Use the config file in your application
vue
<template>
  <h1>{{ SECRET_TOKEN }}</h1>
</template>

<script setup lang="ts">
import SECRET_TOKEN from '#ioc/config/SECRET_TOKEN'
</script>

Run-time environment variables

You can use Node.js server-only variables which are not baked-in during build-time. This has few consequences:

  1. These variables are loaded during application start-up.
  2. These variables are not present in the client bundle.
  3. These variables do not need to have the SFX_ prefix.

TIP

It is recommended to guard the server-only environment variable with the IS_SERVER, because browsers do not have the process object.

Example

ts
// config/MY_VARIABLE.ts

import IS_SERVER from '#ioc/config/IS_SERVER'

export default IS_SERVER ? process.env.MY_VARIABLE : null