Skip to content
SST
Blog Docs Examples
25K
Console

Astro

The Astro component lets you deploy an Astro site to Cloudflare.

Minimal example

Deploy the Astro site that’s in the project root.

sst.config.ts
new sst.cloudflare.Astro("MyWeb");

Change the path

Deploys the Astro site in the my-astro-app/ directory.

sst.config.ts
new sst.cloudflare.Astro("MyWeb", {
  path: "my-astro-app/"
});

Add a custom domain

Set a custom domain for your Astro site.

sst.config.ts
new sst.cloudflare.Astro("MyWeb", {
  domain: "my-app.com"
});

Link resources to your Astro site. This will grant permissions to the resources and allow you to access it in your site.

sst.config.ts
const bucket = new sst.cloudflare.Bucket("MyBucket");


new sst.cloudflare.Astro("MyWeb", {
  link: [bucket]
});

Add this to your astro.config.mjs to make linked resources and bindings available in sst dev.

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


export default defineConfig({
  adapter: cloudflare({
    configPath: process.env.SST_WRANGLER_PATH,
  }),
});

Use sst/resource for linked resources.

src/pages/index.astro
---
import { Resource } from "sst/resource";


const files = await Resource.MyBucket.list();
---

Constructor

new Astro(name, args?, opts?)

Parameters

AstroArgs

buildCommand?

Type Input<string>

Default “npm run build”

The command used internally to build your Astro site.

If you want to use a different build command.

{
  buildCommand: "yarn build"
}

dev?

Type false | Object

Configure how this component works in sst dev.

Instead of deploying your Astro site, this starts it in dev mode. It’s run as a separate process in the sst dev multiplexer. Read more about sst dev.

To disable dev mode, pass in false.

dev.autostart?

Type Input<boolean>

Default true

Configure if you want to automatically start this when sst dev starts. You can still start it manually later.

dev.command?

Type Input<string>

Default “npm run dev”

The command that sst dev runs to start this in dev mode.

dev.directory?

Type Input<string>

Default Uses the path

Change the directory from where the command is run.

dev.title?

Type Input<string>

The title of the tab in the multiplexer.

dev.url?

Type Input<string>

Default “http://url-unavailable-in-dev.mode”

The url when this is running in dev mode.

Since this component is not deployed in sst dev, there is no real URL. But if you are using this component’s url or linking to this component’s url, it can be useful to have a placeholder URL. It avoids having to handle it being undefined.

domain?

Type Input<string>

Set a custom domain for your Astro site.

{
  domain: "my-app.com"
}

environment?

Type Input<Record<string, Input<string>>>

Set environment variables in your Astro site.

Recall that in Astro, you need to prefix your environment variables with PUBLIC_ to access them on the client-side. Read more here.

{
  environment: {
    API_URL: api.url,
    // Accessible on the client-side
    PUBLIC_STRIPE_PUBLISHABLE_KEY: "pk_test_123"
  }
}

Type Input<any[]>

Link resources to your Astro site. This will:

  1. Grant the permissions needed to access the resources.
  2. Allow you to access them in your site using sst/resource.

Takes a list of resources to link to the function.

{
  link: [bucket, stripeKey]
}

Access linked resources in your site with sst/resource. This works in both sst dev and after deploy.

---
import { Resource } from "sst/resource";


const files = await Resource.MyBucket.list();
---

path?

Type Input<string>

Default ”.”

Path to the directory where your Astro site is located. This path is relative to your sst.config.ts.

By default it assumes your Astro site is in the root of your SST app.

If your Astro site is in a package in your monorepo.

{
  path: "packages/web"
}

transform?

Type Object

Transform how this component creates its underlying resources.

transform.server?

Type WorkerArgs | (args: WorkerArgs, opts: ComponentResourceOptions, name: string) => void

Transform the Worker component used for handling the server-side rendering.

Properties

nodes

Type Object

The underlying resources this component creates.

nodes.server

Type undefined | Worker

The Cloudflare Worker that renders the site.

url

Type Output<undefined | string>

The URL of the Astro site.

If the domain is set, this is the URL with the custom domain. Otherwise, it’s the auto-generated Worker URL.

SDK

Use the SDK in your runtime to interact with your infrastructure.

This is accessible through the Resource object in the SDK.

  • url undefined | string

    The URL of the Astro site.

    If the domain is set, this is the URL with the custom domain. Otherwise, it’s the auto-generated Worker URL.