Sets import.meta.env.BASE_URL correctly in dev (#3955)

.changeset/strong-squids-hide.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Set import.meta.env.BASE_URL in dev mode

packages/astro/src/vite-plugin-env/index.ts

@@ -79,6 +79,7 @@ export default function envVitePlugin({
 				if (privateEnv) {
 					privateEnv.SITE = astroConfig.site ? `'${astroConfig.site}'` : 'undefined';
 					privateEnv.SSR = JSON.stringify(true);
+					privateEnv.BASE_URL = astroConfig.base ? `'${astroConfig.base}'` : undefined;
 					const entries = Object.entries(privateEnv).map(([key, value]) => [
 						`import.meta.env.${key}`,
 						value,
@@ -88,6 +89,7 @@ export default function envVitePlugin({
 					replacements = Object.assign(replacements, {
 						'import.meta.env.SITE': astroConfig.site ? `'${astroConfig.site}'` : 'undefined',
 						'import.meta.env.SSR': JSON.stringify(true),
+						'import.meta.env.BASE_URL': astroConfig.base ? `'${astroConfig.base}'` : undefined,
 						// This catches destructed `import.meta.env` calls,
 						// BUT we only want to inject private keys referenced in the file.
 						// We overwrite this value on a per-file basis.

packages/astro/test/astro-envs.test.js

@@ -1,14 +1,19 @@
 import { expect } from 'chai';
 import { loadFixture } from './test-utils.js';
+import * as cheerio from 'cheerio';
 
 describe('Environment Variables', () => {
+	/** @type {import('./test-utils').Fixture} */
 	let fixture;
 
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/astro-envs/',
 		});
+	});
 
+	describe('Build', () => {
+		before(async () => {
 			await fixture.build();
 		});
 	
@@ -41,6 +46,11 @@ describe('Environment Variables', () => {
 			expect(indexHtml).to.include('http://example.com');
 		});
 	
+		it('does render builtin BASE_URL env', async () => {
+			let indexHtml = await fixture.readFile('/index.html');
+			expect(indexHtml).to.include('/blog');
+		});
+	
 		it('includes public env in client-side JS', async () => {
 			let dirs = await fixture.readdir('/');
 			let found = false;
@@ -82,4 +92,32 @@ describe('Environment Variables', () => {
 	
 			expect(found).to.equal(false, 'found the private env variable in the JS build');
 		});
+	});
+
+	describe('Development', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('does render builtin BASE_URL env', async () => {
+			let res = await fixture.fetch('/blog/');
+			expect(res.status).to.equal(200);
+			let indexHtml = await res.text();
+			let $ = cheerio.load(indexHtml);
+			expect($('#base-url').text()).to.equal('/blog/');
+		});
+
+		it('does render destructured builtin SITE env', async () => {
+			let res = await fixture.fetch('/blog/destructured/');
+			expect(res.status).to.equal(200);
+			let indexHtml = await res.text();
+			let $ = cheerio.load(indexHtml);
+			expect($('#base-url').text()).to.equal('/blog/');
+		});
+	});
 });

packages/astro/test/fixtures/astro-envs/astro.config.mjs

@@ -4,5 +4,6 @@ import vue from '@astrojs/vue';
 // https://astro.build/config
 export default defineConfig({
 	site: 'http://example.com',
+	base: '/blog',
 	integrations: [vue()],
 });

packages/astro/test/fixtures/astro-envs/src/components/Client.vue

@@ -10,6 +10,7 @@ export default {
     return {
       PUBLIC_PLACE: import.meta.env.PUBLIC_PLACE,
 			SECRET_PLACE: import.meta.env.SECRET_PLACE,
+			BASE_URL: import.meta.env.BASE_URL,
     };
   },
 };

packages/astro/test/fixtures/astro-envs/src/pages/destructured.astro

@@ -4,3 +4,4 @@ const { PUBLIC_PLACE, SECRET_PLACE, SITE } = import.meta.env;
 <environment-variable>{PUBLIC_PLACE}</environment-variable>
 <environment-variable>{SECRET_PLACE}</environment-variable>
 <environment-variable>{SITE}</environment-variable>
+<environment-variable id="base-url">{import.meta.env.BASE_URL}</environment-variable>

packages/astro/test/fixtures/astro-envs/src/pages/index.astro

@@ -4,4 +4,5 @@ import Client from '../components/Client.vue';
 <environment-variable>{import.meta.env.PUBLIC_PLACE}</environment-variable>
 <environment-variable>{import.meta.env.SECRET_PLACE}</environment-variable>
 <environment-variable>{import.meta.env.SITE}</environment-variable>
+<environment-variable id="base-url">{import.meta.env.BASE_URL}</environment-variable>
 <Client client:load />