Add "--viteMode" CLI flag for dev and build command

.changeset/bright-zebras-end.md

@@ -0,0 +1,8 @@
+---
+"astro": minor
+"@astrojs/vercel": patch
+---
+
+Adds a new `--viteMode <mode>` CLI flag for `dev` and `build` commands
+to allow you to override the default `development` and `production` modes.
+This is useful for custom `import.meta.env.MODE` values and loading different `.env.[mode]` files.

packages/astro/src/@types/astro.ts

@@ -1992,6 +1992,13 @@ export interface AstroInlineOnlyConfig {
 	 * The mode used when building your site to generate either "development" or "production" code.
 	 */
 	mode?: RuntimeMode;
+	/**
+	 * The mode used by Vite. It also defines `import.meta.env.MODE` value.
+	 * If it is unset the default value will be `'development'` for dev command and `'production'` for build command.
+	 *
+	 * @see [Vite mode documentation](https://vitejs.dev/guide/env-and-mode#modes)
+	 */
+	viteMode?: string;
 	/**
 	 * The logging level to filter messages logged by Astro.
 	 * - "debug": Log everything, including noisy debugging diagnostics.

packages/astro/src/cli/build/index.ts

@@ -15,6 +15,7 @@ export async function build({ flags }: BuildOptions) {
 			tables: {
 				Flags: [
 					['--outDir <directory>', `Specify the output directory for the build.`],
+					['--viteMode <mode>', `Specify mode for Vite config.`],
 					['--help (-h)', 'See all available flags.'],
 				],
 			},

packages/astro/src/cli/dev/index.ts

@@ -19,6 +19,7 @@ export async function dev({ flags }: DevOptions) {
 					['--host', `Listen on all addresses, including LAN and public addresses.`],
 					['--host <custom-address>', `Expose on a network IP address at <custom-address>`],
 					['--open', 'Automatically open the app in the browser on server start'],
+					['--viteMode <mode>', `Specify mode for Vite config.`],
 					['--help (-h)', 'See all available flags.'],
 				],
 			},

packages/astro/src/cli/flags.ts

@@ -8,6 +8,7 @@ export function flagsToAstroInlineConfig(flags: Flags): AstroInlineConfig {
 		// Inline-only configs
 		configFile: typeof flags.config === 'string' ? flags.config : undefined,
 		mode: typeof flags.mode === 'string' ? (flags.mode as AstroInlineConfig['mode']) : undefined,
+		viteMode: typeof flags.viteMode === 'string' ? flags.viteMode : undefined,
 		logLevel: flags.verbose ? 'debug' : flags.silent ? 'silent' : undefined,
 
 		// Astro user configs

packages/astro/src/content/vite-plugin-content-virtual-mod.ts

@@ -46,7 +46,7 @@ export function astroContentVirtualModPlugin({
 		name: 'astro-content-virtual-mod-plugin',
 		enforce: 'pre',
 		configResolved(config) {
-			IS_DEV = config.mode === 'development';
+			IS_DEV = config.command !== 'build';
 		},
 		resolveId(id) {
 			if (id === VIRTUAL_MODULE_ID) {

packages/astro/src/core/build/index.ts

@@ -83,19 +83,22 @@ export default async function build(
 		...options,
 		logger,
 		mode: inlineConfig.mode,
+		viteMode: inlineConfig.viteMode,
 	});
 	await builder.run();
 }
 
 interface AstroBuilderOptions extends BuildOptions {
 	logger: Logger;
 	mode?: RuntimeMode;
+	viteMode?: string
 }
 
 class AstroBuilder {
 	private settings: AstroSettings;
 	private logger: Logger;
 	private mode: RuntimeMode = 'production';
+	private viteMode = 'production'
 	private origin: string;
 	private manifest: ManifestData;
 	private timer: Record<string, number>;
@@ -105,6 +108,9 @@ class AstroBuilder {
 		if (options.mode) {
 			this.mode = options.mode;
 		}
+		if (options.viteMode) {
+			this.viteMode = options.viteMode;
+		}
 		this.settings = settings;
 		this.logger = options.logger;
 		this.teardownCompiler = options.teardownCompiler ?? true;
@@ -134,7 +140,7 @@ class AstroBuilder {
 
 		const viteConfig = await createVite(
 			{
-				mode: this.mode,
+				mode: this.viteMode,
 				server: {
 					hmr: false,
 					middlewareMode: true,

packages/astro/src/core/config/config.ts

@@ -165,12 +165,13 @@ function splitInlineConfig(inlineConfig: AstroInlineConfig): {
 	inlineUserConfig: AstroUserConfig;
 	inlineOnlyConfig: AstroInlineOnlyConfig;
 } {
-	const { configFile, mode, logLevel, ...inlineUserConfig } = inlineConfig;
+	const { configFile, mode, viteMode, logLevel, ...inlineUserConfig } = inlineConfig;
 	return {
 		inlineUserConfig,
 		inlineOnlyConfig: {
 			configFile,
 			mode,
+			viteMode,
 			logLevel,
 		},
 	};

packages/astro/src/core/dev/container.ts

@@ -68,7 +68,7 @@ export async function createContainer({
 
 	const viteConfig = await createVite(
 		{
-			mode: 'development',
+			mode: inlineConfig?.viteMode || 'development',
 			server: { host, headers, open },
 			optimizeDeps: {
 				include: rendererClientEntries,

packages/astro/test/fixtures/set-html/src/pages/fetch.astro

@@ -1,6 +1,6 @@
 ---
 // This is a dev only test
-const mode = import.meta.env.MODE;
+const isDev = import.meta.env.DEV;
 ---
 <html>
 	<head>
@@ -9,7 +9,7 @@ const mode = import.meta.env.MODE;
 	<body>
 		<h1>Testing</h1>
 		<div id="fetch" set:html={
-			mode === 'development' ?
+			isDev ?
 				// @ts-ignore
 				TEST_FETCH(fetch, '/test.html') :
 				'build mode'

packages/astro/test/units/dev/dev.test.js

@@ -273,4 +273,22 @@ describe('dev container', () => {
 			assert.equal(r.res.statusCode, 200);
 		});
 	});
+
+	it('overrides Vite mode when --viteMode flag is specified', async () => {
+		await runInContainer({ inlineConfig: { viteMode: 'production' } }, (container) => {
+			assert.equal(container.viteServer.config.mode, 'production');
+		});
+		await runInContainer({ inlineConfig: { viteMode: 'development' } }, (container) => {
+			assert.equal(container.viteServer.config.mode, 'development');
+		});
+		await runInContainer({ inlineConfig: { viteMode: 'staging' } }, (container) => {
+			assert.equal(container.viteServer.config.mode, 'staging');
+		});
+	});
+
+	it('uses "development" as Vite mode when --viteMode flag is not specified', async () => {
+		await runInContainer({}, (container) => {
+			assert.equal(container.viteServer.config.mode, 'development');
+		});
+	});
 });

packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx

@@ -4,7 +4,7 @@ export default function() {
 	let player = undefined;
 	// This is tested in dev mode, so make it work during the build to prevent
 	// breaking other tests.
-	if(import.meta.env.MODE === 'production') {
+	if(import.meta.env.PROD) {
 		player = {};
 	}
 	const [] = useState(player.currentTime || null);

packages/integrations/vercel/src/speed-insights.ts

@@ -58,8 +58,8 @@ function collectWebVitals() {
 	}
 }
 
-const mode = (import.meta as any).env.MODE as 'development' | 'production';
+const isProduction = (import.meta as any).env.PROD;
 
-if (mode === 'production') {
+if (isProduction) {
 	collectWebVitals();
 }