Vite

At DMNO we’re big fans of Vite, and we use it under the hood to parse your .dmno/config.mts files. But our internal instance of Vite is decoupled from yours, so this plugins provides first class support between your use of Vite and DMNO.

This plugin enables:

• automatic loading of dmno resolved config (no dmno run needed)
• build-time replacement of static config items in your code and html template
• ability to use config items within vite.config.* file
• automatic restart of the Vite server on config changes
• config validation during development and build with helpful error messages

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

Bun

bunx 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

Bun

bun 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

Most vanilla Vite setups are for building static front-end apps. Therefore we are mostly concerned with injecting non-sensitive static config into our built code. Use DMNO_PUBLIC_CONFIG instead of process.env or import.meta.env, and you’ll get all the benefits of dmno, and no longer have to rely on special PUBLIC_ prefixes. By default, only static items referenced via DMNO_PUBLIC_CONFIG items will be replaced.

src/some-file.ts

if (DMNO_PUBLIC_CONFIG.SERVICE_X_ENABLED) {
  const client = new ServiceXClient(DMNO_PUBLIC_CONFIG.SERVICE_X_PUBLIC_KEY);
}

If you are building for a server/hybrid environment, you can toggle on the injectSensitiveConfig option to also replace static items accessed via DMNO_CONFIG, which will include sensitive items as well.

vite.config.ts

import { defineConfig } from 'vite'
import { injectDmnoConfigVitePlugin } from '@dmno/vite-integration';

export default defineConfig({
  plugins: [
    injectDmnoConfigVitePlugin({ injectSensitiveConfig: true })
  ],
  //...

Static config replacement

Only static items will be replaced at build time. The default handling is controlled by a service-level dynamicConfig setting, and can be overridden using the dynamic property on each item. See the dynamic config guide for more info.

Using env vars within vite.config.*

It’s often useful to be able to access env vars in 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.

Using config within other scripts

Even in a static front-end project, you may have other scripts in your project that rely on sensitive config.

You can use dmno run to inject resolved config into other scripts as regular environment vars.

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 and server-side code

Unlike our Astro and Remix integrations, if you are using vanilla Vite to do SSR or build backend code, we cannot automatically infer the right way to inject dmno. In this case you may need to include an additional import that initializes the DMNO globals and security features, and run your script via dmno run - similar to the Node.js integration.

In fact, if you don’t need build-time replacements or dev server reloading, you may not need this plugin at all.

src/main.ts

import 'dmno/auto-inject-globals'; // should be imported first!

// rest of your code...

package.json

{
  // ...
  "scripts": {
    "start": "dmno run -- node dist/main.js",
  },