Fix building static sites with Astro DB (#10655)

* Fix building static sites with Astro DB

* Adding a changeset

* Try a different port range

.changeset/serious-elephants-push.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/db": patch
+---
+
+Pass through appToken on static sites with Astro DB

packages/db/src/core/cli/commands/execute/index.ts

@@ -45,6 +45,7 @@ export async function cmd({
 			tables: dbConfig.tables ?? {},
 			appToken: appToken.token,
 			isBuild: false,
+			output: 'server',
 		});
 	} else {
 		virtualModContents = getLocalVirtualModContents({

packages/db/src/core/integration/index.ts

@@ -59,6 +59,7 @@ function astroDBIntegration(): AstroIntegration {
 						tables,
 						root: config.root,
 						srcDir: config.srcDir,
+						output: config.output,
 					});
 				} else {
 					dbPlugin = vitePluginDb({
@@ -67,6 +68,7 @@ function astroDBIntegration(): AstroIntegration {
 						seedFiles,
 						root: config.root,
 						srcDir: config.srcDir,
+						output: config.output,
 					});
 				}
 

packages/db/src/core/integration/vite-plugin-db.ts

@@ -4,6 +4,7 @@ import { SEED_DEV_FILE_NAME } from '../../runtime/queries.js';
 import { DB_PATH, RUNTIME_CONFIG_IMPORT, RUNTIME_IMPORT, VIRTUAL_MODULE_ID } from '../consts.js';
 import type { DBTables } from '../types.js';
 import { type VitePlugin, getDbDirectoryUrl, getRemoteDatabaseUrl } from '../utils.js';
+import type { AstroConfig } from 'astro';
 
 const WITH_SEED_VIRTUAL_MODULE_ID = 'astro:db:seed';
 
@@ -26,13 +27,15 @@ type VitePluginDBParams =
 			seedFiles: LateSeedFiles;
 			srcDir: URL;
 			root: URL;
+			output: AstroConfig['output'];
 	  }
 	| {
 			connectToStudio: true;
 			tables: LateTables;
 			appToken: string;
 			srcDir: URL;
 			root: URL;
+			output: AstroConfig['output'];
 	  };
 
 export function vitePluginDb(params: VitePluginDBParams): VitePlugin {
@@ -66,6 +69,7 @@ export function vitePluginDb(params: VitePluginDBParams): VitePlugin {
 					appToken: params.appToken,
 					tables: params.tables.get(),
 					isBuild: command === 'build',
+					output: params.output,
 				});
 			}
 			return getLocalVirtualModContents({
@@ -141,15 +145,22 @@ export function getStudioVirtualModContents({
 	tables,
 	appToken,
 	isBuild,
+	output,
 }: {
 	tables: DBTables;
 	appToken: string;
 	isBuild: boolean;
+	output: AstroConfig['output'];
 }) {
 	function appTokenArg() {
 		if (isBuild) {
-			// In production build, always read the runtime environment variable.
-			return 'process.env.ASTRO_STUDIO_APP_TOKEN';
+			if(output === 'server') {
+				// In production build, always read the runtime environment variable.
+				return 'process.env.ASTRO_STUDIO_APP_TOKEN';
+			} else {
+				// Static mode or prerendering needs the local app token.
+				return `process.env.ASTRO_STUDIO_APP_TOKEN ?? ${JSON.stringify(appToken)}`;
+			}
 		} else {
 			return JSON.stringify(appToken);
 		}

packages/db/test/fixtures/static-remote/astro.config.ts

@@ -0,0 +1,6 @@
+import astroDb from '@astrojs/db';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	integrations: [astroDb()],
+});

packages/db/test/fixtures/static-remote/db/config.ts

@@ -0,0 +1,12 @@
+import { column, defineDb, defineTable } from 'astro:db';
+
+const User = defineTable({
+	columns: {
+		id: column.number({ primaryKey: true }),
+		name: column.text(),
+	},
+});
+
+export default defineDb({
+	tables: { User },
+});

packages/db/test/fixtures/static-remote/db/seed.ts

@@ -0,0 +1,9 @@
+import { User, db } from 'astro:db';
+
+export default async function () {
+	await db.insert(User).values([
+		{
+			name: 'Houston'
+		}
+	]);
+}

packages/db/test/fixtures/static-remote/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@test/db-static-remote",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@astrojs/db": "workspace:*",
+    "astro": "workspace:*"
+  }
+}

packages/db/test/fixtures/static-remote/src/pages/index.astro

@@ -0,0 +1,20 @@
+---
+import { User, db } from 'astro:db';
+
+const users = await db.select().from(User);
+---
+<html>
+	<head>
+		<title>Testing</title>
+	</head>
+	<body>
+		<h1>Testing</h1>
+
+		<h2>Users</h2>
+		<ul>
+			{users.map(user => (
+				<li>{user.name}</li>
+			))}
+		</ul>
+	</body>
+</html>

packages/db/test/static-remote.test.js

@@ -0,0 +1,34 @@
+import { expect } from 'chai';
+import { load as cheerioLoad } from 'cheerio';
+import { loadFixture } from '../../astro/test/test-utils.js';
+import { setupRemoteDbServer } from './test-utils.js';
+
+describe('astro:db', () => {
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/static-remote/', import.meta.url),
+			output: 'static',
+		});
+	});
+
+	describe('static build --remote', () => {
+		let remoteDbServer;
+
+		before(async () => {
+			remoteDbServer = await setupRemoteDbServer(fixture.config);
+			await fixture.build();
+		});
+
+		after(async () => {
+			await remoteDbServer?.stop();
+		});
+
+		it('Can render page', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerioLoad(html);
+
+			expect($('li').length).to.equal(1);
+		});
+	});
+});

packages/db/test/test-utils.js

@@ -12,7 +12,7 @@ const singleQuerySchema = z.object({
 
 const querySchema = singleQuerySchema.or(z.array(singleQuerySchema));
 
-let portIncrementer = 8081;
+let portIncrementer = 8030;
 
 /**
  * @param {import('astro').AstroConfig} astroConfig