Add Non-HTML Pages example (#2637)

* Add Non-HTML Pages example

* Rename dir non-html-example to non-html-pages

* Update name to non-html-pages in package.json

11 files changed, 136 insertions, 0 deletions

diff --git a/examples/non-html-pages/.gitignore b/examples/non-html-pages/.gitignore
new file mode 100644
index 000000000..c82467453
--- /dev/null
+++ b/examples/non-html-pages/.gitignore
@@ -0,0 +1,17 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/non-html-pages/.npmrc b/examples/non-html-pages/.npmrc
new file mode 100644
index 000000000..65922326b
--- /dev/null
+++ b/examples/non-html-pages/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
diff --git a/examples/non-html-pages/.stackblitzrc b/examples/non-html-pages/.stackblitzrc
new file mode 100644
index 000000000..43798ecff
--- /dev/null
+++ b/examples/non-html-pages/.stackblitzrc
@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}
\ No newline at end of file
diff --git a/examples/non-html-pages/README.md b/examples/non-html-pages/README.md
new file mode 100644
index 000000000..354f95be3
--- /dev/null
+++ b/examples/non-html-pages/README.md
@@ -0,0 +1,48 @@
+# Astro Starter Kit: Non-HTML Pages
+
+Documentation for "Non-HTML Pages":
+
+https://docs.astro.build/en/core-concepts/astro-pages/#non-html-pages
+
+```
+npm init astro -- --template non-html-pages
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+│       └── company.json.ts
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command           | Action                                       |
+|:----------------  |:-------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).
diff --git a/examples/non-html-pages/astro.config.mjs b/examples/non-html-pages/astro.config.mjs
new file mode 100644
index 000000000..67c95c240
--- /dev/null
+++ b/examples/non-html-pages/astro.config.mjs
@@ -0,0 +1,8 @@
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+	// Comment out "renderers: []" to enable Astro's default component support.
+	renderers: [],
+});
diff --git a/examples/non-html-pages/package.json b/examples/non-html-pages/package.json
new file mode 100644
index 000000000..dd789703d
--- /dev/null
+++ b/examples/non-html-pages/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@example/non-html-pages",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^0.23.0-next.10"
+  }
+}
diff --git a/examples/non-html-pages/public/favicon.ico b/examples/non-html-pages/public/favicon.ico
new file mode 100644
index 000000000..578ad458b
--- /dev/null
+++ b/examples/non-html-pages/public/favicon.ico
diff --git a/examples/non-html-pages/sandbox.config.json b/examples/non-html-pages/sandbox.config.json
new file mode 100644
index 000000000..9178af77d
--- /dev/null
+++ b/examples/non-html-pages/sandbox.config.json
@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}
diff --git a/examples/non-html-pages/src/pages/company.json.ts b/examples/non-html-pages/src/pages/company.json.ts
new file mode 100644
index 000000000..ecff4458e
--- /dev/null
+++ b/examples/non-html-pages/src/pages/company.json.ts
@@ -0,0 +1,9 @@
+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
new file mode 100644
index 000000000..af1ed4326
--- /dev/null
+++ b/examples/non-html-pages/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+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" />
+		<meta name="viewport" content="width=device-width" />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+		<div>{JSON.stringify(data)}</div>
+	</body>
+</html>
diff --git a/examples/non-html-pages/tsconfig.json b/examples/non-html-pages/tsconfig.json
new file mode 100644
index 000000000..8e881cf9c
--- /dev/null
+++ b/examples/non-html-pages/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node"
+  }
+}