With vite, how do I set the mode to use?

[emilbonnek]

Summary

Background

Vite has the idea of 'modes', i.e the .env.XYZ to load in on top of the base .env.
In Vite we can run vite build --mode production-internal and that will load in .env.production-internal for example.
Modes are distinct from NODE_ENV and they can be whatever custom values are needed, for example Vitest sets mode to 'test' or 'benchmark'.
https://vitejs.dev/guide/env-and-mode

Question

I can't figure out how I set the Vite mode to use in Storybook, maybe it is always just uses 'development' or 'production' depending on the NODE_ENV?

https://storybook.js.org/docs/configure/environment-variables

You can also use specific files for specific modes. Add a .env.development or .env.production to apply different values to your environment variables.

I had hoped there would just be a --mode cli parameter when executing Storybook via the cli (dev or build), similar to Vite itself and other tooling has it. vite-bundle-visualizer1 is also a cli executable that loads the Vite configuration and it has a similar thing.

So is this possible at the moment? Or is it something the team is looking to add in the future?

Additional information

No response

Create a reproduction

No response

[OoDeLally]

// .storybook/main.ts
const config: StorybookConfig = {
  // ...
  async viteFinal(config) {
    const { mergeConfig } = await import('vite');
    return mergeConfig(config, {
      mode: 'whatever-mode-you-want',
    });
  },
};

This works for me. Make sure you empty your browser's cache, so it doesnt reuse the non-functional files when you refresh the storybook page.

[emilbonnek]

// .storybook/main.ts
const config: StorybookConfig = {
  // ...
  async viteFinal(config) {
    const { mergeConfig } = await import('vite');
    return mergeConfig(config, {
      mode: 'whatever-mode-you-want',
    });
  },
};

This works for me. Make sure you empty your browser's cache, so it doesnt reuse the non-functional files when you refresh the storybook page.

Hmm interesting, this doesn't actually work for me. I maybe should specify that I am relying on the mode in the vite config itself, and not just in the application code. I am testing like this:

import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  console.log(mode);
  // ..
})

With the output being development, when I expected whatever-mode-you-want.

[Marklb]

I am not very familiar with vite, but I did help someone debug a problem with a different configuration. From what I remember, a vite.config.ts will get called before the viteFinal function in .storybook/main.ts.

So, if you did the opposite order then the config would print the mode.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  mode: 'whatever-mode-you-want',
  plugins: [react()],
})

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  ...,
  async viteFinal(config) {
    console.log(config.mode);
    return config;
  },
};
export default config;

Example that I used to test my assumption: https://stackblitz.com/edit/github-qpsnt7