Skip to main content

React(Vite) Quick Start

Prerequisites​

Before you begin, ensure you have completed the following:

  1. Activate CloudBase Environment: Create Environment
  2. Install Node.js: Download Node.js (LTS version recommended)

For more details, see: React(Vite) Full Documentation

Install the CloudBase AI Plugin​

Optional: If you develop with an AI coding assistant (such as Cursor, Claude Code, CodeBuddy, etc.), we recommend completing this step so the AI has CloudBase development capabilities.

Copy the AI prompt into your AI IDE​

Enter the following in your AI chat:

Help me get set up with CloudBase. Do the following:
1. Open https://docs.cloudbase.net/skill.md and follow the instructions.
2. When done, tell me you're ready and suggest the most relevant next steps.

View skill.md →

Develop with Skills​

Tell the AI:

Use CloudBase Skills: Integrate CloudBase Web SDK in a React(Vite) app, including authentication and database

Skills docs →

You can also install CloudBase Skills manually:

npx skills add tencentcloudbase/cloudbase-skills -y

Install SDK​

@cloudbase/js-sdk allows you to use JavaScript on Web (such as PC web pages, WeChat H5, etc.) to access CloudBase services and resources.（）

npm​

npm i @cloudbase/js-sdk

yarn​

yarn add @cloudbase/js-sdk

pnpm​

pnpm add @cloudbase/js-sdk

Initialize SDK​

Add the following code to your React project

src/utils/cloudbase.js​

import cloudbaseSDK from "@cloudbase/js-sdk";

export const cloudbase = cloudbaseSDK.init({
  env: import.meta.env.VITE_CLOUDBASE_ENV_ID,
  region: import.meta.env.VITE_CLOUDBASE_REGION,
  accessKey: import.meta.env.VITE_CLOUDBASE_ACCESS_KEY
});

.env​

# Environment ID
VITE_CLOUDBASE_ENV_ID={%ENV_ID%}

# Region
VITE_CLOUDBASE_REGION={%REGION%}

# Anonymous access token
VITE_CLOUDBASE_ACCESS_KEY={%PUBLISHABLE_KEY%}