DEV Community

Phat Tran
Phat Tran

Posted on

How to Deploy a React, Vue, Vite, Astro, Static SPA with the PocketBase Cloud CLI

#pocketbase #pocketbasecloud #tutorial 

Deploying a static frontend should be simple.

With the PocketBase Cloud CLI, you can build and upload your SPA directly from the terminal using:

```bash
pb cloud frontend deploy
Enter fullscreen mode Exit fullscreen mode

This guide covers static frontend deployment only.

It does not cover SSR, Node.js servers, Docker, or backend deployment.

Deploy a static SPA to PocketBase Cloud using one CLI command

What can you deploy?

You can deploy static frontend projects built with tools such as:

  • React with Vite
  • Vue with Vite
  • Astro in static mode
  • Plain HTML, CSS, and JavaScript

After running the build command, your project usually creates a folder like this:

dist/
├── index.html
├── assets/
├── app.js
└── style.css
Enter fullscreen mode Exit fullscreen mode

These are the files that will be uploaded to PocketBase Cloud.

Step 1: Install the CLI

Install the PocketBase Cloud CLI with npm:

npm install -g @pocketbasecloud/cli
Enter fullscreen mode Exit fullscreen mode

Check that it works:

pb --help
Enter fullscreen mode Exit fullscreen mode

Step 2: Log in

Run:

pb cloud login
Enter fullscreen mode Exit fullscreen mode

Your browser will open so you can sign in to your PocketBase Cloud account.

Step 3: Open your frontend project

Go to your SPA project directory:

cd my-spa
Enter fullscreen mode Exit fullscreen mode

Install the project dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Make sure the frontend builds successfully:

npm run build
Enter fullscreen mode Exit fullscreen mode

For most Vite projects, the generated files will be inside the dist folder.

Step 4: Deploy the SPA

Run:

pb cloud frontend deploy --name my-spa
Enter fullscreen mode Exit fullscreen mode

The CLI will:

  1. Detect your build command
  2. Build the frontend
  3. Find the generated static files
  4. Upload them to PocketBase Cloud
  5. Return a public website URL

Your SPA is now online.

Step 5: Deploy future updates

After the first deployment, the project is linked through a local pb.json file.

The next time you update your frontend, you only need to run:

pb cloud frontend deploy
Enter fullscreen mode Exit fullscreen mode

The CLI will rebuild and update the existing deployment.

Complete workflow

The full process looks like this:

npm install -g @pocketbasecloud/cli

pb cloud login

cd my-spa

npm install

pb cloud frontend deploy --name my-spa
Enter fullscreen mode Exit fullscreen mode

For future updates:

pb cloud frontend deploy
Enter fullscreen mode Exit fullscreen mode

Important note about environment variables

Frontend environment variables are included in the JavaScript bundle during the build.

For example, a Vite project may use:

VITE_API_URL=https://your.pocketbasecloud.com
Enter fullscreen mode Exit fullscreen mode

Do not store passwords, private tokens, or secret API keys in frontend environment variables.

Anything included in a static frontend can be viewed by users in the browser.

Final result

The deployment flow is simple:

SPA source code
      ↓
Build folder
      ↓
Upload
      ↓
Live website
Enter fullscreen mode Exit fullscreen mode

The main command is:

pb cloud frontend deploy
Enter fullscreen mode Exit fullscreen mode

You can learn more about PocketBase Cloud here:

https://pocketbasecloud.com

You can view the CLI source code here:

https://github.com/pocketbasecloud/cli

Top comments (0)