Working Serverless Typescript Example

.eslintignore

node_modules
.serverless
.vscode
*.config.js
_warmup
**/*.js

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "standard",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
  ],
  env: {
    node: true,
  },
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  settings: {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    "import/resolver": {
      typescript: {},
    },
  },
  parserOptions: {
    project: "./tsconfig.json",
    tsconfigRootDir: "./",
    sourceType: "module",
    ecmaVersion: 2018,
  },
  rules: {
    "@typescript-eslint/no-explicit-any": "on",
  },
};

package.json

{

  "devDependencies": {
    "@types/serverless": "^1.72.5",
    "eslint": "^7.4.0",
    "eslint-config-prettier": "6.11.0",
    "prettier": "^2.0.5",
    "serverless": "1.74.1",
    "serverless-offline": "6.4.0",
    "serverless-webpack": "^5.3.2",
    "ts-loader": "^8.0.0",
    "tsconfig-paths": "^3.9.0",
    "typescript": "3.9.6",
    "webpack": "^4.43.0",
    "webpack-node-externals": "^2.5.0",
  },
  "dependencies": {
    "reflect-metadata": "^0.1.13",
    "source-map-support": "^0.5.19"
  }
}

serverless.yaml

package:
  individually: true

plugins:
  # order is important
  - serverless-webpack
  - serverless-offline

custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true
    packager: 'yarn'

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017"],
    "removeComments": true,
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "sourceMap": true,
    "target": "es2017",
    "experimentalDecorators": true,
    "outDir": "lib",
    "baseUrl": ".",
    "paths": {
      "~common/*": ["src/common/*"],
      "~entities/*": ["src/entities/*"],
      "~modules/*": ["src/modules/*"]
    }
  },
  "include": ["src/**/*.ts", "tests/**/*.ts"]
}

webpack.config.js

const path = require("path");
const slsw = require("serverless-webpack");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  context: __dirname,
  mode: slsw.lib.webpack.isLocal ? "development" : "production",
  entry: slsw.lib.entries,
  devtool: slsw.lib.webpack.isLocal
    ? "cheap-module-eval-source-map"
    : "source-map",
  resolve: {
    extensions: [".mjs", ".json", ".ts"],
    symlinks: false,
    cacheWithContext: false,
    alias: {
      "~common": path.resolve(__dirname, "src", "common") + "/",
      "~entities": path.resolve(__dirname, "src", "entities") + "/",
      "~modules": path.resolve(__dirname, "src", "modules") + "/",
    },
  },
  output: {
    libraryTarget: "commonjs",
    path: path.join(__dirname, ".webpack"),
    filename: "[name].js",
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /\.(tsx?)$/,
        loader: "ts-loader",
        exclude: [
          [
            path.resolve(__dirname, "node_modules"),
            path.resolve(__dirname, ".serverless"),
            path.resolve(__dirname, ".webpack"),
          ],
        ],
        options: {
          transpileOnly: true,
          experimentalWatchApi: true,
        },
      },
    ],
  },
  plugins: []
};