You can deploy your Astro project on Cloudflare Pages, a platform for frontend developers to collaborate and deploy static (JAMstack) and SSR websites.
This guide includes instructions for deploying to Cloudflare Pages through the Pages Dashboard or using Wrangler the Cloudflare CLI.
To get started, you will need:
Set up a new project on Cloudflare Pages.
Push your code to your git repository (GitHub, GitLab).
Log in to the Cloudflare dashboard and select your account in Account Home > Pages.
Select Create a new Project and the Connect Git option.
Select the git project you want to deploy and click Begin setup
Use the following build settings:
Astro
npm run build
dist
NODE_VERSION
and a Value of v16.13.0
or higher to tell Cloudflare to use a compatible Node version. Alternatively, add a .nvmrc
file to your project to specify a Node version.Click the Save and Deploy button.
wrangler login
.npx wrangler pages publish dist
.# Install Wrangler CLI npm install -g wrangler # Login to Cloudflare account from CLI wrangler login # Run your build command npm run build # Create new deployment npx wrangler pages publish dist
After your assets are uploaded, Wrangler will give you a preview URL to inspect your site. When you log into the Cloudflare Pages dashboard, you will see your new project.
For the preview to work, you must install wrangler
pnpm install wrangler --save-dev
It’s then possible to update the preview script in your package.json
to "preview": "wrangler pages dev ./dist"
You can also deploy an Astro SSR site to Cloudflare Pages using the @astrojs/cloudflare
adapter.
Add the Cloudflare adapter 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.
npx astro add cloudflare
If you prefer to install the adapter manually instead, complete the following two steps:
@astrojs/cloudflare
adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:npm install @astrojs/cloudflare
astro.config.mjs
file:import { defineConfig } from 'astro/config'; import cloudflare from '@astrojs/cloudflare'; export default defineConfig({ output: 'server', adapter: cloudflare() });
There are currently two modes supported when using Pages Functions with the @astrojs/cloudflare
adapter.
advanced
mode which picks up the _worker.js
in dist
, or a directory mode where pages will compile the worker out of a functions folder in the project root.If no mode is set, the default is
"advanced"
directory
mode, which means the adapter will compile the client side part of you app the same way, but it will move the worker script into a functions
folder in the project root. The adaptor will only ever place a [[path]].js
in that folder, allowing you to add additional plugins and pages middleware which can be checked into version control.export default defineConfig({ adapter: cloudflare({ mode: "directory" }), });
Pages Functions enable you to run server-side code to enable dynamic functionality without running a dedicated server.
To get started, create a /functions
directory at the root of your project. Writing your Functions files in this directory automatically generates a Worker with custom functionality at the predesignated routes. To learn more about writing Functions, see the Pages Functions documentation.
📚 Read more about SSR in Astro.
If you’re encountering errors, double-check the version of node
you’re using locally (node -v
) matches the version you’re specifying in the environment variable.
Cloudflare requires node v16.13
, which is a more recent version than Astro’s out-of-the-box minimum, so double check you’re using at least v16.13
.
© 2021 Fred K. Schott
Licensed under the MIT License.
https://docs.astro.build/en/guides/deploy/cloudflare/