Skip to content

Getting Started

Before Starting

Before starting, you have to complete the following things:

  • Create a Vercel account;
  • Create a Vercel Project.

Create a VCLight app

In this section we will introduce how to build an empty project on your local machine. Created projects will use TypeScript and use Vercel-based native builds and debugging.

Of course you can choose JavaScript if you prefer it, but the following steps may require some adjustments.

First, make sure you have an up-to-date version of Node.js.

Then create an empty project

shell
$ npm init -y
$ npm init -y

Install Requirements

Next, we need to install the packages of Vercel and VCLight, as well as ts type support

shell
$ npm install vercel vclight
$ npm install @vercel/node -D
$ npm install vercel vclight
$ npm install @vercel/node -D
shell
$ yarn add vercel vclight
$ yarn add @vercel/node -D
$ yarn add vercel vclight
$ yarn add @vercel/node -D
shell
$ pnpm add vercel vclight
$ pnpm add @vercel/node -D
$ pnpm add vercel vclight
$ pnpm add @vercel/node -D

Create the Entry Point

Next, you need to create the project's entry point file src/main.ts

TypeScript
import VCLight from "vclight";
import { VercelRequest, VercelResponse } from "@vercel/node";

module.exports = async function(request:VercelRequest, response:VercelResponse) {
    const app = new VCLight();
    //Add the middlewares here
    await app.fetch(request, response);
};
import VCLight from "vclight";
import { VercelRequest, VercelResponse } from "@vercel/node";

module.exports = async function(request:VercelRequest, response:VercelResponse) {
    const app = new VCLight();
    //Add the middlewares here
    await app.fetch(request, response);
};

Routing Traffic

Next, you need to create a vercel.json file in the root directory to configure the vercel project, so that all requests will go through this function:

json
{
  "builds": [
    {
      "src": "src/*",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts"
    }
  ]
}
{
  "builds": [
    {
      "src": "src/*",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts"
    }
  ]
}

So far, a blank project has been built. You can debug it locally or upload it to the cloud.

INFO

The application will report an error when accessed because we haven't respond the request for it. In the next section, you will learn how to create a plugin to respond to requests.

Start with VCLight Cli

Install Cli

First, you have to install VCLight Cli. We recommend installing it globally.

shell
$ npm install -g vclight-cli
$ npm install -g vclight-cli
shell
$ yarn global add vclight-cli
$ yarn global add vclight-cli
shell
$ pnpm -g add vclight-cli
$ pnpm -g add vclight-cli

Create a Project

shell
$ vclight create $projectName
$ vclight create $projectName

You should replace $projectName to your project name.

Local Debugging

You can debug your application locally using the following command.

shell
$ npx vercel dev
$ npx vercel dev

TIP

You can add the debug command to package.json to make it easier.

json
"scripts": {
  "dev": "vercel dev"
},
"scripts": {
  "dev": "vercel dev"
},

If you have already added the debug script into package.json (added by default for template projects), you can debug more easily using the following script.

shell
$ npm run serve
$ npm run serve
shell
$ yarn run serve
$ yarn run serve
shell
$ pnpm run serve
$ pnpm run serve

Released under the MIT License.