3 files changed, 20 insertions, 15 deletions
diff --git a/examples/non-html-pages/src/pages/about.json.ts b/examples/non-html-pages/src/pages/about.json.ts
new file mode 100644
index 000000000..af61847f3
--- /dev/null
+++ b/examples/non-html-pages/src/pages/about.json.ts
@@ -0,0 +1,11 @@
+// Returns the file body for this non-HTML file.
+// The content type is based off of the extension in the filename,
+// in this case: about.json.
+export async function get() {
+	return {
+		body: JSON.stringify({
+			name: 'Astro',
+			url: 'https://astro.build/',
+		}),
+	};
+}
diff --git a/examples/non-html-pages/src/pages/company.json.ts b/examples/non-html-pages/src/pages/company.json.ts
deleted file mode 100644
index c931c0e15..000000000
--- a/examples/non-html-pages/src/pages/company.json.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export async function get() {
-	return {
-		body: JSON.stringify({
-			name: 'Astro',
-			url: 'https://astro.build/',
-		}),
-	};
-}
diff --git a/examples/non-html-pages/src/pages/index.astro b/examples/non-html-pages/src/pages/index.astro
index af1ed4326..accde929c 100644
--- a/examples/non-html-pages/src/pages/index.astro
+++ b/examples/non-html-pages/src/pages/index.astro
@@ -1,8 +1,4 @@
----
-const url = `${Astro.request.canonicalURL.origin}/company.json`;
-const response = await fetch(url);
-const data = await response.json();
----
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -10,7 +6,13 @@ const data = await response.json();
 		<title>Astro</title>
 	</head>
 	<body>
-		<h1>Astro</h1>
-		<div>{JSON.stringify(data)}</div>
+		<h1 id="result">Loading...</h1>
+		<script type="module">
+			// Non-HTML files will be included in your final build, so you
+			// can fetch them directly in the browser.
+			const response = await fetch(`/about.json`);
+			const data = await response.json();
+			document.getElementById('result').innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
+		</script>
 	</body>
 </html>