host vue app on digitalocean: Free Static Tier, Git-Push Deploys, and a $200 Credit to Start

If you've ever finished a Vue app, hit npm run build, and then stared at the resulting dist/ folder wondering what to actually do with it — you're in good company. That last mile, getting a compiled Vue SPA in front of real humans, is where a lot of side projects quietly die. The good news is that hosting a Vue app on DigitalOcean is one of the more painless ways to close that gap, and depending on what you're shipping, it can even cost you nothing.

This is a practical, opinionated walkthrough on how to host a Vue app on DigitalOcean, written for people who would rather ship than babysit a server.

Why Vue apps and DigitalOcean play well together

Most Vue apps end up as a pile of static files after vite build or vue-cli-service build runs. That's a beautiful thing, because it means you don't actually need a Node runtime in production. You just need a place that serves HTML, JS, and CSS, ideally behind a CDN, ideally with HTTPS already wired up.

DigitalOcean's App Platform has a dedicated Static Sites component that does exactly this. You point it at a GitHub/GitLab repo, tell it your build command (npm run build) and output directory (dist), and it handles the rest: the build, the CDN, the TLS certificate, the global edge network, and even DDoS mitigation. No nginx config file, no pm2, no SSH key management, no 2 AM security updates.

For Vue specifically, this fits the framework's output model perfectly. A vanilla Vue 3 SPA, a Vite-built app, a Nuxt static export, a Quasar SPA — they all produce a dist/ (or equivalent) folder that App Platform can host as a static site.

The free tier, and what it actually gives you

Here's the part that surprises people: App Platform's static site hosting has a genuine, no-credit-card-tricks free tier. As of the current pricing, you can run up to 3 static site apps at $0/month, each with 1 GiB of outbound data transfer included. If you need a 4th static app, additional ones run $3.00/month each.

What you get for free, verified against DigitalOcean's pricing page:

• Deployment from GitHub and GitLab

• Automatic HTTPS

• Custom domain support (bring your own)

• Global CDN

• DDoS mitigation

• Unlimited team members

What you do not get on the free tier, and would need to upgrade for: deployment from container registries, shared/dedicated CPU containers, autoscaling, dedicated egress IPs, and development databases. For a pure frontend Vue app, none of that matters. For a Vue app that talks to a backend, you'll likely move to the paid tier once you add a web service or worker component.

👉 Claim your $200 in DigitalOcean credit and deploy your Vue app

That signup credit — historically $200 valid for 60 days for eligible new accounts — is more than enough to run a paid App Platform container for the trial period while you figure out whether you need to scale.

The two real deployment paths

There are two legitimate ways to host a Vue app on DigitalOcean, and the right choice depends on whether your app is frontend-only or full-stack.

Path 1: App Platform static site (the one most people want)

This is the recommended path for any Vue app that compiles to static files. The flow, which you can verify in DigitalOcean's official sample-vuejs repository, looks like this:

1. Push your Vue project to a GitHub or GitLab repo (forking DigitalOcean's own sample-vuejs repo is a quick way to test the workflow first).

2. In the DigitalOcean control panel, go to Apps → Create App, pick your repo and branch.

3. App Platform auto-detects the Vue build. You confirm the build command (npm run build), the output directory (dist), and the HTTP route.

4. Pick a region — though it barely matters, because all App Platform apps sit behind a global CDN anyway.

5. Confirm the plan. For a static-only app, this lands on the free tier.

6. Click Launch. Watch the build logs. When it's done, click Live App and you'll see your Vue app running on a *.ondigitalocean.app URL with HTTPS already on.

From then on, every git push to your main branch triggers a zero-downtime redeploy. That's the entire workflow. No Dockerfile required unless you want one.

Path 2: Droplet (when you want full control, or a backend too)

A Droplet is just a Linux VM you fully own. Starting at $4/month for the smallest shared instance, it's the path for people who want nginx config files, systemd services, and the ability to run a Node/Python/PHP backend alongside the Vue frontend on the same box.

The trade-off is real: you're now responsible for OS updates, firewall rules, SSL certificate renewal, and backups. For a simple portfolio or marketing site, that's overkill. For a side project that's already half-VM anyway, it's fine and often cheaper than running separate managed services.

There's also a middle ground — run the Vue static frontend on App Platform's free tier, and the API as a separate web service component on the paid tier. That keeps the frontend free and gives you autoscaling and managed TLS on the backend without owning a VM.

Picking a plan: who should use what

Because tables aren't allowed here, here's the plan breakdown as plain choices.

Static Site (Free Tier) — $0/month. Includes 1 GiB transfer per app, GitHub/GitLab deploys, automatic HTTPS, custom domains, global CDN, DDoS mitigation. Best for: portfolios, marketing sites, documentation sites, demos, and any Vue SPA that's frontend-only. This is the plan most readers of this article should land on.

👉 Start a free static Vue deployment on App Platform

Shared Container, 512 MiB / 1 vCPU — $5/month, with 50 GiB transfer. The smallest paid container. Best for: Vue apps that need a small backend (Node Express, FastAPI, etc.) alongside the frontend, low-traffic web services, hobby projects that outgrew the free tier.

Shared Container, 1 GiB / 1 vCPU — $10/month, with 100 GiB transfer. Best for: small SaaS frontends with a backend, APIs that need a bit more headroom, apps that you'd actually be mildly embarrassed if they crashed on Hacker News.

Shared Container, 1 GiB / 1 vCPU (scalable) — $12/month, with 150 GiB transfer. Best for: workloads that want horizontal room without going dedicated.

Shared Container, 2 GiB / 1 vCPU — $25/month, with 200 GiB transfer. Best for: mid-traffic apps, internal tools with real users, staging environments that mirror production load.

Shared Container, 4 GiB / 2 vCPUs — $50/month, with 250 GiB transfer. Best for: production web apps with steady traffic, the kind of thing where you'd notice if it went down.

A couple of notes on top of these: autoscaling is only available on dedicated instances, not shared ones. Static site components inside a paid app are $0 and don't count toward bandwidth. Outbound transfer beyond your allowance is $0.02 per GiB. A development database (512 MiB, PostgreSQL only) is $7/month extra if your Vue app needs one.

👉 Compare App Platform plans and pick one for your Vue app

The Vue SPA routing gotcha (read this part)

There's one specific thing that bites everyone hosting a Vue SPA — including on App Platform — and it's worth calling out: client-side routing.

If your Vue app uses Vue Router in history mode, and a user navigates directly to /dashboard or refreshes the page on /about, the browser asks the server for that path. If the server doesn't have a catch-all rule redirecting unknown paths back to index.html, you get a 404. App Platform's static site component handles this for you via a "catchall" route setting — you set a catchall document to index.html and you're done. The official docs cover this under "How to Manage Static Sites in App Platform." Don't skip it, or your routes will mysteriously break on refresh.

The same logic applies if you're on a Droplet: an nginx try_files $uri $uri/ /index.html; line in your server block does the same job. Same concept, different surface.

What this is actually good for

If your goal is "I built a Vue app, I want it on the internet, and I don't want to think about it after that" — App Platform's static tier is hard to beat at $0. If your goal is "I want to learn how the Linux sausage gets made, and I might add a backend later" — a $4 Droplet is the more interesting classroom. If your goal is "I'm shipping something real, with a real backend, and I want it to scale without me waking up at night" — the paid App Platform tier is the grown-up answer.

The fact that all three paths live under one account, behind one control panel, with the same CDN and the same $200 signup credit to experiment with, is what makes hosting a Vue app on DigitalOcean a reasonable default rather than a project in itself. You can start on the free static tier, outgrow it, and graduate to a paid container without re-architecting anything — just add a component to the same app.

That's the whole pitch. Build the Vue app, push it, point App Platform at the repo, and let it handle the boring parts.

👉 Spin up your Vue app on DigitalOcean and grab the new-user credit