Astro JS - Cloudflare Adapter

---

---

What is Cloudflare?

Cloudflare is a web security platform that provides CDN services, DDoS mitigation, and other security features for websites. The platform helps to optimize website performance, remain secure, and handle high traffic efficiently.

Key Features of Cloudflare

Cloudflare is used to protect and optimize websites. Some of the key features of Cloudflare are:

• DDoS protection: Cloudflare provides protection against denial-of-service attacks by filtering malicious traffic form legitimate traffic.
• CDN services: Cloudflare offers a global content delivery network (CDN) which helps to cache content closer to the user. This will will reduce latency and improve website performance.
• Serverless Computing: Cloudflare Workers is a serverless computing platform that allows developers to run code at the edge of the network.
• SSL/TLS encryption: Cloudflare provides free SSL/TLS certificates to encrypt data and secure website.

Cloudflare Adapter For Astro

The Cloudflare adapter in astro enhances the Astro build process and prepare the project for deployment through Cloudflare. The HTML pages and on-demand rendered routes will be deployed directly to Cloudflare. The astro will generate a Cloudflare Worker script that will serve the Astro application from the edge of the network. Now let's see how to set up Cloudflare adapter in Astro.

Step 1: Install Cloudflare Adapter

First, you need to install the Cloudflare adapter for Astro. You can do this using the following command:

>> npm install @astrojs/cloudflare

Step 2: Configure Cloudflare in Astro

Next step is to apply the integration to your astro.config.mjs. Add the adapter and your desired on-demand rendering mode to your astro.config.mjs file:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
    output: 'server',
    adapter: cloudflare(),
});

Cloudflare Adapter Options

The cloudflare adapter options are used inside the cloudflare() function of astro.config.mjs file. Each option is an object that can be passed to the cloudflare() function. The available options are:

The imageService Option

The imageService option determines which image service is used by the adapter. The adapter will default to compile mode when an incompatible image service is configured. Otherwise, it will use the globally configured image service. It can have following values:

• cloudflare: Uses the Cloudflare Image Resizing service.
• passthrough: Uses the existing noop service.
• compile: Uses Astro’s default service (sharp), but only on pre-rendered routes at build time.
• custom: Always uses the image service configured in Image Options./li>

import {defineConfig} from "astro/config";
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
    adapter: cloudflare({
        imageService: 'cloudflare'
    }),
    output: 'server'
})

The platformProxy Option

The platformProxy option controls how Cloudflare’s system connects to Astro’s development server. It helps Astro mimic Cloudflare’s environment by:

• Connecting to local Cloudflare Workers (small serverless functions running on your computer).
• Simulating Cloudflare’s special features (like security tools and caching) inside Astro’s development setup

This allows you to test your Astro project locally, same as if it were running on Cloudflare, even though you’re using Node.js on your own computer.

Cloudflare Runtime

The Cloudflare runtime gives you access to environment variables and Cloudflare bindings. The runtime uses bindings found in the wrangler and .dev.vars configuration files.

Example

In the code below, we have an environment variable configuration set up in wrangler.toml:

// File - wrangler.toml

[vars]
ENV_VARIABLE = "test"

Now, you can access the environment variable in your Cloudflare Worker script using Astro locals.

// File - src/index.js

---
const { env } = Astro.locals.runtime;
const EnvVariable = env.ENV_VARIABLE;
---

Also, You can access the runtime from API endpoints through context.locals:

// File - src/api/hello.js

export function GET(context) {
    const runtime = context.locals.runtime;
  
    return new Response('Some body');
}