Welcome to the beta! Please open a Github issue if you have feature requests or find any issues.
Guide

#Environment Variables

Zudoku is built on top of Vite and uses their approach for managing environment variables.

In Zudoku, environment variables that are prefixed with PUBLIC_ are available in your application. These variables are inlined during the build process and can be accessed using import.meta.env.

When developing locally, you can create a .env file in the root of your project and add environment-specific variables.

Here is an example of a .env.local file:

PUBLIC_PAGE_TITLE=My Page Title
env

You can access this variable in your application like this:

const pageTitle = import.meta.env.PUBLIC_PAGE_TITLE;
ts

#IntelliSense for TypeScript

By default, Zudoku provides type definitions for import.meta.env in zudoku/client.d.ts. While you can define more custom env variables in .env.[mode] files, you may want to get TypeScript IntelliSense for user-defined env variables that are prefixed with PUBLIC_.

To achieve this, you can create an zudoku-env.d.ts in src directory, then augment ImportMetaEnv like this:

/// <reference types="zudoku/client" />
interface ImportMetaEnv {
readonly PUBLIC_APP_TITLE: string;
// more env variables...
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
typescript

Imports will break type augmentation

If the ImportMetaEnv augmentation does not work, make sure you do not have any import statements in vite-env.d.ts. A helpful explanation can be found on Stackoverflow.