Skip to main content

Web Quick Start

Preparation​

  1. Have a Tencent Cloud account
  2. Be sure to create a CloudBase environment to 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 as system administrator:

sudo npm install -g @cloudbase/cli

Step 1: Create Initial Project​

Using the command line, 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. If successful, an alert will be displayed:

<html>
  <head>
    <meta charset="utf-8" />
    <!-- You can visit the npm registry to view the latest version at 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: env: "your-env-id", // Replace with your environment ID
      });
      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: Add Secure 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 secure domains, allowing pages under this domain to use the SDK to access CloudBase services.

Step 3: Enable Anonymous Login​

Please refer to: Enable Anonymous Login Authorization

Step 4: Enable the Local Development Environment​

Run in the project root directory:

npx serve

A local static server will be started, and you can go to http://localhost:5000

Tip

If the SDK successfully logs in anonymously, then you should be able to see a pop-up window.

After successful login, you can access and use various CloudBase resources. For details, refer to the Web SDK documentation

Step 5 (Optional): Use CloudBase to deploy static pages​

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

Before running cloudbase hosting deploy, make sure to log in to the command-line tool:

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

For details, please refer to the Static Website Hosting relevant documentation.

View More Examples​