Getting Started

Development Environment Setup

Follow this guide to install the essential tools for building Vue.js applications with PocketBase.

Setup Progress0%

VisualNode.jsPocketBaseGitHub

📋 Overview

This guide walks you through setting up a complete development environment for building modern web applications with Vue.js and PocketBase. Each step includes download links, installation instructions, and verification commands.

🖥️ Your System

Operating System

Detecting...

Browser

Other

Note: Node.js version detection requires terminal access. Use the verification commands below.

Estimated time: 15-20 minutes. All tools are free and open-source. Restart your terminal after installing Node.js to ensure PATH updates take effect.

💻 Step 1: Visual Studio Code

VSCode is a lightweight but powerful source code editor with built-in support for JavaScript, JavaScript, Vue.js, and thousands of extensions.

Download VSCode

Free • Windows, macOS, Linux

downloadDownload

Verify installation:

code --version

Run this in your terminal. You should see version numbers if installed correctly.

💡 Pro Tips:

•Install the "Vue Language Features" extension for Vue.js support
•Enable "Format on Save" in settings for consistent code style
•Use Ctrl+` (or Cmd+`) to open the integrated terminal
•Try the "Live Server" extension for instant browser preview

🔌 Recommended Extensions

Vue Language Features

Vue.js

Syntax highlighting, IntelliSense

ESLint

Microsoft

Code linting and error checking

Prettier

Automatic code formatting

GitLens

GitKraken

Enhanced Git blame and history

🟢 Step 2: Node.js

Node.js allows you to run JavaScript outside the browser. It includes npm(Node Package Manager) for installing libraries and tools.

Download Node.js LTS

Recommended for most users • Includes npm

downloadDownload LTS

Verify installation:

node -v && npm -v

Run this in your terminal. You should see version numbers if installed correctly.

Expected output:

v20.x.x
10.x.x

💡 Pro Tips:

•Always download the LTS (Long Term Support) version for stability
•Node.js includes npm (Node Package Manager) automatically
•Restart your terminal after installation to update PATH
•Use nvm (Node Version Manager) to switch between Node versions easily

📊 Version Compatibility

Tool	Min Version	Recommended
Node.js	18.x	20.x LTS
npm	9.x	10.x
Vue CLI / Vite	-	Latest

🗄️ Step 3: PocketBase

PocketBase is a single-file backend with SQLite, authentication, file storage, and a real-time REST API. No complex setup required.

Download PocketBase

Open Source • Single executable

downloadGet Latest Release

After download:

# Extract the downloaded file
# Navigate to the folder in terminal
cd ~/Downloads/pocketbase

# Start the server
./pocketbase serve

# Access the admin UI:
# → http://127.0.0.1:8090/_/

💡 Pro Tips:

•Download the version matching your OS (Windows/macOS/Linux)
•Extract the executable to a folder you'll remember (e.g., ~/tools/pocketbase)
•Run with ./pocketbase serve to start the backend server
•The admin UI is at http://127.0.0.1:8090/_/ — create your first admin account there

🗄️

SQLite Database

File-based, zero-config, portable

🔐

Auth Built-in

Email/password, OAuth, tokens

📁

File Storage

Upload & serve files with rules

⚡

Realtime API

WebSocket subscriptions included

🐙 Step 4: GitHub Account

GitHub is the world's leading platform for version control, collaboration, and open-source development.

Create GitHub Account

Free tier includes unlimited public repos

downloadSign Up Free

💡 Pro Tips:

•Use a professional email address for your account
•Enable two-factor authentication for security
•Generate an SSH key for passwordless Git operations
•Explore GitHub Student Developer Pack if you're eligible
•Create a new repository for each project you build

⚙️ Configure Git Locally

# Set your identity (use the email from your GitHub account)
git config --global user.name "Your Name"
git config --global user.email "[email protected]"

# Optional: Set default branch name
git config --global init.defaultBranch main

# Verify configuration
git config --global --list

🔑 Generate SSH Key (Recommended)

# Generate new SSH key
ssh-keygen -t ed25519 -C "[email protected]"

# Start ssh-agent and add key
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

# Copy public key to clipboard (macOS)
pbcopy < ~/.ssh/id_ed25519.pub

# Then add it to GitHub: Settings → SSH and GPG keys → New SSH key

🔧 Troubleshooting

❓ Command not found: node / npm / code

Restart your terminal or computer after installation. On Windows, ensure the installer added Node to your PATH. On macOS/Linux, try running source ~/.zshrc or source ~/.bash_profile.

❓ PocketBase won't start / port already in use

Check if another instance is running. Use lsof -i :8090 (macOS/Linux) or netstat -ano | findstr :8090 (Windows) to find the process. Or start PocketBase on a different port: ./pocketbase serve --http=0.0.0.0:8091

❓ Permission denied when running ./pocketbase

On macOS/Linux, make the file executable: chmod +x pocketbase. On Windows, right-click the .exe → Properties → Unblock if you see a security warning.

❓ Git authentication fails

If using HTTPS, use a Personal Access Token instead of your password. Better yet, set up SSH keys for passwordless authentication.

❓ Vue dev server won't start

Ensure Node.js is installed correctly (node -v). Try deleting node_modules and package-lock.json, then run npm install again. Check that your project's Node version matches the requirements.

Still stuck? Search the error message online, check the official docs, or ask for help in community forums. Most setup issues have been solved before!