Environment variables

stack54 exposes your environment variables using import.meta.env to your server code. Code intended to run only on the server can access private and public environment variables.

Code intended for the client i.e scripts can only access public environment variables marked using the PUBLIC_ prefix, or whatever value you define in your publicPrefix config.

For example

PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key
DB_PASSWORD=foo_bar

script tags can only access PUBLIC_GOOGLE_MAPS_API_KEY

<script type="module">
  console.log(import.meta.env.PUBLIC_GOOGLE_MAPS_API_KEY);
</script>

See the vite documentation for more.

---

In views

Be careful the environment variables you access in your views because they have access to both private and public environment variables.

For example

<script lang="ts">
  import Document from "./components/document.svelte";

  const public_env = import.meta.env.DB_PASSWORD;
  const private_env = import.meta.env.PUBLIC_GOOGLE_MAPS_API_KEY;
</script>

<Document>
  <section>
    <main>
      <p>{public_env}</p>

      <!-- you've exposed a private environment variable -->
      <p>{private_env}</p>
    </main>

    <script type="module">
      console.log(import.meta.env.PUBLIC_GOOGLE_MAPS_API_KEY);
    </script>
  </section>
</Document>