Skip to main content

Web Quick Start

Preparations​

  1. Have a Tencent Cloud account
  2. Be sure to Create a CloudBase environment and obtain the Environment ID.
  3. Install Node.js
  4. Install Cloudbase CLI
npm install -g @cloudbase/cli
Note

If npm install -g @cloudbase/cli fails, you may need to modify npm permissions, or run the command as an administrator:

sudo npm install -g @cloudbase/cli

Step 1: Create Initial Project​

Use the command line to create a directory named my-cloudbase-app and two files under it.

mkdir my-cloudbase-app && cd my-cloudbase-app && touch index.html && touch cloudbaserc.json

There are two files in this directory: index.html and `cloudbaserc.json

├── cloudbaserc.json
└── index.html

Below is the content of index.html. We attempt to log in to CloudBase, and if successful, a pop-up window will appear.

<html>
  <head>
    <meta charset="utf-8" />
    <!-- Visit the npm registry to check the latest version https://www.npmjs.com/package/@cloudbase/js-sdk -->
    <script src="https://static.cloudbase.net/cloudbase-js-sdk/${version}/cloudbase.full.js"></script>
    <script>
      const app = cloudbase.init({
        env: "Your Environment ID", // Enter your environment ID here
      });
      app
        .auth()
        .anonymousAuthProvider()
        .signIn()
        .then(() => {
          alert("Logged in to CloudBase successfully!");
        });
    </script>
  </head>
  <body>
    Hello Cloudbase!
  </body>
</html>

Below is the content of cloudbaserc.json:

{
  "envId": "Your Environment ID"
}

Step 2: Adding Security Domains​

Log in to the CloudBase Console, and in the Security Configuration page, add the domain to the Web Security Domains.

Tip

Here we add localhost:5000 to the security domains, allowing pages under this domain to use the SDK to access CloudBase services.

Step 3: Enable Anonymous Login​

Refer to: Enabling Anonymous Login Authorization

Step 4: Enable Local Development Environment​

Run in the project root directory:

npx serve

A local static server will start, and you can access http://localhost:5000

Tip

If the SDK successfully logs in using an anonymous identity, you should see a pop-up window.

After successful login, you can access and utilize various CloudBase resources. For details, please refer to the Web SDK Documentation

Step 5 (Optional): Deploy Static Pages Using CloudBase​

  1. Enable Static Website Hosting
  2. Run the following command in the project root directory to upload the website files:
cloudbase hosting deploy index.html
Note

Before running cloudbase hosting deploy, log in to the CLI tool:

cloudbase login
  1. Use envId-instanceId.tcloudbaseapp.com to access your website, where envId and instanceId are the identifiers of your CloudBase environment.

For details, refer to the Static Website Hosting documentation.

View More Examples​