13 files changed, 115 insertions, 0 deletions
diff --git a/examples/env-vars/.env b/examples/env-vars/.env
new file mode 100644
index 000000000..dd89799f8
--- /dev/null
+++ b/examples/env-vars/.env
@@ -0,0 +1,2 @@
+DB_PASSWORD=foobar
+PUBLIC_SOME_KEY=123
diff --git a/examples/env-vars/.gitignore b/examples/env-vars/.gitignore
new file mode 100644
index 000000000..c82467453
--- /dev/null
+++ b/examples/env-vars/.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/env-vars/.npmrc b/examples/env-vars/.npmrc
new file mode 100644
index 000000000..65922326b
--- /dev/null
+++ b/examples/env-vars/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
diff --git a/examples/env-vars/.stackblitzrc b/examples/env-vars/.stackblitzrc
new file mode 100644
index 000000000..43798ecff
--- /dev/null
+++ b/examples/env-vars/.stackblitzrc
@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}
+\ No newline at end of file
diff --git a/examples/env-vars/README.md b/examples/env-vars/README.md
new file mode 100644
index 000000000..686ccd77f
--- /dev/null
+++ b/examples/env-vars/README.md
@@ -0,0 +1,9 @@
+# Astro Starter Kit: Environment Variables
+
+```
+npm init astro -- --template env-vars
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/env-vars)
+
+This example showcases Astro's support for Environment Variables. Please see Vite's [Env Variables and Modes](https://vitejs.dev/guide/env-and-mode.html) guide for more information.
diff --git a/examples/env-vars/astro.config.mjs b/examples/env-vars/astro.config.mjs
new file mode 100644
index 000000000..67c95c240
--- /dev/null
+++ b/examples/env-vars/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/env-vars/package.json b/examples/env-vars/package.json
new file mode 100644
index 000000000..4a633216d
--- /dev/null
+++ b/examples/env-vars/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@example/env-vars",
+  "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/env-vars/public/favicon.ico b/examples/env-vars/public/favicon.ico
new file mode 100644
index 000000000..578ad458b
--- /dev/null
+++ b/examples/env-vars/public/favicon.ico
diff --git a/examples/env-vars/sandbox.config.json b/examples/env-vars/sandbox.config.json
new file mode 100644
index 000000000..9178af77d
--- /dev/null
+++ b/examples/env-vars/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/env-vars/src/env.d.ts b/examples/env-vars/src/env.d.ts
new file mode 100644
index 000000000..a1befd0f0
--- /dev/null
+++ b/examples/env-vars/src/env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly DB_PASSWORD: string;
+	readonly PUBLIC_SOME_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/examples/env-vars/src/pages/index.astro b/examples/env-vars/src/pages/index.astro
new file mode 100644
index 000000000..0d19b9a46
--- /dev/null
+++ b/examples/env-vars/src/pages/index.astro
@@ -0,0 +1,21 @@
+---
+const { SSR, DB_PASSWORD, PUBLIC_SOME_KEY } = import.meta.env;
+
+// DB_PASSWORD is available because we're running on the server
+console.log({ SSR, DB_PASSWORD });
+
+// PUBLIC_SOME_KEY is available everywhere
+console.log({ SSR, PUBLIC_SOME_KEY });
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Hello, Environment Variables!</h1>
+		<script type="module" src="/src/scripts/client.ts"></script>
+	</body>
+</html>
diff --git a/examples/env-vars/src/scripts/client.ts b/examples/env-vars/src/scripts/client.ts
new file mode 100644
index 000000000..05961d399
--- /dev/null
+++ b/examples/env-vars/src/scripts/client.ts
@@ -0,0 +1,9 @@
+(() => {
+	const { SSR, DB_PASSWORD, PUBLIC_SOME_KEY } = import.meta.env;
+
+	// DB_PASSWORD is NOT available because we're running on the client
+	console.log({ SSR, DB_PASSWORD });
+
+	// PUBLIC_SOME_KEY is available everywhere
+	console.log({ SSR, PUBLIC_SOME_KEY });
+})()
diff --git a/examples/env-vars/tsconfig.json b/examples/env-vars/tsconfig.json
new file mode 100644
index 000000000..c9d2331c8
--- /dev/null
+++ b/examples/env-vars/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "ES2020"
+  }
+}