Cloudflare Workers is probably the easiest way to deploy super fast serverless code to edge locations around the world. In this post, we'll explore what it takes to deploy a Vue application with Workers (hint: it doesn't take much).
Prerequisites
You'll need a Cloudflare account with Cloudflare Workers enabled, as well as the Workers Unlimited Plan.
I was able to test with the free plan so you probably can, too, but I recommend upgrading because it's a great deal.
Create a Vue App
To get started, let's create a Vue app via the CLI with npx @vue/cli create vue-on-workers && cd vue-on-workers
. This will create our app, install our dependencies, and put us right where we need to be.
Install the Wrangler CLI
Wrangler is a sweet CLI that Cloudflare cooked up for us. Install it with npm i -g @cloudflare/wrangler
.
For this next part, you'll need an API Token. TIP: Use the "Edit Cloudflare Workers" template.
Run wrangler config
to get set up using the CLI.
Configure Your Project
With our Vue app created and Wrangler all config'd up, we can now turn our Vue project into a Wrangler project by running wrangler init --site
.
You may notice your project now has a wrangler.toml
file as well as an additional directory, called workers-site
.
Now, all that's left to do is add a couple things to the config file. Add your account_id
(can be found in the bottom-right of your Cloudflare dashboard) and ensure bucket
is set to the dist
directory:
name = "vue-on-workers"
type = "webpack"
account_id = "add_your_account_id" # HERE
workers_dev = true
route = ""
zone_id = ""
[site]
bucket = "dist" # AND HERE
entry-point = "workers-site"
Deploy to Workers
Once you've set those two items in your wrangler.toml
file, run npm run build && wrangler publish
to build and deploy!
That's it!
🎉🎉🎉
Additional Reading & Considerations
- There's additional work that needs to be done in order to ensure that Vue Router can handle routing appropriately, which you can read more about in this great Stack Overflow answer.
- Workers is a great (possibly better) solution for hosting a statically-generated site, like the ones you get from Gridsome, Gatsby, or Hugo.
- Read more about hosting a site on Cloudflare Workers.
Need some help? Want to chat? Feel free to reach out.
Top comments (0)