Skip to main content

Web Application Quick Start

Through this guide, you will learn how to use cloud development to build and deploy Web applications, including static websites, dynamic websites, SSR, and other types of applications.

🌟 Advantages of Cloud Development for Web Applications​

  • 🚀 Rapid Deployment: One-click deployment to global CDN
  • 🔒 Secure and Reliable: Built-in authentication and access control
  • 📊 Data Management: Cloud Database and Cloud Storage
  • ⚡ High Performance: Global acceleration and intelligent caching
  • 💰 Cost Optimization: Pay-as-you-go pricing with no server maintenance required

📋 Preparations​

Before you begin, ensure you have completed:

  1. Activate a CloudBase environment: Activate a CloudBase environment
  2. Install Node.js: Download Node.js (recommended LTS version)
  3. Install CLI tool: Install CloudBase CLI

🚀 Step 1: Use an official template (Recommended)​

1. Select a tech stack​

We provide templates for multiple mainstream frameworks:

2. Clone the template project​

Take the React template as an example:

# Clone the project
git clone https://github.com/TencentCloudBase/awesome-cloudbase-examples.git

# Navigate to the project
cd awesome-cloudbase-examples/web/cloudbase-react-template

# Install dependency.
npm install

3. Configure the environment​

  1. Configure the environment ID: Replace ENV_ID in src/utils/cloudbase.js with your environment ID
// src/utils/cloudbase.js
const ENV_ID = 'your-env-id'; // Replace with your environment ID
  1. Configure the deployment domain: Replace the base path in vite.config.js with your CloudBase environment domain
// vite.config.js
export default {
    base: '/react-temp/', // Custom root path, after deployment access via $ip/react-temp/
    // ... other configurations
}

🔧 Step 2: Configure Security Domains​

Before using the CloudBase Web SDK, security domains need to be configured:

  1. Log in to the CloudBase Console

  2. Navigate to Environment > Security Configuration

  3. Add your domain in "Web Security Domain":

    • Local development: localhost:3000, 127.0.0.1:3000

    • Production environment: your actual domain

Security Domains Note

Only domains in the security domain list can use the CloudBase Web SDK, which is designed to protect your data security.

🎯 Step 3: Enable Identity Authentication​

To allow users to log in, anonymous login must be enabled:

  1. Navigate to Environment > Login Authorization in the CloudBase Console
  2. Enable "Anonymous Login"
  3. Save configuration

🚀 Step 4: Local Development​

Using the Template Project​

# Start Development Server
npm run dev

The project will start at http://localhost:5173 (port may vary).

🚀 Step 5: Deploy to CloudBase​

  1. Build Project:
npm run build
  1. Log in to the CLI:
cloudbase login

  1. Enable Static Hosting: Enable the Static Website Hosting service in the CloudBase console

  2. Deploy Application:

# Deploy Build Artifacts to Static Hosting
cloudbase hosting deploy dist -e your-env-id

Method II: Manual Upload via Console​

  1. Build Project: Generate the dist directory

  2. Upload Files:

  1. Access Application: Access your application using the assigned default domain

🎯 Step 7: Add CloudBase features​

Now you can add powerful backend capabilities to your Web application:

Cloud Database Example​

// Get the database reference
const db = app.database();

// Add data
async function addData() {
    try {
        const result = await db.collection('todos').add({
            title: 'Learn Cloud Development',
            completed: false,
            createTime: new Date()
        });
        console.log('Added successfully', result);
    } catch (error) {
        console.error('Add failed', error);
    }
}

// Query data.
async function getData() {
    try {
        const result = await db.collection('todos').get();
        console.log('Query result', result.data);
    } catch (error) {
        console.error('Query failed', error);
    }
}

Cloud Storage Example​

Uploading Files
async function uploadFile(file) {
    try {
        const result = await app.uploadFile({
            cloudPath: `images/${Date.now()}-${file.name}`,
            filePath: file
        });
        console.log('Upload successful', result);
        return result.fileID;
    } catch (error) {
        console.error('Upload failed', error);
    }
}

Cloud Function Invocation Example​

// Invoke cloud function
async function callFunction() {
    try {
        const result = await app.callFunction({
            name: 'hello',
            data: {
                name: 'CloudBase'
            }
        });
        console.log('Invocation successful', result);
    } catch (error) {
        console.error('Call failed', error);
    }
}

📚 Deep Dive​

Core Features​

Advanced Features​

Development Tools​

Learning Documentation​

🎉 Congratulations! You have successfully created and deployed your first CloudBase Web application. Now you can start building more complex features!