Deploy your Astro Site to Cloudflare Pages
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.
PrerequisitesSection titled Prerequisites
To get started, you will need:
- A Cloudflare account. If you don’t already have one, you can create a free Cloudflare account during the process.
- Your app code pushed to a GitHub or a GitLab repository.
How to deploy a site with GitSection titled How to deploy a site with Git
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:
- Framework preset:
- Build command:
npm run build
- Build output directory:
- Environment variables (advanced): By default, Cloudflare Pages uses Node.js 12.18.0, but Astro requires a higher version. Add an environment variable with a Variable name of
NODE_VERSIONand a Value of
v16.13.0or higher to tell Cloudflare to use a compatible Node version. Alternatively, add a
.nvmrcfile to your project to specify a Node version.
- Framework preset:
Click the Save and Deploy button.
How to deploy a site using WranglerSection titled How to deploy a site using Wrangler
- Install Wrangler CLI.
- Authenticate Wrangler with your Cloudflare account using
- Run your build command.
- Deploy using
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.
Enabling Preview locally with WranglerSection titled Enabling Preview locally with Wrangler
For the preview to work, you must install
It’s then possible to update the preview script in your
"preview": "wrangler pages dev ./dist"
How to deploy an SSR siteSection titled How to deploy an SSR site
You can also deploy an Astro SSR site to Cloudflare Pages using the
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.
If you prefer to install the adapter manually instead, complete the following two steps:
- Add the
@astrojs/cloudflareadapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
- Add the following to your
ModesSection titled Modes
There are currently two modes supported when using Pages Functions with the
- Advanced mode: This mode is used when you want to run your function in
advancedmode which picks up the
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
- directory mode: This mode is used when you want to run your function in
directorymode, 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
functionsfolder in the project root. The adaptor will only ever place a
[[path]].jsin that folder, allowing you to add additional plugins and pages middleware which can be checked into version control.
Using Pages FunctionsSection titled Using Pages Functions
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.
TroubleshootingSection titled Troubleshooting
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