Posts Learn Components Snippets Categories Tags About
/

Deploying NuxtJS application to Cloudflare Pages

Learn how to easily deploy NuxtJS application to Cloudflare Pages and get it serve by Cloudflare world-class infrastructure

6 months ago

6 mins read

66 views

In this post, you'll be learning how to deploy/host NuxtJS application to Cloudflare Pages. Although this tutorial is tailored for NuxtJS application, the fundamental is pretty much the same for other front-end projects since the platform itself is built especially to host JAMstack application.
Cloudflare Pages Homepage

Currently, Cloudflare Pages is still in open beta and but it's accessible for everyone to get started and try out the platform. Upon registering we are greeted by a screen that can allow us to right away create a project. The process to get started is really painless and it's very easy to get a project up and running.
Cloudflare Pages Dashboard

NuxtJS Example Application


For the sake of this example, we'll be deploying HackerNews clone built with Nuxt.js which you can directly get the source code from GitHub repository.

The easiest way to prepare the repository is to just fork it rather than cloning the project to the local machine. Since we'll allow Cloudflare pages to retrieve the code that we have just updated on the front-end you'll have to connect it to GitHub and give permission for Cloudflare to access the repository.
Connect with Github account


Once it's linked, select the repository to be hosted on Cloudflare Pages and in this case the Hackernews NuxtJS project.
Cloudflare Pages select repository

For the build settings, choose the Nuxt.js preset and this will autofill the build command as well as the output directory to dist.
Build Settings


By now the pages will be up and running on Cloudflare Pages. Visit HackerNews clone built with Nuxt.js.
HackerNews clone built with Nxut.js on Cloudflare Pages
new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components