Table of Contents
Workers Sites are very appealing due to
- Low Cost
- Very Fast
- 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.
You can find a full source of the project available here on GitHub.
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:Essential Reading: Learn React from Scratch! (2020 Edition)
- 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.
It'll ask you for your Cloudflare email and your Global API key. You an obtain your Global API key from
- Click Get API Key below the API section to jump to your Profile page.
- Scroll to API Keys, and click View to copy your Global API Key.
Now we're ready to create a 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.
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:
- Log in to your Cloudflare account and select the desired domain.
- Select the Overview tab on the navigation bar.
- Scroll to the API section and select Click to copy to copy your Account ID.
- 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
Now set the value of
dist, as our NuxtJS will generate the static files inside
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.
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.
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.
I am adding more pages like about, contact, etc. to check if routing works properly.
pages/about.vue and deployed it again.
You can check out new page at https://nuxt\-cloudflare\-workers.iconscout.workers.dev/about.
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.
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.
Like this article? Follow @TarunMangukiya on Twitter.
Like this article? Follow @TarunMangukiya on Twitter