CloudBase Webify, a cloud development and deployment platform designed for web developers

Today we are very honored to announce that Tencent Cloud CloudBase Webify (Chinese name: Web application hosting) is officially launched. This is a cloud development and deployment platform designed for web developers. helps developers quickly develop and preview , Deploy your own web application .

Go to the Webify quick start page , choose your own code repository, or create your first web application from an existing template.

1. What problem does Webify want to solve?

For most front-end developers, the Internet infrastructure may not be so friendly.

For example, to release a front-end project from scratch to the public network, usually the following things need to be considered:

• Apply for domain name, modify DNS
• Deploy static resources to the server and configure Nginx (or put it on object storage)
• Configure CDN
• Configure HTTPS certificate
• If you need secondary development in the follow-up, you also need to configure a set of CI/CD workflow

In addition, there are a large number of application-level problems:

• How to configure routing for my single page application (SPA)?
• How do I deploy my SSR application?
• Can the framework I use be published directly to the cloud?
• I want to use serverless cloud functions to write HTTP APIs. What should I do?

These problems are exactly what Webify wants to solve. We hope to provide a dedicated platform for web developers, so that developers can avoid the troubles from the above infrastructure and focus on Coding instead of managing infrastructure.

2. What kind of capabilities does Webify provide?

1. Quickly create an application

Webify supports the creation of applications directly from third-party code hosting platforms. Currently, it supports Github, Gitlab, and Gitee code cloud platforms. We will also release support for more Git platforms in the future.

Click here to create your first Webify application

For example, many developers will use the Hexo framework to build their own personal blogs, push the blogs to Github, and deploy them using Github Pages.

These types of personal blogs can also be directly imported and deployed to Webify with one click:

View Demo: https://my-hexo-site-0g2fpeyz0f499162-1255679239.ap-shanghai.app.tcloudbase.com/

2. Quickly create an application from a template

We also provide a series of templates for developers, including popular web frameworks such as Vue, React, Angular, Next.js, Gatsby.js, Docusaurus.

Developers can choose any template, and then use the template to create a new code repository:

Then only need to push the changes to the code repository, can automatically trigger the rebuild and deployment of the application .

3. Git-based continuous release (CD) workflow

In CloudBase Webify, each application can be bound to a Git code repository. bound, any submission of the corresponding branch on the code repository will trigger the construction and deployment of the application.

Developers can build their own Git workflow based on this feature:

For example, bind the application to the master branch of the warehouse, and usually use the dev branch for development. When releasing a new version of the application, you only need to merge the dev branch into the master branch to automatically build and release the application without any manual processes. , There is no need to integrate any third-party CI/CD system.

4. Domain name and CDN

Webify provides a unique default domain name for each web application. The default domain name .app.tcloudbase.com . Developers can use the default domain name to directly access the application.

The application also supports binding the developer's own domain name, which can be directly operated on the application configuration page.

Whether it is the default domain name or the bound custom domain name, CDN acceleration capability default, which speeds up the loading performance of Web applications to the greatest extent.

III. Is Webify still capable of planning?

Planning ability 1: Edge routing

For more complex Web application scenarios such as single-page application (SPA), server-side rendering (SSR), serverless, etc., developers usually need to configure server-side routing

We are planning edge routing capabilities. Developers can place a routing configuration file in the root directory of the application to configure the routing logic of the application, for example:

{
  // 路由配置
  routes: [{
    // 单页应用（SPA），需要对所有路由都响应 index.html，由前端接管路由
    src: '*',
    static: 'dist/index.html' 
  }, {
    // 将 /api/query 指向到某个云函数
    src: '/api/query',
    cloudFunction: { path: 'api/query.js' }
  }],
  
  // HTTP错误码重写
  errorOverrides: [
    { status: 404, static: 'dist/404.html' }, // 对 404 错误返回 dist/404.html
    { status: 401, redirect: '/login' } // 将 401 状态码重定向到 /login
  ],
  
  // 自定义 HTTP 响应头
  globalHeaders: {
    'x-my-custom-header': 'xxxxxx'
  }
}

(The above is only the initial design, the specific usage is subject to the technical documents after the actual line)

Planning Ability 2: Free HTTPS Certificate

Currently, when the application binds a custom domain name, you need to manually select an existing HTTPS certificate.

We are planning to provide a free DV certificate for the custom domain name of the Webify application, and provide an automatic renewal function, eliminating the trouble of manual application, maintenance, and renewal of certificates by developers.

Planning Ability 3: Serverless HTTP API

It is not easy for some front-end developers to develop a highly available back-end API that can handle high traffic, and the serverless technology that has emerged in recent years is an excellent way to solve this problem.

Webify is planning to support the Serverless HTTP API. Developers only need to api directory of the project to directly deploy a serverless HTTP API on the cloud (based on cloud hosting or cloud functions).

// api/hello.js
export default async function handler(req, res) {
  res.send(`${req.params.name} 的第一个 Webify Serverless API !`)
}

After the application is deployed, you can directly access:

> curl https://<AppName>.<Region>.app.tcloudbase.com/api/hello?name=CloudBase
> CloudBase 的第一个 Webify Serverless API !

(The above is only the initial design, the specific usage is subject to the technical documents after the actual line)

In Serverless API, developers can directly use cloud development CloudBase's server SDK to directly call the BaaS capabilities provided by cloud development such as cloud databases and cloud storage:

// api/query.js
const cloudbase = require('@cloudbase/node-sdk')
cloudbase.init()
​
export default async function handler(req, res) {
  const data = await cloudbase.database()
    .where({
      name: req.params.name
    })
    .get()
  res.send(data.result)
}

Planning ability 4: More framework integration, including SSR, ISR, JAMStack

Currently, Webify integrates basic static web frameworks such as React and Vue, as well as mainstream static site generators (Static Site Generator, SSG) such as Gatsby.js, Next.js, etc.

We are also considering integrating more and more complex web technology stacks or frameworks, such as Next.js SSR/ISR , JAMStack etc., so that developers can quickly develop, preview and deploy their own web based on these integrated frameworks. application.

Fourth, the end

CloudBase Webify is designed for front-end and web developers. It integrates many popular front-end frameworks and deeply integrates with the open source community ecology. We hope to provide domestic developers with a standard, efficient, and developer-friendly one-stop web development deployment. Platform. In the future, we will continue to optimize our products and provide more product capabilities, including serverless, preview, and free SSL certificate capabilities, so stay tuned.