8000 Update adapters and their deploy guides re: `output:'server'` by sarah11918 · Pull Request #11497 · withastro/docs · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Update adapters and their deploy guides re: output:'server' #11497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Apr 28, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1b3c285
update all adapter install instructions to no longer show adding serv…
sarah11918 Apr 21, 2025
b53f3a2
update all adapter intros to better describe on demand routes and fea…
sarah11918 Apr 21, 2025
f05f425
replace SSR throughout adapter docs
sarah11918 Apr 21, 2025
5c7b70a
remove output server from all Vercel code examples
sarah11918 Apr 21, 2025
a448a7c
remove output server from Netlify examples
sarah11918 Apr 21, 2025
065c445
removes output server from Cloudflare examples
sarah11918 Apr 21, 2025
c568300
update deploy guides to minimize adding adapter instructions
sarah11918 Apr 21, 2025
098d406
double check for hyphens in on-demand rendering
sarah11918 Apr 21, 2025
1862242
config reference proposed update to fix links and more
sarah11918 Apr 21, 2025
e73beec
Armand typo fixes
sarah11918 Apr 21, 2025
73bdca6
Update en.yml to remove SSR from some translatable UI
sarah11918 Apr 21, 2025
a4846c5
update SSR vocab on Cloudflare deploy
sarah11918 Apr 21, 2025
42b15c1
update StaticSSRTabs to use translated string
sarah11918 Apr 21, 2025
085b310
fix link from copy/paste
sarah11918 Apr 22, 2025
49b9cfe
updates definition tense: configure -> configures
sarah11918 Apr 23, 2025
97a4242
Merge branch 'main' into adapters-and-deploy-guides
sarah11918 Apr 27, 2025
588bd41
better link text
sarah11918 Apr 27, 2025
4bedd71
Merge branch 'main' into adapters-and-deploy-guides
sarah11918 Apr 28, 2025
84e6d47
ci: update configuration reference docs (#11544)
astrobot-houston Apr 28, 2025
984a7f9
Merge branch 'main' into adapters-and-deploy-guides
sarah11918 Apr 28, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/tabs/StaticSsrTabs.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
---

<Tabs syncKey="deploy-type">
<TabItem label="Static">
<TabItem label={Astro.locals.t('deploy.staticTag')}>
<slot name="static" />
</TabItem>
<TabItem label="SSR">
<TabItem label={Astro.locals.t('deploy.ssrTag')}>
<slot name="ssr" />
</TabItem>
</Tabs>
10 changes: 5 additions & 5 deletions src/content/docs/en/guides/deploy/cloudflare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro';

You can deploy full-stack applications, including front-end static assets and back-end APIs, as well as SSR sites, to both [Cloudflare Workers](https://developers.cloudflare.com/workers/static-assets/) and [Cloudflare Pages](https://pages.cloudflare.com/).
You can deploy full-stack applications, including front-end static assets and back-end APIs, as well as on-demand rendered sites, to both [Cloudflare Workers](https://developers.cloudflare.com/workers/static-assets/) and [Cloudflare Pages](https://pages.cloudflare.com/).

This guide includes:

Expand All @@ -35,7 +35,7 @@ To get started, you will need:
npm install wrangler@latest --save-dev
```

2. If your site uses on demand rendering, install the `@astrojs/cloudflare` adapter.
2. If your site uses on demand rendering, install the [`@astrojs/cloudflare` adapter](/en/guides/integrations-guide/cloudflare/).

This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.

Expand All @@ -49,7 +49,7 @@ To get started, you will need:
_routes.json
```

<ReadMore>Read more about [on demand rendering (also known as SSR) in Astro](/en/guides/on-demand-rendering/).</ReadMore>
<ReadMore>Read more about [on-demand rendering in Astro](/en/guides/on-demand-rendering/).</ReadMore>

3. Create a [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/).

Expand Down Expand Up @@ -138,7 +138,7 @@ If you're using Workers Builds:
npm install wrangler@latest --save-dev
```

2. If your site uses on demand rendering, install the `@astrojs/cloudflare` adapter.
2. If your site uses on demand rendering, install the [`@astrojs/cloudflare` adapter](/en/guides/integrations-guide/cloudflare/).

This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.

Expand Down Expand Up @@ -186,7 +186,7 @@ Client-side hydration may fail as a result of Cloudflare's Auto Minify setting.

### Node.js runtime APIs

If you are building a project that is using on-demand rendering with [the Cloudflare SSR adapter](/en/guides/integrations-guide/cloudflare/) and the server fails to build with an error message such as `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.`:
If you are building a project that is using on-demand rendering with [the Cloudflare adapter](/en/guides/integrations-guide/cloudflare/) and the server fails to build with an error message such as `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.`:

- This means that a package or import you are using in the server-side environment is not compatible with the [Cloudflare runtime APIs](https://developers.cloudflare.com/workers/runtime-apis/nodejs/).

Expand Down
55 changes: 9 additions & 46 deletions src/content/docs/en/guides/deploy/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,67 +13,30 @@ import { Steps } from '@astrojs/starlight/components';

This guide includes instructions for deploying to Netlify through the website UI or Netlify's CLI.

## Project Configuration
## Project configuration

Your Astro project can be deployed to Netlify in three different ways: as a static site, a server-rendered site, or an edge-rendered site.

### Static Site
### Static site

Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Netlify.

### Adapter for SSR
### Adapter for on-demand rendering

Add [the Netlify adapter](/en/guides/integrations-guide/netlify/) to enable SSR in your Astro project and deploy to Netlify with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
Add [the Netlify adapter](/en/guides/integrations-guide/netlify/) to enable on-demand rendering in your Astro project and deploy to Netlify with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.

```bash
npx astro add netlify
```

If you prefer to install the adapter manually instead, complete the following two steps:
<ReadMore>See the [Netlify adapter guide](/en/guides/integrations-guide/netlify/) to install manually instead, or for more configuration options, such as deploying your project’s Astro middleware using Netlify’s Edge Functions.</ReadMore>

<Steps>
1. Install [the `@astrojs/netlify` adapter](/en/guides/integrations-guide/netlify/) to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:

```bash
npm install @astrojs/netlify
```

2. Add two new lines to your `astro.config.mjs` project configuration file.

```js title="astro.config.mjs" ins={2, 5-6}
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

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

You can also deploy your project's Astro middleware using Netlify's Edge Functions by adding `edgeMiddleware: true` to the Netlify adapter's configuration:

```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
output: 'server',
adapter: netlify({
+ edgeMiddleware: true
}),
});
```


To run middleware for pre-rendered pages, set `edgeMiddleware: true`. This allows you to use middleware to implement authentication, redirects, or similar things, while still using static HTML output.
</Steps>

## How to deploy

You can deploy to Netlify through the website UI or using Netlify’s CLI (command line interface). The process is the same for both static and SSR Astro sites.
You can deploy to Netlify through the website UI or using Netlify’s CLI (command line interface). The process is the same for both static and on-demand rendered Astro sites.

### Website UI Deployment
### Website UI deployment

If your project is stored in GitHub, GitLab, BitBucket, or Azure DevOps, you can use the Netlify website UI to deploy your Astro site.

Expand Down Expand Up @@ -108,7 +71,7 @@ To configure the default settings, create a `netlify.toml` file with the followi

<ReadMore>More info at [“Deploying an existing Astro Git repository”](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) on Netlify’s blog</ReadMore>

### CLI Deployment
### CLI deployment

You can also create a new site on Netlify and link up your Git repository by installing and using the [Netlify CLI](https://cli.netlify.com/).

Expand All @@ -134,7 +97,7 @@ You can also create a new site on Netlify and link up your Git repository by ins

<ReadMore>More details from Netlify on [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)</ReadMore>

### Set a Node.js Version
### Set a Node.js version

If you are using a legacy [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires `v18.17.1` or `v20.3.0` or higher.

Expand Down
56 changes: 10 additions & 46 deletions src/content/docs/en/guides/deploy/vercel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,17 @@ You can use [Vercel](http://vercel.com/) to deploy an Astro site to their global

This guide includes instructions for deploying to Vercel through the website UI or Vercel's CLI.

## Project Configuration
## Project configuration

Your Astro project can be deployed to Vercel as a static site, or as a server-side rendered site (SSR).
Your Astro project can be deployed to Vercel as a static site, or a server-rendered site.

### Static Site
### Static site

Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Vercel.

### Adapter for SSR
### Adapter for on-demand rendering

To enable SSR in your Astro project and deploy on Vercel:

Add [the Vercel adapter](/en/guides/integrations-guide/vercel/) to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
Add [the Vercel adapter](/en/guides/integrations-guide/vercel/) to enable [on-demand rendering](/en/guides/on-demand-rendering/) in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.

<PackageManagerTabs>
<Fragment slot="npm">
Expand All @@ -46,47 +44,13 @@ Add [the Vercel adapter](/en/guides/integrations-guide/vercel/) to enable SSR in
</Fragment>
</PackageManagerTabs>

If you prefer to install the adapter manually instead, complete the following two steps:

<Steps>
1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager.

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @astrojs/vercel
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add @astrojs/vercel
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @astrojs/vercel
```
</Fragment>
</PackageManagerTabs>

1. Add two new lines to your `astro.config.mjs` project configuration file.

```js title="astro.config.mjs" ins={2, 5-6}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
output: 'server',
adapter: vercel(),
});
```
</Steps>
<ReadMore>See the [Vercel adapter guide](/en/guides/integrations-guide/vercel/) to install manually instead, or for more configuration options, such as deploying your project’s Astro middleware using Vercel Edge Functions.</ReadMore>

## How to deploy

You can deploy to Vercel through the website UI or using Vercel’s CLI (command line interface). The process is the same for both static and SSR Astro sites.
You can deploy to Vercel through the website UI or using Vercel’s CLI (command line interface). The process is the same for both static and on-demand rendered Astro sites.

### Website UI Deployment
### Website UI deployment

<Steps>
1. Push your code to your online Git repository (GitHub, GitLab, BitBucket).
Expand All @@ -102,7 +66,7 @@ After your project has been imported and deployed, all subsequent pushes to bran

<ReadMore>Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).</ReadMore>

### CLI Deployment
### CLI deployment

<Steps>
1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy.
Expand Down Expand Up @@ -135,7 +99,7 @@ After your project has been imported and deployed, all subsequent pushes to bran
4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
</Steps>

### Project config with vercel.json
### Project config with `vercel.json`

You can use `vercel.json` to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments.

Expand Down
32 changes: 15 additions & 17 deletions src/content/docs/en/guides/integrations-guide/cloudflare.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
type: integration
title: '@astrojs/cloudflare'
description: Learn how to use the @astrojs/cloudflare SSR adapter to deploy your Astro project.
description: Learn how to use the @astrojs/cloudflare adapter to deploy your Astro project.
sidebar:
label: Cloudflare
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare/'
Expand All @@ -15,9 +15,9 @@ import Since from '~/components/Since.astro';
import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';


This adapter allows Astro to deploy your [on-demand rendered routes](/en/guides/on-demand-rendering/) to [Cloudflare](https://www.cloudflare.com/).
This adapter allows Astro to deploy your [on-demand rendered routes and features](/en/guides/on-demand-rendering/) to [Cloudflare](https://www.cloudflare.com/), including [server islands](/en/guides/server-islands/), [actions](/en/guides/actions/), and [sessions](/en/guides/sessions/).

If you're using Astro as a static site builder, you don't need an adapter to deploy to Cloudflare.
If you're using Astro as a static site builder, you don't need an adapter.

Learn how to deploy your Astro site in our [Cloudflare deployment guide](/en/guides/deploy/cloudflare/).

Expand All @@ -30,7 +30,7 @@ Cloudflare's [Developer Platform](https://developers.cloudflare.com/) lets you d

Astro includes an `astro add` command to automate the setup of official integrations. If you prefer, you can [install integrations manually](#manual-install) instead.

Add the Cloudflare adapter to enable SSR in your Astro project with the `astro add` command. This will install `@astrojs/cloudflare` and make the appropriate changes to your `astro.config.mjs` file in one step.
Add the Cloudflare adapter to enable server-rendering in your Astro project with the `astro add` command. This will install `@astrojs/cloudflare` and make the appropriate changes to your `astro.config.mjs` file in one step.

<PackageManagerTabs>
<Fragment slot="npm">
Expand All @@ -50,6 +50,8 @@ Add the Cloudflare adapter to enable SSR in your Astro project with the `astro a
</Fragment>
</PackageManagerTabs>

Now, you can enable [on-demand rendering per page](/en/guides/on-demand-rendering/#enabling-on-demand-rendering), or set your build output configuration to `output: 'server'` to [server-render all your pages by default](/en/guides/on-demand-rendering/#server-mode).

### Manual Install

First, add the `@astrojs/cloudflare` adapter to your project's dependencies using your preferred package manager.
Expand All @@ -72,14 +74,13 @@ First, add the `@astrojs/cloudflare` adapter to your project's dependencies usin
</Fragment>
</PackageManagerTabs>

Then, add the adapter and your desired [on-demand rendering mode](/en/guides/on-demand-rendering/) to your `astro.config.mjs` file:
Then, add the adapter to your `astro.config.mjs` file:

```js title="astro.config.mjs" ins={2,5-6}
```js title="astro.config.mjs" ins={2,5}
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
output: 'server',
adapter: cloudflare(),
});
```
Expand Down Expand Up @@ -110,7 +111,7 @@ Determines which image service is used by the adapter. The adapter will default

* **`cloudflare`:** Uses the [Cloudflare Image Resizing](https://developers.cloudflare.com/images/image-resizing/) service.
* **`passthrough`:** Uses the existing [`noop`](/en/guides/images/#configure-no-op-passthrough-service) service.
* **`compile`:** Uses Astro's default service (sharp), but only on pre-rendered routes at build time. During SSR for pages rendered on-demand, all `astro:assets` features are disabled.
* **`compile`:** Uses Astro's default service (sharp), but only on pre-rendered routes at build time. For pages rendered on-demand, all `astro:assets` features are disabled.
* **`custom`:** Always uses the image service configured in [Image Options](/en/reference/configuration-reference/#image-options). **This option will not check to see whether the configured image service works in Cloudflare's `workerd` runtime.**

```js title="astro.config.mjs" ins={6}
Expand All @@ -121,7 +122,6 @@ export default defineConfig({
adapter: cloudflare({
imageService: 'cloudflare'
}),
output: 'server'
})
```

Expand Down Expand Up @@ -216,14 +216,14 @@ Configures additional routes to be generated on demand by the Cloudflare adapter
**Default:** `undefined`
</p>

Configures routes to be excluded from on-demand rendering in the `routes.extend.exclude` array. These routes will be prerendered and served statically instead, and will not invoke the SSR function. Additionally you can use this option to serve any static asset (e.g. images, fonts, css, js, html, txt, json, etc.) files directly without routing the request through the SSR function.
Configures routes to be excluded from on-demand rendering in the `routes.extend.exclude` array. These routes will be prerendered and served statically instead, and will not invoke the server function. Additionally you can use this option to serve any static asset (e.g. images, fonts, css, js, html, txt, json, etc.) files directly without routing the request through the server function.

```js title="astro.config.mjs"
export default defineConfig({
adapter: cloudflare({
routes: {
extend: {
include: [{ pattern: '/static' }], // Routes a prerended page to the SSR function for on-demand rendering
include: [{ pattern: '/static' }], // Route a prerended page to the server function for on-demand rendering
exclude: [{ pattern: '/pagefind/*' }], // Use Starlight's pagefind search, which is generated statically at build time
}
},
Expand Down Expand Up @@ -371,7 +371,7 @@ This is available on Cloudflare Workers and Pages.
### Routes
#### Routing on Cloudflare Workers

Routing for static assets is based on the file structure in the build directory (e.g. `./dist`). If no match is found, this will fall back to the Worker for SSR. Read more about [static asset routing with Cloudflare Workers](https://developers.cloudflare.com/workers/static-assets/routing/).
Routing for static assets is based on the file structure in the build directory (e.g. `./dist`). If no match is found, this will fall back to the Worker for on-demand rendering. Read more about [static asset routing with Cloudflare Workers](https://developers.cloudflare.com/workers/static-assets/routing/).

Unlike [Cloudflare Pages](#routing-on-cloudflare-pages), with Workers, you do not need a `_routes.json` file.

Expand Down Expand Up @@ -487,13 +487,12 @@ import { Buffer } from 'node:buffer';

You'll also need to modify the `vite` configuration in your Astro config to allow for the `node:*` import syntax:

```js title="astro.config.mjs" ins={7-11}
import { defineConfig } from "astro/config";
```js title="astro.config.mjs" ins={6-10}
import {defineConfig} from "astro/config";
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
adapter: cloudflare({}),
output: 'server',
vite: {
ssr: {
external: ['node:buffer'],
Expand Down Expand Up @@ -530,10 +529,9 @@ Developing with [`wrangler`](https://developers.cloudflare.com/workers/wrangler/

Currently, errors during running your application in Wrangler are not very useful, due to the minification of your code. For better debugging, you can add `vite.build.minify = false` setting to your `astro.config.mjs`.

```js title="astro.config.mjs" ins={4-8}
```js title="astro.config.mjs" ins={3-7}
export default defineConfig({
adapter: cloudflare(),
output: 'server',
vite: {
build: {
minify: false,
Expand Down
Loading
0