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.

npm

npx dmno init

pnpm

pnpm dlx dmno init

Yarn

yarn dlx 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:

npm

npm add @dmno/vite-integration dmno

pnpm

pnpm add @dmno/vite-integration dmno

Yarn

yarn 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()],
};

Ordering

You should import the @dmno/vite-integration first because it loads your config and re-injects it into process.env, just in case any other plugins are looking for something there.

The order of injectDmnoConfigVitePlugin() in the plugins does not matter.

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;

FYI

Under the hood, for your client code, vite replaces the references to your config with actual values at build time.

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.

HTML comments

Note that replacements anywhere in the file, including HTML comments, are still attempted and can cause errors. For example <!-- %DMNO_PUBLIC_CONFIG.BAD_ITEM_KEY% --> will still fail!

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.