Posts Learn Categories Tags About
/
Deploying NuxtJS application to Cloudflare Pages cover

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

3 months ago

6 mins read

14 views

Cloudflare Pages
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 rater 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. You may
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