Skip to main content

How to Quickly Build a Cloud Development Application

Understand Cloud Development Application​

Cloud development applications can be understood as applications running in a cloud development environment. For example, a service that includes capabilities such as frontend, backend, database, and others can be deployed with one click directly into the cloud development environment, utilizing various underlying Serverless resources to enjoy the benefits of elasticity and maintenance-free operations.

A cloud development application can be broken down into three parts, including code, declarative configuration, and environment variable information.

Next, we will demonstrate how to develop a real-time dashboard cloud development application. The backend capabilities are built on cloud development, utilizing the customer service messaging feature of Mini Programs to send messages, which can be displayed in real-time on the WEB dashboard page.

This application supports one-click deployment into the user's cloud development environment, eliminating concerns about server management and operations, and can be used out-of-the-box for various interactive scenarios such as on-site engagements.

Project Demo URL:​

f.cloudbase.vip

Experience One-Click Deployment​

Click the deploy button below to deploy the web page, Mini Program, and backend services with one click. You need to fill in the Mini Program AppId and the Base64-format private key for Mini Program deployment (you can use the Mini Program Deployment Key Conversion Tool to convert it to Base64).

Note: After one-click deployment, you need to download the code and navigate to [Settings - Global Settings - Add Message Push] in the Mini Program CloudBase console. Select the text type and connect it to the contact cloud function.

How to Develop a Cloud Development Application​

So how do we build such a cloud development application that supports one-click deployment?

The overall process is divided into 3 steps, primarily consisting of development, configuration, and deployment verification phases. This document will focus mainly on the configuration and deployment verification phases.

Development​

The development phase will not be covered in detail, as the specific implementation can be understood by obtaining the source code. The following section will provide an overview of the overall code structure.

Project Source Code​

The source code for this project can be viewed and obtained on Github:

https://github.com/TCloudBase/WXAPP-WEB-ShowMess

Project Structure​

The overall project structure is as follows:

WXAPP-WEB-ShowMess
├── README.md // Project introduction document
├── cloudbaserc.json // Cloud Development configuration file
├── cloudfunctions // Cloud Functions directory
├── miniprogram // Mini Program directory
├── project.config.json // Mini Program configuration file
└── webview // Website directory

Cloud Development Resources Used​

  • Static Website
  • Cloud Function
  • Cloud Database (and real-time data push capability)
  • Cloud Development Anonymous Login

Configuration​

After obtaining the project code, how do we build this application into a cloud development application that supports one-click deployment?

The following steps will explain how to build a Cloud Development application through configuration.

Configuring Application Basic Information​

First, create a cloudbaserc.json configuration file. The content of the file is as follows.

{
  "envId": "{{env.ENV_ID}}",
  "version": "2.0",
  "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
  "framework": {
    "name": "techo-show",
    "plugins": {}
  }
}
Key Points​
  1. envId specifies the environment where the application is deployed. Here we use the template variable env.ENV_ID to read the ENV_ID environment variable.
  2. framework.name is the application's English name, supporting only A-Z, a-z, 0-9, -, and _, with a length of 1-32 characters. In this example, we use techo-show as the application name.
  3. framework.plugins is the plugin information used by the application. This is left blank for now; we will fill it in based on the resources and application type below.
  4. To learn more about project information configuration, please refer to the Application Project Information Documentation.

Using the Cloud Function Plugin​

In this step, we need to use the cloud function plugin to automate the batch deployment and configuration of cloud functions.

Add a field fn under framework.plugins, where the value of the field is a JSON object.

{
  "fn": {
    "use": "@cloudbase/framework-plugin-function",
    "inputs": {
      "functionRootPath": "./cloudfunctions",
      "functions": [
        {
          "name": "contact",
          "installDependency": true
        },
        {
          "name": "delete",
          "installDependency": true
        },
        {
          "name": "inituser",
          "installDependency": true
        }
      ]
    }
  }
}
Key Points​
  1. The name of the field fn can be customized; it only serves as an alias, and the same applies below.
  2. "use": "@cloudbase/framework-plugin-function" indicates that the @cloudbase/framework-plugin-function cloud function plugin is used here to deploy and manage cloud functions.
  3. inputs is used to set the parameters received by the plugin. Here we specify that the function root directory is ./cloudfunctions, with three cloud functions: contact, delete, and inituser, all requiring cloud-based dependency installation.
  4. The cloud function plugin also supports configuration of http access URLs, runtime languages, scheduled triggers, timeout durations, security rules, and more. For detailed configuration instructions, please refer to the Cloud Function Plugin Configuration Documentation.

Using the Cloud Database Plugin​

In this step, we need to use the cloud database plugin to automatically create cloud database collections and configure security rules.

Add a field db under framework.plugins, where the value of the field is a JSON object.

{
  "use": "@cloudbase/framework-plugin-database",
  "inputs": {
    "collections": [
      {
        "collectionName": "mess",
        "aclTag": "READONLY"
      },
      {
        "collectionName": "user",
        "aclTag": "ADMINONLY"
      }
    ]
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-database cloud database plugin.
  2. In the inputs, two database collections are configured.
  3. The permissions for the mess collection are readable by all users and writable only by the creator and administrators
  4. The permissions for the user collection are readable by all users and writable only by administrators
  5. The cloud database plugin also supports configuration of indexes, custom security rules, and more. For detailed configuration instructions, please refer to the Cloud Database Plugin Configuration Documentation.

Using the Static Website Plugin​

In this step, we need to use the static website plugin to automatically deploy static web pages in the application.

Add a field web under framework.plugins, where the value of the field is a JSON object.

{
  "use": "@cloudbase/framework-plugin-website",
  "inputs": {
    "outputPath": "webview",
    "cloudPath": "/mess",
    "envVariables": {
      "ENV_ID": "{{env.ENV_ID}}"
    }
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-website static website plugin.
  2. In the inputs, we specify that the local source code directory (outputPath) for the static website is the webview directory, which needs to be deployed under the /mess path of the cloud-based static website.
  3. At the same time, we injected the application's environment ID ENV_ID into the static website configuration. This allows pages to obtain the current deployment environment's ID by requesting /cloudbaseenv.json at the root directory of the static website. Thus, the same code can be deployed to other environments without modifications. If using webpack for building, environment variables can also be bundled into the page code.
  4. The static website plugin also supports configuration of npm dependency installation, custom build commands, files to be ignored, and more. For detailed configuration instructions, please refer to the Static Website Plugin Configuration Documentation

Using the Login Authentication Plugin​

In this step, we need to use the login authentication plugin to automatically configure the login method for the application.

Add a field auth under framework.plugins, where the value of the field is a JSON object.

{
  "use": "@cloudbase/framework-plugin-auth",
  "inputs": {
    "configs": [
      {
        "platform": "ANONYMOUS",
        "status": "ENABLE"
      }
    ]
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-auth login authentication plugin.
  2. In the inputs, we have configured to enable anonymous login, which will automatically activate this login method for users.
  3. The login authentication plugin also supports configuring other login methods such as unauthenticated access. For detailed configuration instructions, please refer to the Login Authentication Plugin Configuration Documentation

Using the Mini Program Plugin​

In this step, we need to use the Mini Program plugin to automate the building and publishing of Mini Programs.

Add a field mp under framework.plugins, where the value of the field is a JSON object.

{
    "use": "@cloudbase/framework-plugin-mp",
    "inputs": {
      "appid": "{{env.WX_APPID}}",
      "privateKey": "{{env.WX_CI_KEY}}",
      "localPath": "./",
      "ignores": ["node_modules/**/*"],
      "deployMode": "preview",
      "previewOptions": {
        "desc": "one-click preview",
        "setting": {
          "es6": false
        },
        "qrcodeOutputPath": "./qrcode.jpg",
        "pagePath": "pages/index/index",
        "searchQuery": "",
        "scene": 1011
      }
    }
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-mp Mini Program plugin.
  2. In the inputs, we have configured the Mini Program's appid and the private key required for deployment. Here we use template variables, which require user input. Next, we need to retrieve this information from the application parameters.
  3. In the inputs configuration, we also specified the deployment mode as preview mode and the preview options.
  4. The Mini Program plugin also supports additional configurations during preview and upload. For detailed configuration instructions, please refer to the WeChat Mini Program Plugin Configuration Documentation

Configuring Application Parameters and Dependencies​

When deploying the application, it may also be necessary for users to input certain business parameters, such as their own Mini Program APPID and deployment key. Next, we need to declare the parameters required by the application.

First, we add the following JSON configuration to framework.requirement.

{
  "environment": {
    "WX_APPID": {
      "description": "Please fill in the WeChat Mini Program APPID",
      "required": true,
      "default": "",
      "validation": {
        "rule": {
          "type": "RegExp",
          "pattern": "^wx.*",
          "flag": "g"
        },
        "errorMessage": "Must be a Mini Program APPID"
      }
    },
    "WX_CI_KEY": {
      "description": "Please fill in the WeChat Mini Program upload key in BASE64 format",
      "required": true,
      "default": "",
      "validation": {
        "rule": {
          "type": "RegExp",
          "pattern": "^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$",
          "flag": "g"
        },
        "errorMessage": "Must be a key in BASE64 format"
      }
    }
  }
}
Key Points​

  1. WX_APPID and WX_CI_KEY are the keys for the environment variables we need to receive. We can use them via env.WX_APPID in templates, or access these values through environment variables in cloud functions and cloud run.

  2. For each environment variable, we use JSON descriptions to specify the field's description, whether it is required, default value, and validation rules for checking user input.

  3. In addition to declaring dependencies on environment variables, you can also declare dependencies on external resources, such as cloud resources used during application deployment, including persistent file storage and MySQL databases. For details, refer to the Application Dependencies documentation.

Local Deployment Verification​

After configuring the plugin information, we can now automatically build and deploy all CloudBase resources required by the application.

Next, we need to create a .env file locally.

ENV_ID=Environment id
WX_APPID=Mini Program appid
WX_CI_KEY=Mini Program deployment private key (needs to be converted to base64)

Then run in the command line

tcb framework deploy

can deploy all resources included in the application, such as static websites, Mini Programs, databases, cloud functions, login authentication, etc.

You can see that the command line displays the web access URL and the Mini Program preview QR code after successful deployment.

image-20210112220441078

Generate Deploy Button​

After local deployment verification, we can upload the code to Git and generate a one-click deploy button.

Open the one-click deploy button generation URL:

https://docs.cloudbase.net/framework/deploy-button.html

Enter the project's Git URL, configuration file directory, and branch information on the page to generate the following deploy button code snippet.

Several code snippets for the deploy button will be generated, which can be embedded in different scenarios to allow users to deploy your application.

  • Markdown code is suitable for scenarios like README files, Markdown-based blog posts, etc.

  • HTML code is suitable for scenarios like WeChat Official Accounts, HTML-based websites/blog posts, etc.

  • URL links can be used on any page that supports hyperlinks. You can copy the link below and paste it into the corresponding page.

Summary​

In this article, we learned what a cloud development application is, using a real-time dashboard full-stack program (including front-end pages, back-end services, databases, and mini-programs) as an example, and introduced how to quickly build a cloud development application that can be deployed with one click.

Through hands-on practice, we have also learned about cloud development and the usage of CloudBase Framework. By completing development, configuration, and deployment verification, applications can be quickly transformed into rapidly distributable programs. Users can automatically deploy applications without manually setting up environments or configurations.

Reference Documentation​