feat: add SSR adaptor for cloudflare pages functions (#3600)

.changeset/nine-dots-applaud.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/cloudflare': minor
+---
+
+add SSR adaptor for Cloudflare Pages functions

packages/integrations/cloudflare/README.md

@@ -0,0 +1,24 @@
+# @astrojs/cloudflare
+
+An SSR adapter for use with Cloudflare Pages Functions targets. Write your code in Astro/Node and deploy to Cloudflare Pages.
+
+In your astro.config.mjs use:
+
+```js
+import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
+
+export default defineConfig({
+  adapter: cloudflare()
+});
+```
+
+## Enabling Preview
+
+In order for preview to work you must install `wrangler`
+
+```sh
+$ pnpm install wrangler --save-dev
+```
+
+It's then possible to update the preview script in your `package.json` to `"preview": "wrangler pages dev ./dist"`

packages/integrations/cloudflare/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@astrojs/cloudflare",
+  "description": "Deploy your site to cloudflare pages functions",
+  "version": "0.1.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "author": "withastro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro.git",
+    "directory": "packages/integrations/cloudflare"
+  },
+  "bugs": "https://github.com/withastro/astro/issues",
+  "homepage": "https://astro.build",
+  "exports": {
+    ".": "./dist/index.js",
+    "./server.js": "./dist/server.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+    "build:ci": "astro-scripts build \"src/**/*.ts\"",
+    "dev": "astro-scripts dev \"src/**/*.ts\""
+  },
+  "dependencies": {
+    "esbuild": "^0.14.42"
+  },
+  "devDependencies": {
+    "astro": "workspace:*",
+    "astro-scripts": "workspace:*"
+  }
+}

packages/integrations/cloudflare/src/index.ts

@@ -0,0 +1,73 @@
+import type { AstroAdapter, AstroConfig, AstroIntegration, BuildConfig } from 'astro';
+import esbuild from 'esbuild';
+import * as fs from 'fs';
+import { fileURLToPath } from 'url';
+
+export function getAdapter(): AstroAdapter {
+	return {
+		name: '@astrojs/cloudflare',
+		serverEntrypoint: '@astrojs/cloudflare/server.js',
+		exports: ['default'],
+	};
+}
+
+export default function createIntegration(): AstroIntegration {
+	let _config: AstroConfig;
+	let _buildConfig: BuildConfig;
+
+	return {
+		name: '@astrojs/cloudflare',
+		hooks: {
+			'astro:config:done': ({ setAdapter, config }) => {
+				setAdapter(getAdapter());
+				_config = config;
+			},
+			'astro:build:start': ({ buildConfig }) => {
+				_buildConfig = buildConfig;
+				buildConfig.serverEntry = '_worker.js';
+				buildConfig.client = new URL('./static/', _config.outDir);
+				buildConfig.server = new URL('./', _config.outDir);
+			},
+			'astro:build:setup': ({ vite, target }) => {
+				if (target === 'server') {
+					vite.resolve = vite.resolve || {};
+					vite.resolve.alias = vite.resolve.alias || {};
+
+					const aliases = [{ find: 'react-dom/server', replacement: 'react-dom/server.browser' }];
+
+					if (Array.isArray(vite.resolve.alias)) {
+						vite.resolve.alias = [...vite.resolve.alias, ...aliases];
+					} else {
+						for (const alias of aliases) {
+							(vite.resolve.alias as Record<string, string>)[alias.find] = alias.replacement;
+						}
+					}
+
+					vite.ssr = {
+						target: 'webworker',
+						noExternal: true,
+					};
+				}
+			},
+			'astro:build:done': async () => {
+				const entryUrl = new URL(_buildConfig.serverEntry, _buildConfig.server);
+				const pkg = fileURLToPath(entryUrl);
+
+				await esbuild.build({
+					target: 'es2020',
+					platform: 'browser',
+					entryPoints: [pkg],
+					outfile: pkg,
+					allowOverwrite: true,
+					format: 'esm',
+					bundle: true,
+					minify: true,
+				});
+
+				// throw the server folder in the bin
+				const chunksUrl = new URL('./chunks', _buildConfig.server);
+				await fs.promises.rm(chunksUrl, { recursive: true, force: true });
+			},
+		},
+	};
+}

packages/integrations/cloudflare/src/server.ts

@@ -0,0 +1,34 @@
+import './shim.js';
+
+import type { SSRManifest } from 'astro';
+import { App } from 'astro/app';
+
+type Env = {
+	ASSETS: { fetch: (req: Request) => Promise<Response> };
+};
+
+export function createExports(manifest: SSRManifest) {
+	const app = new App(manifest);
+
+	const fetch = async (request: Request, env: Env) => {
+		const { origin, pathname } = new URL(request.url);
+
+		// static assets
+		if (manifest.assets.has(pathname)) {
+			const assetRequest = new Request(`${origin}/static${pathname}`, request);
+			return env.ASSETS.fetch(assetRequest);
+		}
+
+		if (app.match(request)) {
+			return app.render(request);
+		}
+
+		// 404
+		return new Response(null, {
+			status: 404,
+			statusText: 'Not found',
+		});
+	};
+
+	return { default: { fetch } };
+}

packages/integrations/cloudflare/src/shim.ts

@@ -0,0 +1,4 @@
+(globalThis as any).process = {
+	argv: [],
+	env: {},
+};

packages/integrations/cloudflare/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2020",
+    "outDir": "./dist",
+    "target": "ES2020"
+  }
+}

pnpm-lock.yaml

@@ -1664,6 +1664,17 @@ importers:
       mocha: 9.2.2
       uvu: 0.5.3
 
+  packages/integrations/cloudflare:
+    specifiers:
+      astro: workspace:*
+      astro-scripts: workspace:*
+      esbuild: ^0.14.42
+    dependencies:
+      esbuild: 0.14.43
+    devDependencies:
+      astro: link:../../astro
+      astro-scripts: link:../../../scripts
+
   packages/integrations/deno:
     specifiers:
       astro: workspace:*