Cloudflare Developers•6mo ago

Deploying an Astro app to Cloudflare Pages

I am setting up a new Astro app. This is the steps taken so far... 1. Run npm create cloudflare@latest -- mysite --framework=astro --platform=pages In the Astro install, I didn't initialize a repo and I just installed the "Minimal empty template" 2. I then manually created the repo and pushed to GitHub the root of the folder the Astro installer created. So repo looks like this... .gitignore .vscode astro.config.mjs node_modules package-lock.json package.json public README.md src tsconfig.json worker-configuration.d.ts wrangler.jsonc 3. In Cloudflare I created a new Pages app and pointed it at the repo. It successfully connected, but then errored during build. The attachment shows the error... What's going on? It seems Cloudflare doesn't like some of the dependencies. I'm doing the initial build on macOS. Do I need to update my local npm environment?

11 Replies

Walshy•6mo ago

npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
2025-05-25T07:07:39.433973Z    npm ERR! 
2025-05-25T07:07:39.434078Z    npm ERR! Missing: typescript@5.8.3 from lock file

npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
2025-05-25T07:07:39.433973Z    npm ERR! 
2025-05-25T07:07:39.434078Z    npm ERR! Missing: typescript@5.8.3 from lock file

looks like package.json and package-lock.json aren't in sync if you npm i locally it should update the lock file you can then commit that and it should be happy

securitypedantOP•6mo ago

I did that, and the npm ci error went away, but I still have a load of package requirements. What's odd is required: { node: '18.20.8 ^20.3.0 >=22.0.0' }, current: { node: 'v18.17.1', npm: '9.6.7' } Implies the version of node is v18, yet my package.json has... "@types/node": "^22.15.21", Is there somewhere I set the version of node in Pages?

Walshy•6mo ago

You can set env var PAGES_VERSION with value of 22 to switch to Node.js 22 By default Pages is using 18. You can also control with package.json engines (https://docs.npmjs.com/cli/v11/configuring-npm/package-json#engines)

securitypedantOP•6mo ago

ahh ok lemme try But the version is still 18

securitypedantOP•6mo ago

https://developers.cloudflare.com/pages/configuration/build-image/#languages-and-runtime

Cloudflare Docs

Build image

Cloudflare Pages' build environment has broad support for a variety of languages, such as Ruby, Node.js, Python, PHP, and Go.

securitypedantOP•6mo ago

This implies I can also set the env var NODE_VERSION to 22, tried that, still the same result

Walshy•6mo ago

Oh god weekend brain. Yes NODE_VERSION not PAGES_VERSION :notlikemeow: Got a deployment id? ?pages-deployment-id

SuperHelpflare•6mo ago

The Pages deployment ID is a unique build identifier. It's the UUID in the browser bar (for example, a URL would be dash.cloudflare.com/ACCOUNT_ID/pages/view/PROJECT/DEPLOYMENT_ID where the deployment ID looks something like a398d794-7322-4c97-96d9-40b5140a8d9b). This ID can help troubleshoot some issues with Pages builds so if you have a failing build make sure you grab that ID for the team to use.

securitypedantOP•6mo ago

Here you go, cbbf9a24-0b91-40a8-b185-fda34738f1b5 Hmm I just saw... Build environment variables: (none found) and yet above that output... so looks like the environment variable is not being set in the build

Walshy•6mo ago

Successfully read wrangler.toml file.

ah that'll be why when we read the wrangler.toml, that becomes the source of truth you can either do

[vars]
NODE_VERSION = "22"

[vars]
NODE_VERSION = "22"

or use the package.json engines field like i linked above (https://docs.npmjs.com/cli/v11/configuring-npm/package-json#engines)

securitypedantOP•6mo ago

I don't have a wranger.toml, but I do have a wranger.jsonc and in it I have... "vars": { "NODE_VERSION": "22" }, but that also doesn't work and in the package.json I have...

{
    "name": "jackthorpe-me",
    "type": "module",
    "version": "0.0.1",
    "scripts": {
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro build && wrangler pages dev",
        "astro": "astro",
        "deploy": "astro build && wrangler pages deploy",
        "cf-typegen": "wrangler types"
    },
    "engines": {
        "node": ">=20"
    },    
    "dependencies": {
        "@astrojs/cloudflare": "^12.5.3",
        "astro": "^5.8.0"
    },
    "devDependencies": {
        "@types/node": "^22.15.21",
        "wrangler": "^4.16.1"
    }
}

{
    "name": "jackthorpe-me",
    "type": "module",
    "version": "0.0.1",
    "scripts": {
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro build && wrangler pages dev",
        "astro": "astro",
        "deploy": "astro build && wrangler pages deploy",
        "cf-typegen": "wrangler types"
    },
    "engines": {
        "node": ">=20"
    },    
    "dependencies": {
        "@astrojs/cloudflare": "^12.5.3",
        "astro": "^5.8.0"
    },
    "devDependencies": {
        "@types/node": "^22.15.21",
        "wrangler": "^4.16.1"
    }
}

and this also doesn't work! driving me a little crazy here Phew, finally fixed it Detected the following tools from environment: nodejs@22.14.0, npm@9.6.7 Needed to delete node_modules, the lock file and fix formatting of the wrangler.jsonc thanks

Gaming

Programming

Deploying an Astro app to Cloudflare Pages

Did you find this page helpful?