Skip to main content

Tencent CloudBase Framework Website Plugin

Github License Npm version issue PRs Welcome star star

CloudBase Framework "Function" Plugin: Deploy static websites to the CloudBase environment with one click via the CloudBase Framework, providing a production-ready, high-performance website service with CDN acceleration and automatic elastic scaling. It integrates with other plugins such as the Node plugin and Function plugin to enable cloud-native integrated development.

Features​

  • Cost Savings: Achieves significant resource cost reduction through resource scaling, elastic scaling, and flexible billing.
  • Minimal Configuration: Automatic framework detection, zero configuration required, and supports pure static projects without frameworks.
  • Framework Support: Seamlessly supports projects built with native and frontend frameworks.
    • Vue
    • React
    • Next SPA
    • Nuxt SPA
    • VuePress

Usage​

Step 1. Preparations​

Specific steps please refer to Preparing the Cloud Development Environment and CloudBase CLI Command Tool

Step 2. Enter the website project directory and initialize​

If there is an existing web application project

cloudbase

If you want to start a new project from scratch, you can directly execute init to begin a website project from a template.

cloudbase init

Step 3. One-Click Deployment​

cloudbase framework deploy

Configuration​

By default, no configuration is required for use. The following configuration parameters are intended for scenarios with specific requirements.

Configuration Example​

After running cloudbase init, the Cloud Development configuration file cloudbaserc.json` will be created. You can modify and write plugin configurations in the plugins section of the configuration file.

{
  "envId": "{{envId}}",
  "framework": {
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "installCommand": "npm install --prefer-offline --no-audit --progress=false",
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/path",
          "ignore": [".git", ".github", "node_modules", "cloudbaserc.js"]
        }
      }
    }
  }
}

Configuration Parameters Description​

commands​

Optional. Object format.

Custom commands define the application installation/build commands, which are executed in the current project directory.

commands.install​

Installation command, such as npm install, can be omitted if not required.

Default npm install --prefer-offline --no-audit --progress=false

commands.build​

Build command, such as npm run build, can be omitted if not required.

outputPath​

The path to the static files of the website.

cloudPath​

The path for deploying static resources to the cloud development environment, defaulting to the root directory.

ignore​

File paths ignored during static resource deployment, supports wildcards

Default ['.git', '.github', 'node_modules', 'cloudbaserc.js']

envVariables​

Environment variable key-value pairs are injected into the root directory of the static website. They can be retrieved by adding a line of code in the html head section of the web page.

<script src="/_init_tcb-env.js"></script>

In JS code, all variables can be accessed via window._tcbEnv.

Injected environment variables include:

  • TCB_ENV_ID: the Environment ID of the current environment
  • TCB_SERVICE_DOMAIN: the default domain for HTTP access in the current CloudBase environment (Cloud Access domain)
  • as well as other envVariables injected by the user

Note: Variables from different web applications within the same environment will be merged. They can be distinguished through naming conventions in environment variables.

More Plugins​

Please visit the CloudBase Framework Plugin List to use other plugins in combination

Documentation Resources​