Skip to content
DMNO
🚧 DMNO is still in beta! Use with caution!
✨ If you've tried DMNO or looked through the docs, let us know what you think!

Vite

At DMNO we’re big fans of Vite, which is why we offer first class integration between Vite and DMNO.

Initialize your Vite integration

Using dmno init we will automatically detect that you are using Vite and install the necessary packages and configuration for you.

Terminal window
npx dmno init

This will create a .dmno directory in the root of your project with a config.mts file.

Skip to Configure… once this is complete.

Manual Setup

If you prefer, you can install dmno itself and the vite-integration package manually:

Terminal window
npm add @dmno/vite-integration dmno

Configure the dmno vite plugin

Update your vite.config.ts - import the plugin, and add to defineConfig:

vite.config.ts
import { injectDmnoConfigVitePlugin } from '@dmno/vite-integration';
export default {
// ...
plugins: [injectDmnoConfigVitePlugin()],
};

Configure your environment variables

dmno init will scaffold out the schema in your config.mts files based on your existing .env files. See our Schema Guide for the specifics of how to author additional updates to your DMNO schema.

Accessing config

Now in your application code you’ll have access to a global object with all of your public config items (i.e., those which aren’t marked sensitive) called DMNO_PUBLIC_CONFIG.

const publicItem = DMNO_PUBLIC_CONFIG.MY_ITEM;

And in any server code like your vite.config.ts file you can access all of your config via DMNO_CONFIG.

const secretItem = DMNO_CONFIG.MY_SECRET_ITEM;

HTML Env Replacement

Vite natively supports injecting env vars into HTML files using a special syntax like %SOME_VAR%.

This plugin injects additional replacements for strings like %DMNO_PUBLIC_CONFIG.SOME_VAR%.

Note that unlike the native functionality which does not replace missing/non-existant items, we will try to replace all items, and will throw helpful errors if something goes wrong.

SSR + dynamic config

Currently our vite integration assumes you are doing static builds, and not SSR. Therefore all config items are treated as “static”.

Deeper support for ssr should be coming soon!

Common recipes

Using env vars within vite.config.*

It’s often useful to be able to access configuration / env vars within your vite config. Without DMNO, it’s a bit awkward, but DMNO makes it dead simple - in fact it’s already available! Just reference config vars via DMNO_CONFIG.SOME_ITEM like you do everywhere else.

In many vite projects, your vite.config.* file is not included in the same tsconfig as the rest of your code. If this is the case and you are seeing type errors about DMNO_CONFIG not existing, you can add a triple slash reference to the generated types. For example:

vite.config.ts
/// <reference types="./.dmno/.typegen/global.d.ts" />
import { defineConfig } from 'vite';
// ...

See our TypeScript guide for more details.