Learn how to deploy a static NuxtJS site to the Cloudflare Workers

Recently Cloudflare announced Workers support for static sites. This opens up a whole new era of static website deployment. Cloudflare Workers is a Serverless platform that allows us to write and run JavaScript and WebAssembly on their Edge network. Now with the help of Cloudflare KV and Workers, we can deploy static websites built or generated with Nuxt, Hugo, Gatsby or Jekyll directly to their network.

Table of Contents

• Prerequisites
• Create a new NuxtJS Project
• Create a Wrangler config
• Deploy it to Cloudflare Workers
• Adding new pages
• Testing Performance
• Conclusion

Workers Sites are very appealing due to

• Low Cost
• Very Fast
• Secure
• Easy to Scale

I am using Cloudflare Workers since last 1 year for different purposes. I am mostly working with VueJS for frontend development, and prefer NuxtJS for complex websites that requires support for routing, store management and many more.

When they announced support for static sites, first thing on my mind was that what if we can deploy NuxtJS site to Workers? This will be game changing, as I won’t have to switch between multiple providers like Netlify, S3 static sites and others. Out of curiosity, I quickly boot-up a small NuxtJS project and deployed it. Here’s the screenshot of full-fledged NuxtJS site deployed on Cloudflare Workers.

Prerequisites

In this tutorial, you’ll learn how to deploy your NuxtJS site to the Cloudflare Workers. First we’ll create a new NuxtJS project and then we’ll deploy it.

To publish your site to Cloudflare Workers, you’ll need:

• A Cloudflare account with Workers Unlimited plan (it’s just $5/m and includes first 10M requests)
• Latest version of Wrangler CLI
• Basic knowledge of VueJS/NuxtJS

Let’s install Wrangler CLI (skip if already installed)

npm i @cloudflare/wrangler -g

Now, you’ll need to configure Wrangler for your Cloudflare account. You can run config command to authenticate for your account.

wrangler config

It’ll ask you for your Cloudflare email and your Global API key. You an obtain your Global API key from

1. Click Get API Key below the API section to jump to your Profile page.
2. Scroll to API Keys, and click View to copy your Global API Key.

Now we’re ready to create a project.

Create a new NuxtJS Project

Let’s start with creating an empty NuxtJS project. You can run the below command:

npx create-nuxt-app nuxt-cloudflare-workers

Here I am using npm package manager to create new NuxtJS project named nuxt-cloudflare-workers. It’ll ask you some questions regarding project name, description, server-side framework, UI framework, Testing and more. you use the default options or choose what you’re good at. It’ll also install node_modules for you.

Let’s preview our site locally. Run the below command to preview the site:

cd nuxt-cloudflare-workers
npm run dev

Now open up http://localhost:3000/ on your device and you’ll see something like below.

Let’s edit some text in pages/index.vue to look it better. I’ll change title “nuxt-cloudflare-workers” to “NuxtJS” and change description to “Yay! It’s running on Cloudflare Workers.”

Do open up http://localhost:3000/ and confirm that the text is changed.

Create a Wrangler config

In previous step, we created a NuxtJS static site. In this step we will create a Wrangler configuration file.

Let’s init Wrangler project:

wrangler init --site

It will create a sample wrangler.toml file in your root directory and create some files inside workers-site directory. It looks something like below:

account_id = ""
name = "nuxt-cloudflare-workers"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

[site]
bucket = ""
entry-point = "workers-site"

Let’s customize this for our NuxtJS project. Here, account_id is your Cloudflare Account ID. If you are deploying it to your custom domain (other than workers.dev), you will need edit zone_id according to the Zone ID of your domain.

To obtain your Account ID & Zone ID:

1. Log in to your Cloudflare account and select the desired domain.
2. Select the Overview tab on the navigation bar.
3. Scroll to the API section and select Click to copy to copy your Account ID.
4. Copy your Zone ID.

You can edit the name of your Wrangler project, here I’ve kept it nuxt-cloudflare-workers. Thus, it’ll be deployed to nuxt-cloudflare-workers.<workers-sub-domain>.workers.dev.

Now set the value of bucket to dist, as our NuxtJS will generate the static files inside dist directory.

The final wrangler.toml file will be something like below:

account_id = "<account-id>"
name = "nuxt-cloudflare-workers"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

[site]
bucket = "dist"
entry-point = "workers-site"

So, our NuxtJS project is ready to deploy. In this step, we configured our wrangler.toml file to deploy this project as a static Cloudflare Workers Site.

Deploy it to Cloudflare Workers

In this step, we’ll build our site and deploy it.

Let’s build our static site using:

npm run generate

This will create a static site inside dist directory with all the compiled html, css & js.

Now let’s deploy it.

wrangler publish

This will deploy static site from dist directory to Cloudflare Workers. It might take some time to get it live.

You can go to https://nuxt-cloudflare-workers.iconscout.workers.dev and check it.

Adding new pages

I am adding more pages like about, contact, etc. to check if routing works properly.

I’ve created pages/about.vue and deployed it again.

You can check out new page at https://nuxt-cloudflare-workers.iconscout.workers.dev/about.

Testing Performance

Cloudflare Worker Site is deployed on the Cloudflare Edge network which gives it low latency, high speed and performance. I’ve checked the Google PageSpeed Insights of our newly deployed site and the results are mind blowing. It scored 100/100 with 50ms of first server response time.

Conclusion

Cloudflare is working hard to make developers life easy with their blazing fast CDN, DNS, Page Rules, Workers and many more. Now, with Cloudflare Worker Sites you will be able to deploy all static generated sites in VueJS, React, Next, NuxtJS, Hugo, Gatsby or Jekyll with a click. This can improve latency, speed and performance.

I hope you found this tutorial helpful and will be able to deploy your first Workers site right now. You can find a full source of the project available here on GitHub.

#nuxt #vue-js #vue #javascript #cloud