Nuxt3 deployment with Cloudflare pages failed

Question

I have successfully compiled my nuxt3 project locally. But the deployment is not working with cloud flare page

00:14:35.140    Executing user command: npm run generate
00:14:35.613    
00:14:35.613    > generate
00:14:35.613    > nuxt generate
00:14:35.614    
00:14:35.725    Nuxt CLI v3.0.0-rc.3-27567768.c1f728e
00:14:38.919    ✔ Using ~/components/content for components in Markdown
00:14:43.437    ℹ Vite client warmed up in 3072ms
00:14:44.646    ℹ Client built in 4280ms
00:14:44.681    ℹ Building server...
00:14:47.053    ✔ Server built in 2373ms
00:14:47.249    ✔ Generated public dist
00:14:47.249    ℹ Initializing prerenderer
00:14:50.871    ℹ Prerendering 4 initial routes with crawler
00:14:50.891      ├─ / (20ms) 
00:14:50.894      ├─ /200 (3ms) 
00:14:50.897      ├─ /404 (3ms) 
00:14:50.958      ├─ /api/_content/cache (61ms) 
00:14:50.971    ✔ You can now deploy .output/public to any static hosting!
00:14:51.017    Finished
00:14:51.018    Note: No functions dir at /functions found. Skipping.
00:14:51.018    Validating asset output directory
00:14:51.018    Error: Output directory ".output/public" not found.
00:14:52.095    Failed: build output directory not found

This is failed with "Error: Output directory ".output/public" not found." but actually the directory is generated few lines before. Any clue to resolve this problem?

Minimus

Could you give us more details regarding your configuration? – Despotism

I have added my build configuration. Do you require any other information? – Minimus

Answer 1

I worked around the problem with:

Adding Nitro output config [1] [2] to nuxt.config.ts:

export default defineNuxtConfig({
    "nitro": {
        "output": {
            dir: 'output',
            serverDir: 'output/server',
            publicDir: 'output/public'
        }
    }
})

In Cloudflare Pages, setting build output directory to: server/output/public.

I think the issue is caused by the default deployment script at CloudFlare side, checking the existence of .output, but not being able to see "hidden" (starting with dot) folders.

17:27:08.682    Validating asset output directory
17:27:08.682    Error: Output directory ".output/public" not found.

Edit (2022-07-10) found a cleaner way:

• add "target" : "static" to nuxt.config.ts
• Use as CloudFlare Pages build command: ./node_modules/.bin/nuxt generate
• Set CloudFlare Pages build output directory to dist

Ivar

Can you plese provide your final setup? I'm not being able to do that on a nuxt 3.5 project – Drinkwater

Answer 2

I also had this issue, after testings, this is what i found.

The documentation says Use the nuxi generate command to build your application. (https://v3.nuxtjs.org/getting-started/deployment#static-hosting).

Configure Node Version

First, i'll add an .nvmrc file at the root of the project, so that Cloudflare doesn't use its default 12.18.0 version on deploy.

The content of the file is :

16

sources:

• nuxt 3 prerequisites : https://v3.nuxtjs.org/getting-started/installation/#prerequisites
• Node version on Cloudflare Pages : https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools

Configure the Cloudflare Page

Then i'm adding the configuration in the cloudflare interface with following :

• Build command: npx nuxi generate
• Build output directory: /.output/public
• Root directory: /

🚀

Going further

Actually, it shouldn't be a problem to deploy easily on CF Pages: the team has added a cloudflare_pages preset right into nitro, the server library behind nuxt 3. https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages

I wasn't able to make this preset work for now, i'll update my answer when this has changed :)

Flagship

Answer 3

Just tell Nitro to generate for Cloudflare Pages and it should work. Remember to add a .nvmrc containing 16 in the project root folder or Cloudflare will use way too old npm version.

Gaff

I couldn't make the .nvmrc work on my end, I ended up setting NODE_VERSION as 18.14.2 as an environment variable in cloudflare – Remission