[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"global-header-tutorials-static":3,"article-how-to-deploy-our-nuxt-application-to-cloudflare":4,"initial-similar-fetch":23},[],{"alias":5,"title":6,"description":7,"content":8,"thumbnail":9,"keywords":10,"categories":17,"tags":20,"createdAt":22},"how-to-deploy-our-nuxt-application-to-cloudflare","How to deploy our nuxt application to cloudflare","Deploy our Nuxt application to Cloudflare using Wrangler","{\"type\":\"doc\",\"content\":[{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":1},\"content\":[{\"type\":\"text\",\"text\":\"Deploy our Nuxt App to Cloudflare\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"In this tutorial, we are going to manually deploy our Nuxt server-side rendering(SSR) application to Cloudflare using wrangler.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https:\u002F\u002Fgithub.com\u002Fcloudflare\u002Fworkers-sdk\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null,\"title\":null}}],\"text\":\"Wrangler\"},{\"type\":\"text\",\"text\":\" is a Command Line Interface (CLI) tool to manage the deployment. \"}]},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"It will simulate the local development for deployment\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Once the code is ready, it will bundle and configure the file and distribute it to the Cloudflare page\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Sometimes, if the deployment goes wrong, we can use it to revert or roll back\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"It also helps with resource management\"}]}]}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Note: Don't push the .env file; instead, use the Cloudflare dashboard settings\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Build our Nuxt App\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Use the following command to build your Nuxt app for Cloudflare Pages. Go to your project directory and run the following command\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"npx nuxi build --preset=cloudflare_pages\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"If you are using environment variables, use the following command.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"npx nuxi build --dotenv .env.csbyte --preset=cloudflare_pages\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"●  Nitro preset: cloudflare-pages\\nℹ Building client...                                                                                                                                                             9:00:21 AM\\nℹ vite v7.3.1 building client environment for production...\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Now you can see the build success if everything is ok\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"Σ Total size: 5.74 MB (1.44 MB gzip)\\nℹ Generated dist\u002F_routes.json                                                                                                                                                    9:02:11 AM\\nℹ Generated dist\u002F_headers                                                                                                                                                        9:02:11 AM\\nℹ Generated dist\u002F_redirects                                                                                                                                                      9:02:11 AM\\n✔ You can preview this build using npx wrangler pages dev dist                                                                                                             nitro 9:02:11 AM\\n✔ You can deploy this build using npx wrangler pages deploy dist                                                                                                           nitro 9:02:11 AM\\n│                                                                                                                                                                                 9:02:11 AM\\n└  ✨ Build complete!\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Upload the Build File\"}]},{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"If the wrangler is not installed, first it will ask to install it. Please proceed it and install the wrangler.\"}]}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"Need to install the following packages:\\nwrangler@4.88.0\\nOk to proceed? (y)\"}]},{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Also if the wrangler is not connected to your cloudflare account it will ask to give permission to connect please proceed it.\"}]}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Use the following command to upload your build folder\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"npx wrangler pages deploy dist\u002F\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Once it succeeds, it will prompt as follows:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"✨ Compiled Worker successfully\\n✨ Uploading Worker bundle\\n✨ Uploading _routes.json\\n🌎 Deploying...\\n✨ Deployment complete! Take a peek over at\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"You can find the dev and production URL something like this: https:\u002F\u002Faa341a37.yourdomain.pages.dev  \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"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.\"}]},{\"type\":\"image\",\"attrs\":{\"src\":\"https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F19c8ef54-4006-4bfa-a07d-b2dd5e401c22_nuxt_deploy.png\",\"alt\":null,\"title\":null,\"width\":null,\"height\":null}},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This is what it looks like if everything is good.\"}]}]}","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F19c8ef54-4006-4bfa-a07d-b2dd5e401c22_nuxt_deploy.png",[11,12,13,14,15,16],"cloudflare","nuxt","deploy","vuejs","ssr","nuxt 4",[18,19],"Deployment","NuxtJS",[12,21],"deployment","2026-05-02T02:23:45.510Z",[24,31,37,43,49,55,61,67,73],{"alias":25,"title":26,"description":27,"thumbnail":28,"createdAt":29,"tutorialAlias":30,"lessonAlias":30},"configure-profile-in-spring-boot","Configure different spring profiles in spring boot application","Managing Spring Boot profiles for different environments along with Docker","\u002Fuploads\u002Fthumbnails\u002F59a52e59-4b56-469d-8902-41af5e0f13dd_Spring-profil.jpeg","2026-06-20T04:51:27.098Z",null,{"alias":32,"title":33,"description":34,"thumbnail":35,"createdAt":36,"tutorialAlias":30,"lessonAlias":30},"securing-nuxt-ssr-app-with-cookies-sessions","Securing Nuxt SSR Apps with cookies sessions","Nuxt 4 App how to create an authentication system in SSR mode","\u002Fuploads\u002Fthumbnails\u002F6088642b-8dcb-4d13-bb68-f90084ddbe04_nuxt_ssr_logi.jpeg","2026-05-18T14:36:54.441Z",{"alias":38,"title":39,"description":40,"thumbnail":41,"createdAt":42,"tutorialAlias":30,"lessonAlias":30},"static-assets-vs-dynamic-routing-collision","Static Assets vs. Dynamic Routing Collision","Resolving the Static Assets vs. Dynamic Routing Collision","\u002Fuploads\u002Fthumbnails\u002F0f4d63d1-8ca4-472f-8f6d-9bd6919a88b9_nuxt_collisio.jpeg","2026-05-16T08:36:46.316Z",{"alias":44,"title":45,"description":46,"thumbnail":47,"createdAt":48,"tutorialAlias":30,"lessonAlias":30},"environment-variables-in-nuxt","The Definitive Guide to Environment Variables in Nuxt 4","How to create Environment Variables in Nuxt 4","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002Fe8a3c4e7-98a6-4114-a8c8-49ebb4a9522f_nuxt_env_cloudflare.png","2026-05-04T12:35:52.854Z",{"alias":50,"title":51,"description":52,"thumbnail":53,"createdAt":54,"tutorialAlias":30,"lessonAlias":30},"setting-nginx-ssl-for-spring-boot-application","Setup Nginx and SSL for Spring Boot Application","Setting Nginx as a reverse proxy in our Spring Boot application","\u002Fuploads\u002Fthumbnails\u002F5433c987-9e86-4d90-9cce-a831d1598ba4_spring-boot-nginx.png","2026-05-04T05:36:23.075Z",{"alias":56,"title":57,"description":58,"thumbnail":59,"createdAt":60,"tutorialAlias":30,"lessonAlias":30},"configure-nginx-as-reverse-proxy-in-nuxt","Configure Nginx as a reverse proxy in Nuxt application","Deploy and set up the nginx in Nuxt application","\u002Fuploads\u002Fthumbnails\u002F23c9fd84-6a39-40f1-876f-ba81011ccf06_nginx_nux.jpeg","2026-05-03T10:00:48.702Z",{"alias":62,"title":63,"description":64,"thumbnail":65,"createdAt":66,"tutorialAlias":30,"lessonAlias":30},"deploy-spring-boot-application-with-docker","Deploy Spring Boot Application with Docker on Ubuntu Server","The ultimate guide to deploying our Spring Boot application with Docker on an Ubuntu server","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F55a11844-d1e9-4e83-80e5-c6bb6df7d58b_intellij-idea-build.png","2026-05-03T05:58:55.642Z",{"alias":68,"title":69,"description":70,"thumbnail":71,"createdAt":72,"tutorialAlias":30,"lessonAlias":30},"how-to-install-and-setup-the-docker-on-ubuntu","How to install and setup the docker on Ubuntu","Setting up Docker in Ubuntu Linux","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F6c8baf8b-90b9-486c-8a92-56621ea6a234_show_container.png","2026-05-02T12:15:48.659Z",{"alias":74,"title":75,"description":76,"thumbnail":77,"createdAt":78,"tutorialAlias":30,"lessonAlias":30},"how-to-deploy-nuxt-app-in-ubuntu-server","How to deploy Nuxt app in Ubuntu Server","Deploy Nuxt App in Linux VM","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F808571e8-1ce9-4e1b-901f-7afd81f4c7df_pm2.png","2026-05-02T08:11:55.437Z"]