serverless-plugin-typescript

Originally developed by Prisma Labs, now maintained in scope of Serverless, Inc

Serverless plugin for zero-config Typescript support

Features

• Zero-config: Works out of the box without the need to install any other compiler or plugins
• Supports ES2015 syntax + features (export, import, async, await, Promise, ...)
• Supports sls package, sls deploy and sls deploy function
• Supports sls invoke local + --watch mode
• Integrates nicely with serverless-offline

Install

yarn add --dev serverless-plugin-typescript typescript
# or
npm install -D serverless-plugin-typescript typescript

Add the following plugin to your serverless.yml:

plugins:
  - serverless-plugin-typescript

Configure

See example folder for a minimal example.

tsconfig.json

The default tsconfig.json file used by the plugin looks like this:

{
  "compilerOptions": {
    "preserveConstEnums": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "allowJs": true,
    "target": "es5",
    "outDir": ".build",
    "moduleResolution": "node",
    "lib": ["es2015"],
    "rootDir": "./"
  }
}

Note 1: The outDir and rootDir options cannot be overwritten.

Note 2: Don't confuse the tsconfig.json in this repository with the one mentioned above.

Including extra files

All files from package/include will be included in the final build file. See Exclude/Include

Non-standard tsconfig.json locations

Override what tsconfig.json to use with the following snippet in your severless.yaml

custom:
  serverlessPluginTypescript:
    tsConfigFileLocation: './tsconfig.build.json'

Usage

Google Cloud Functions

When using with Google Cloud Functions via the serverless-google-cloudfunctionsplugin, you simply have to provide a main field in your package.json:

{
  // ...
  "main": "handler.js",
  // ..
}

And this plugin will automatically compile your typescript correctly. Notethat the field must refer to the compiled file name, namely, ending with a .jsextension.

If a main field was not found, then this plugin will use index.js. Beforecompilation begins, it will check to see that the file indicated exists with a.ts extension before actually trying to compile it.

Automatic compilation

The normal Serverless deploy procedure will automatically compile with Typescript:

• Create the Serverless project with serverless create -t aws-nodejs
• Install Serverless Typescript as above
• Deploy with serverless deploy

Usage with serverless-offline

The plugin integrates very well with serverless-offline tosimulate AWS Lambda and AWS API Gateway locally.

Add the plugins to your serverless.yml file and make sure that serverless-plugin-typescriptprecedes serverless-offline as the order is important:

plugins:
    ...
    - serverless-plugin-typescript
    ...
    - serverless-offline
    ...

Run serverless offline or serverless offline start to start the Lambda/API simulation.

In comparison to serverless offline, the start command will fire an init and a end lifecycle hook which is needed for serverless-offline and e.g. serverless-dynamodb-local to switch off resources (see below)

serverless-dynamodb-local

Configure your service the same as mentioned above, but additionally add the serverless-dynamodb-localplugin as follows:

plugins:
    - serverless-plugin-typescript
    - serverless-dynamodb-local
    - serverless-offline

Run serverless offline start.

Other useful options

You can reduce the clutter generated by serverless-offline with --dontPrintOutput anddisable timeouts with --noTimeout.

Run a function locally

To run your compiled functions locally you can:

$ serverless invoke local --function <function-name>

Options are:

• --function or -f (required) is the name of the function to run
• --watch - recompile and run a function locally on source changes
• --path or -p (optional) path to JSON or YAML file holding input data
• --data or -d (optional) input data

Enabling source-maps

You can easily enable support for source-maps (making stacktraces easier to read) by installing and using the following plugin:

yarn add --dev source-map-support

// inside of your function
import 'source-map-support/register'

If you are using webpack (most likely). Add devtool: 'source-map' to webpack.config.js:

module.exports = {
  .... snip ....
  devtool: 'source-map',
  .... snip ....

}