Deploy our Nuxt App to Cloudflare

In this tutorial, we are going to manually deploy our Nuxt server-side rendering(SSR) application to Cloudflare using wrangler.

Wrangler is a Command Line Interface (CLI) tool to manage the deployment.

It will simulate the local development for deployment
Once the code is ready, it will bundle and configure the file and distribute it to the Cloudflare page
Sometimes, if the deployment goes wrong, we can use it to revert or roll back
It also helps with resource management

Note: Don't push the .env file; instead, use the Cloudflare dashboard settings

Build our Nuxt App

Use the following command to build your Nuxt app for Cloudflare Pages. Go to your project directory and run the following command

bash

npx nuxi build --preset=cloudflare_pages

If you are using environment variables, use the following command.

bash

npx nuxi build --dotenv .env.csbyte --preset=cloudflare_pages

bash

●  Nitro preset: cloudflare-pages
ℹ Building client...                                                                                                                                                             9:00:21 AM
ℹ vite v7.3.1 building client environment for production...

Now you can see the build success if everything is ok

bash

Σ Total size: 5.74 MB (1.44 MB gzip)
ℹ Generated dist/_routes.json                                                                                                                                                    9:02:11 AM
ℹ Generated dist/_headers                                                                                                                                                        9:02:11 AM
ℹ Generated dist/_redirects                                                                                                                                                      9:02:11 AM
✔ You can preview this build using npx wrangler pages dev dist                                                                                                             nitro 9:02:11 AM
✔ You can deploy this build using npx wrangler pages deploy dist                                                                                                           nitro 9:02:11 AM
│                                                                                                                                                                                 9:02:11 AM
└  ✨ Build complete!

Upload the Build File

If the wrangler is not installed, first it will ask to install it. Please proceed it and install the wrangler.

bash

Need to install the following packages:
wrangler@4.88.0
Ok to proceed? (y)

Also if the wrangler is not connected to your cloudflare account it will ask to give permission to connect please proceed it.

Use the following command to upload your build folder

bash

npx wrangler pages deploy dist/

Once it succeeds, it will prompt as follows:

bash

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
🌎 Deploying...
✨ Deployment complete! Take a peek over at

You can find the dev and production URL something like this: https://aa341a37.yourdomain.pages.dev

Now, log in to your Cloudflare account and navigate to your dashboard under >Recent > Workers and Pages tab, where you can see your app deployed.

This is what it looks like if everything is good.