CloudBase Webify: A platform for Web developers to develop and deploy on the cloud

Today we are very proud to announce the official launch of Tencent CloudBase Webify (Chinese name: Web Application Hosting), a cloud development and deployment platform for Web developers to help them quickly develop, preview and deploy their Web applications.

Go to the Webify Quick Start page and choose your own repository, or from an existing template, to create your first Web application.

What problem is Webify trying to solve?

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

For example, to bring a front-end project online from scratch, you usually need to consider the following:

Apply for a domain name and change the DNS
Deploy static resources to the server and configure Nginx (or put them on an object store)
Configure the CDN
Configuring the HTTPS Certificate
If secondary development is required, you need to configure a CI/CD workflow

In addition, there are a lot of problems at the application level:

How do I configure routing for my single Page application (SPA)?
How do I deploy my SSR application?
Can THE framework I’m using publish directly to the cloud?
I want to write the HTTP API using the Serverless cloud function. What should I do?

These are the issues that Webify wants to address, and we want to provide a dedicated platform for Web developers to avoid the above infrastructure headaches and focus on Coding rather than managing infrastructure.

What capabilities does Webify provide?

Quickly create an application from a Git hosted platform

Webify supports the creation of applications directly from third-party code hosting platforms. Currently, Github, Gitlab and Gitee code Cloud are available on Webify, and we will release support for more Git platforms in the future.

Click here to create your first Webify app right now

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

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

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

2. Quickly create an application from the template

We also provide a range of templates for developers, including Vue, React, Angular, nex.js, Gatsby, Docusaurus, and other popular Web frameworks.

Developers can select any template and use the template to create a new repository:

The changes are then pushed to the repository, which automatically triggers the rebuilding and deployment of the application.

3. Continuous Release (CD) workflow based on Git

In CloudBase Webify, each application can be bound to a Git repository. After binding, any commit on the appropriate branch of the repository triggers the build and deployment of the application.

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

For example, if you bind the application to the master branch of the repository and use the Dev branch for development, when releasing a new version of the application, you just need to merge the Dev branch into the Master branch, and the application can be automatically built and released without any manual process or integration with any third-party CI/CD system.

4. Domain name and CDN

Webify provides a unique default domain name (.app.tCloudBase.com) for each Web application. Developers can use the default domain name to access the application directly.

The application can also be bound to the developer’s own domain name, which can be directly operated on the application configuration page.

By default, both the default domain name and the bound domain name have the CDN acceleration capability to maximize the loading performance of Web applications.

Is Webify still in the works?

Planning capability 1: Edge routing

For complex Web application scenarios such as single page application (SPA), server side rendering (SSR), and Serverless, developers usually need to configure server side routing

We are working on edge routing capabilities where developers can place a routing profile in the root directory of the application and configure the routing logic of the application. For example:

{
  // Route configuration
  routes: [{
    // Single-page application (SPA), which needs to respond to index.html for all routes, and the front end takes over the routes
    src: The '*'.static: 'dist/index.html' 
  }, {
    // Point/API /query to a cloud function
    src: '/api/query'.cloudFunction: { path: 'api/query.js'}}].// HTTP error code rewrite
  errorOverrides: [{status: 404.static: 'dist/404.html' }, // Return dist/404.html for a 404 error
    { status: 401.redirect: '/login' } // Redirect the 401 status code to /login].// Customize the HTTP response header
  globalHeaders: {
    'x-my-custom-header': 'xxxxxx'
  }
Copy the code

(The above is only the initial design, the specific use mode is subject to the technical document behind the actual line)

Planning capability 2: Free HTTPS certificate

Currently, you need to manually select an existing HTTPS certificate to bind a customized domain name.

We are planning to provide free DV-based certificates for Webify applications with custom domain names and automatic renewal, eliminating the need for developers to manually apply, maintain, and renew certificates.

Planning capability 3: Serverless HTTP API

Developing a highly available back-end API that can handle high traffic is not easy for some front-end developers, and Serverless technology has emerged in recent years as a great way to solve this problem.

Webify is planning to support the Serverless HTTP API. Developers can deploy a Serverless HTTP API on the cloud (based on cloud hosting or cloud functions) simply by adding routing code to their project API directory.


// api/hello.js
export default async function handler(req, res) {
  res.send(`${req.params.name}The first Webify Serverless API! `> curl HTTPS:/ /.. app.tcloudbase.com/api/hello?name=CloudBase> CloudBase's first Webify Serverless API!Copy the code

(The above is only the initial design, the specific use mode is subject to the technical document behind the actual line)

In the Serverless API, developers can directly use the server SDK of CloudBase for cloud development, and directly call the BaaS capabilities provided by cloud development such as cloud database 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)
}
Copy the code

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

At present, Webify integrates React, Vue and other basic Static Web frameworks, as well as mainstream Static Site generators (SSG) such as Gatsby, Next.

We are also considering integrating 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 Web applications based on these integrated frameworks.

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 ecology of the open source community. We hope to provide a standard, efficient and developer-friendly one-stop Web development and deployment platform for domestic developers. Offer more product capabilities, including Serverless, preview, free SSL certificates, etc. Stay tuned.

In addition, we have prepared the online double benefits, welcome you to try the product, demand, give advice, writing practical articles have the opportunity to get Tencent video VIP, t-shirts, dolls, backpack, vouchers and other rich prizes!

Welcome to join the Webify communication group