Deploying a Frontend

PocketBase Cloud hosts static sites with HTTPS and a dedicated subdomain — ideal for the frontend of the app whose data lives in your PocketBase instance. Any framework that produces static output works: React (Vite), Vue, Svelte, Astro, plain HTML, and more.

All plans include frontend hosting (5 frontends on Free and Starter, unlimited on Pro).

Step 1: Build your site

Run your framework’s production build locally:

npm run build

This produces a folder of static files — typically dist/ (Vite, Astro) or build/ (Create React App, SvelteKit static adapter).

Make sure your PocketBase URL is baked in at build time:

VITE_POCKETBASE_URL=https://<instance-name>.pocketbasecloud.com npm run build

Step 2: Create the frontend

Open your project and go to the Frontends tab
Click New Frontend
Enter a name (this becomes the subdomain) and click Create

Step 3: Deploy

Zip the contents of your build output folder (the ZIP should contain index.html at its root, not dist/index.html)
On the frontend’s Deploy page, upload the ZIP
Click Deploy

Provisioning takes under a minute. Your site is then live at:

https://<frontend-name>.pocketbasecloud.com

Deploying a new version is the same flow — build, zip, upload.

Single-page apps and routing

Client-side routers (React Router, Vue Router) handle navigation in the browser, so deep links like /dashboard/settings resolve to your index.html. If you use a framework with static file-based routing (Astro, static-exported Next.js), each page is served as its own file.

Talking to PocketBase from the browser

Your frontend calls the PocketBase instance directly — see Connecting Your App. Both services are served over HTTPS on the same platform, so there are no mixed-content or certificate issues to deal with.

Remember that anything shipped to the browser is public: the instance URL is fine to expose, and per-user data protection belongs in your collection’s API rules, not in frontend code.

Full-stack in one project

A typical production setup on PocketBase Cloud is one project containing:

a PocketBase instance — database, auth, files
a frontend — your static UI
optionally a backend — server-side code for payments, webhooks, or server-rendered pages (Pro plan)

Templates on the Projects page can scaffold this whole stack in one click.