Quick Start

Getting started with BubblesJS is easy! Let's create your first project.

Environment Requirements

• Node.js: ^20.19.0 || >=22.12.0
• Package manager: npm, yarn, pnpm, or bun

Node.js 24 LTS is recommended. Monorepo templates use pnpm workspaces, and the NestJS template's localization CLI requires Node.js 22.18+. Templates using Vite+ also require the Vite+ CLI.

Create Project

You can use create-bubbles to create a new BubblesJS project:

npm

npm create bubbles@latest my-project

yarn

yarn create bubbles my-project

pnpm

pnpm create bubbles@latest my-project

bun

bun create bubbles@latest my-project

Choose Template

During project creation, you'll be prompted to select a template:

• Vue: vue-vp-eslint, or vp-vue-eslint-vapor to evaluate Vapor mode.
• React: react-rsbuild-biome, vp-react, or vp-react-shadcn.
• Full-stack: vp-monorepo-react-nestjs, with React / Vue frontends, a NestJS backend, shared code, and localization packages.
• Mini-programs / H5: taro-vue-eslint or taro-react-oxc.
• Next.js: nextjs-vinext-eslint, powered by Vinext.
• Electron: create-eletron-vite, which launches the upstream Electron scaffolder.

You can also select a template directly:

pnpm create bubbles@latest my-project --template vue-vp-eslint

See the template overview for stack details and repository preview templates.

Start Development

For the vue-vp-eslint single-app template, enter the project directory, install dependencies, and start development:

cd my-project

npm

# Install dependencies
npm install

# Start development server
npm run dev

yarn

# Install dependencies
yarn install

# Start development server
yarn dev

pnpm

# Install dependencies
pnpm install

# Start development server
pnpm dev

bun

# Install dependencies
bun install

# Start development server
bun dev

Project Structure

The generated structure depends on the template. Single-app templates usually include src/, public/, package.json, and vite.config.ts or rsbuild.config.ts. The NestJS monorepo includes apps/web, apps/web-vue, apps/server, packages/shared, packages/i18n, and pnpm-workspace.yaml.

Taro templates use dev:weapp for WeChat mini-programs or dev:h5 for H5, with no generic dev script. Full-stack templates require database and Redis setup before you start the frontend you need. Electron uses the scripts generated by its upstream scaffolder. Follow the corresponding template page for setup details.

Next Steps

• Packages: installation, examples, and API references on each package page.
• Templates: stack details and template-specific development and build commands.