Hosting Vue on Cloudflare Pages

Ivan Radunovic

Feb 22, 20245 min read
Hosting Vue on Cloudflare Pages

By the end of this tutorial you'll have your Vue application live on Cloudflare Pages with a custom domain and an SSL certificate.

First thing is to use existing or a new Vue application and push it to the GitHub or GitLab repository.

In this case I'll create new Vue app.

Creating new Vue application

Everything I need to do is run

npm create vue@latest

Wizzard will guide me through the process. For this demo I requested version of Vue with a router, so we can see how it shows different pages on Cloudflare.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

After installation is done, I need to install dependencies and run it.

npm install
npm run dev

Pushing code to the GitHub Repository

Inside the Vue directory run git init.

I'll add files to the tracking:

git add .
git commit -m "Initial commit"
git remote add origin [email protected]:CodingoTuts/vue-cloudflare.git
git push -u origin master

Now my application is on GitHub and I can switch to Cloudflare.

Create Cloudflare Pages application

Now from my Cloudflare account I'll visit sidebar nav and click Workers & Pages and open Pages tab.

Cloudflare Pages Overview

From this page it's visible that it's possible to connect GitHub or GitLab repository.

I'll choose GitHub.

Authorizing Cloudflare Pages to access the repo

Cloudflare redirected me to the GitHub authorization page.

There are 2 options:

  • Approve access to all repositories
  • Approve only selected repositories

It's better to keep access minimal and authorize only what's needed.

Install & Authorize Cloudflare Pages app in Github repo

After authorizing Cloudflare Pages application access to Github it'll redirect back to Cloudflare.

Github repository connected to Cloudflare Pages

It's time to Begin setup.

Setup Vue build and deployment steps

Main inputs on this page are Framework presets all others are good by default.

Vue Setup building steps

Build command is npm run build and build output directory is /dist.

When setup is done, Cloudflare will assign some subdomain of pages.dev to the application.

Adding custom domain to Cloudflare Pages

If your domain is already on the same Cloudflare account it'll be very simple.

Go visit Custom domains tab and enter the wanted domain.

Configuring custom domain for Cloudflare Pages

Continue to next page.

Confirm new DNS record for custom domain

After click the Activate domain button, activation process will starat.

In couple of seconds new domain will be active and SSL will be enabled on it.

Custom domain is active

Benefits of hosting Vue application on Cloudflare Pages

There are many benefits of hosting Vue on Cloudflare Pages and not so many downsides.

  • No server management - this is a managed serverless setup, sysadmin knowledge is not required.
  • Nothing can go wrong - setup is so simple that almost nothing can go wrong
  • Autoscalling - Cloudflare pages have autoscalling, no we don't need to worry about number of users, sessions, etc.
  • Free - Hosting on Cloudflare pages is free
  • Cloudflare suite - Access to the entire Cloudflare suite for free, including: SSL, caching, DDOS protection.

The only downside that I noticed is there is no way to "login" into the instance, since there is no instance. Meaning I am not able to directly configure server, and make some more complex setups.

These complex setups are handled on Cloudflare using Page rules. Good thing is that complex scenarios are very rarely required.

Share
Author Photo
Ivan Radunovic is a Senior Developer with over 11 years of experience in web development. His expertise are Laravel SaaS solutions. So far he developed or took part in 300+ Laravel projects.

More Vue.js tutorials

Vue JS Routing - Quick start guide

This Vue.js routing tutorial covers everything from basic setup with Vue Router to advanced techniques like dynamic and nested routes, route guards, and lazy loading, offering practical examples and FAQs for developers.

Feb 25, 2024 Ivan Radunovic