Astro on Cloudflare Workers – DEV Community

It is Platform Week at Cloudflare, and with that, comes all type of goodies, like for instance the discharge of Wrangler 2.0 beta. All in favour of what’s new? Sunil Pai wrote all about it right here: 10 things I love about Wrangler v2.0.

Moreover, Astro not too long ago launched experimental assist for server-side rendering Astro apps.

What higher time to mix the 2, leap on the hype practice, and create a Cloudflare Employee adapter for Astro. Whereas trying into creating this adapter, I admittedly received barely sidetracked; If I can create an Astro adapter for Cloudflare Staff, an setting that is so just like Service employees, why cannot I run Astro in a Service Employee? 🤯. Because it seems, you completely can, and I wrote all about my loopy experimentation in that space right here, are you excited for a streaming future through SWSR (Service Employee Facet Rendering)? I do know I’m!



Getting began

First up, scaffold your Astro challenge with:

npm init astro@newest
Enter fullscreen mode

Exit fullscreen mode

Subsequent up, now we have to put in some dependencies; the brand new wrangler CLI, and the Cloudflare Employee adapter:

npm set up -D wrangler
npm set up -S astro-service-worker
Enter fullscreen mode

Exit fullscreen mode

As soon as put in, add the adapter to your astro.config.mjs:

import { defineConfig } from 'astro/config';
import employee, { cloudflare } from 'astro-service-worker/adapter';

export default defineConfig({
  adapter: employee(cloudflare)
});
Enter fullscreen mode

Exit fullscreen mode

Now you can construct your challenge by operating:

npm run construct
Enter fullscreen mode

Exit fullscreen mode

When you do not but have a wrangler.toml file, the adapter will create one for you through the construct. When you do have one, be sure you level the foremost and bucket properties to the proper places, here is an instance of what they need to seem like:

title = "my-project"
foremost = "dist/employee/index.js" # The adapter will output the employee on this location
compatibility_date = "2022-05-10"

[site]
bucket = './dist' # The adapter will output static property on this folder
Enter fullscreen mode

Exit fullscreen mode

When you’re all setup, now you can deploy your app:

wrangler publish
Enter fullscreen mode

Exit fullscreen mode



Staff All over the place

You’ll have seen that the as a substitute of transport a cloudflare() adapter, astro-service-worker as a substitute ships a employee() adapter that takes a preset object. Many alternative suppliers and organisations appear to be embracing worker-like environments, and have even joined forces to arrange a Community Group for web-interoperable JavaScript runtimes, and even Ryan Dahl (creater of Node/Deno) not too long ago blogged a couple of comparable future: JavaScript containers.

This sort of standardization is nice, and the employee() adapter is constructed to be suitable with a number of worker-like environments. In truth; it makes use of the identical service employee entrypoint because the client-side Service Employee integration, which is meant to run within the browser.



Shim Surroundings Particular Particulars

Since most of those environments assist the identical fundamentals in the best way of occasion dealing with, supporting API’s like fetch, and Response, and so forth, it is smart to make the employee() adapter modular. Nonetheless, there should be environment-specific particulars and variations between suppliers, like for instance the best way static information are dealt with, or polyfilling.

You’ll be able to maintain this stuff in a so-called preset object. A preset object takes an elective shim array, which is an array of module specifiers pointing to environment-specific polyfills/shims, and an elective initConfig operate that you should use to setup environment-specific configuration information, like for instance a wrangler.toml within the case of Cloudflare.

For instance the cloudflare preset comprises the next shim:
cloudflare/static-assets.js:

import { getAssetFromKV } from '@cloudflare/kv-asset-handler';

self.MIDDLEWARE.push(async (occasion) => {
  strive {
    return await getAssetFromKV(occasion);
  } catch {}
});
Enter fullscreen mode

Exit fullscreen mode

That is all of the cloudflare-specific logic required!

When you’re inquisitive about supporting your individual worker-like setting, you may simply create a preset and supply your environment-specific code like so:

const myEnvironment = {
  /** Polyfill setting particular dealing with */
  shim: ['my-environment/static-assets.js'],
  /** Scaffold setting particular configuration file, like for instance `wrangler.toml` */
  initConfig: (dir) => {}
}

employee(myEnvironment);
Enter fullscreen mode

Exit fullscreen mode

For extra data, see the documentation.



Offline

You may also mix this integration and go full-worker, by including the serviceWorker integration:

import { defineConfig } from 'astro/config';
import employee, { cloudflare } from 'astro-service-worker/adapter';
import serviceWorker from 'astro-service-worker';

export default defineConfig({
  adapter: employee(cloudflare),
  integrations:[
    serviceWorker()
  ]
});
Enter fullscreen mode

Exit fullscreen mode

And your Astro SSR app will now initially get rendered by a Cloudflare Employee, after which fully in a Service Employee!

Add a Comment

Your email address will not be published. Required fields are marked *