deploy to cloudflare

apps/vike-app/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.wrangler

apps/vike-app/src/star-wars/@id/+data.ts

@@ -2,9 +2,6 @@
 export { data };
 export type Data = Awaited<ReturnType<typeof data>>;
 
-// The node-fetch package (which only works on the server-side) can be used since
-// this file always runs on the server-side, see https://vike.dev/data#server-side
-import fetch from 'node-fetch';
 import type { MovieDetails } from '../types';
 import type { PageContextServer } from 'vike/types';
 

apps/vike-app/src/star-wars/index/+data.ts

@@ -2,9 +2,6 @@
 export { data };
 export type Data = Awaited<ReturnType<typeof data>>;
 
-// The node-fetch package (which only works on the server-side) can be used since
-// this file always runs on the server-side, see https://vike.dev/data#server-side
-import fetch from 'node-fetch';
 import type { MovieDetails, Movie } from '../types';
 import type { PageContextServer } from 'vike/types';
 

apps/vike-app/worker/index.js

@@ -0,0 +1,31 @@
+import { handleSsr } from './ssr';
+import { handleStaticAssets } from './static-assets';
+
+addEventListener('fetch', (event) => {
+  try {
+    event.respondWith(
+      handleFetchEvent(event).catch((err) => {
+        console.error(err.stack);
+      })
+    );
+  } catch (err) {
+    console.error(err.stack);
+    event.respondWith(new Response('Internal Error', { status: 500 }));
+  }
+});
+
+async function handleFetchEvent(event) {
+  const { url } = event.request;
+  if (!isAssetUrl(url)) {
+    const { headers } = event.request;
+    const response = await handleSsr(url, headers);
+    if (response !== null) return response;
+  }
+  const response = await handleStaticAssets(event);
+  return response;
+}
+
+function isAssetUrl(url) {
+  const { pathname } = new URL(url);
+  return pathname.startsWith('/assets/');
+}

apps/vike-app/worker/ssr.ts

@@ -0,0 +1,20 @@
+import { renderPage } from 'vike/server';
+
+export { handleSsr };
+
+async function handleSsr(url: string, headers: Headers) {
+  const pageContextInit = {
+    urlOriginal: url,
+    headersOriginal: headers,
+    fetch: (...args: Parameters<typeof fetch>) => fetch(...args),
+  };
+  const pageContext = await renderPage(pageContextInit);
+  const { httpResponse } = pageContext;
+  if (!httpResponse) {
+    return null;
+  } else {
+    const { statusCode: status, headers } = httpResponse;
+    const stream = httpResponse.getReadableWebStream();
+    return new Response(stream, { headers, status });
+  }
+}

apps/vike-app/worker/static-assets.js

@@ -0,0 +1,64 @@
+// ********************************************
+// This code was provided by Cloudflare Workers
+// ********************************************
+
+import { getAssetFromKV } from '@cloudflare/kv-asset-handler';
+
+export { handleStaticAssets };
+
+/**
+ * The DEBUG flag will do two things that help during development:
+ * 1. we will skip caching on the edge, which makes it easier to
+ *    debug.
+ * 2. we will return an error message on exception in your Response rather
+ *    than the default 404.html page.
+ */
+const DEBUG = false;
+
+async function handleStaticAssets(event) {
+  let options = {};
+
+  /**
+   * You can add custom logic to how we fetch your assets
+   * by configuring the function `mapRequestToAsset`
+   */
+  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
+
+  try {
+    if (DEBUG) {
+      // customize caching
+      options.cacheControl = {
+        bypassCache: true,
+      };
+    }
+    const page = await getAssetFromKV(event, options);
+
+    // allow headers to be altered
+    const response = new Response(page.body, page);
+
+    response.headers.set('X-XSS-Protection', '1; mode=block');
+    response.headers.set('X-Content-Type-Options', 'nosniff');
+    response.headers.set('X-Frame-Options', 'DENY');
+    response.headers.set('Referrer-Policy', 'unsafe-url');
+    response.headers.set('Feature-Policy', 'none');
+
+    return response;
+  } catch (e) {
+    // if an error is thrown try to serve the asset at 404.html
+    if (!DEBUG) {
+      try {
+        let notFoundResponse = await getAssetFromKV(event, {
+          mapRequestToAsset: (req) =>
+            new Request(`${new URL(req.url).origin}/404.html`, req),
+        });
+
+        return new Response(notFoundResponse.body, {
+          ...notFoundResponse,
+          status: 404,
+        });
+      } catch (e) {}
+    }
+
+    return new Response(e.message || e.toString(), { status: 500 });
+  }
+}

apps/vike-app/wrangler.toml

@@ -0,0 +1,13 @@
+main="./worker/index.js"
+name = "vike_worker-devlaunchers"
+compatibility_flags = ["streams_enable_constructors"]
+
+compatibility_date = "2021-09-29"
+workers_dev = true
+node_compat = true
+
+[site]
+bucket = "./dist/client"
+
+[dev]
+port = 3000