TypeScript Actions

Overview

App Builder supports TypeScript for Runtime actions via Webpack's ts-loader. You can point your app.config.yaml directly to .ts files — no manual tsc compilation step or duplicated source directories required. This works with aio app dev, aio app build, and aio app deploy.

Prerequisites

Install the required dev dependencies in your project:

npm install --save-dev ts-loader typescript

Setup

1. Add a Webpack configuration

Create a webpack-config.js file in the root of your project (or in an action directory for per-action configuration). See Webpack Configuration for details on file placement and supported export formats.

module.exports = {
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      }
    ]
  }
}

If your project uses ES modules ("type": "module" in package.json), name this file webpack-config.cjs instead so that it is treated as CommonJS. See the ES module syntax section for more information.

2. Add a TypeScript configuration

Create a tsconfig.json file in the root of your project:

{
  "exclude": ["node_modules", "dist"],
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "sourceMap": true
  }
}

3. Point your actions to .ts files

In app.config.yaml, set the function field of your action to the TypeScript entry file:

runtimeManifest:
  packages:
    my-package:
      actions:
        my-action:
          function: actions/my-action/index.ts
          web: 'yes'
          runtime: nodejs:22

That's it. App Builder will use Webpack with ts-loader to compile your TypeScript action during build and deployment.

Limitations

• Debugging — The VS Code debugger steps through the compiled JavaScript output by default. Adding devtool: 'inline-source-map' to your webpack configuration (as shown above) enables source map support, which improves the debugging experience but may not be a perfect 1:1 mapping with your original TypeScript source.

For general Webpack constraints (immutable options, supported config formats, etc.), see Webpack Configuration.

Example project

The typescript-app quickstart provides a complete working example of TypeScript Runtime actions using the ts-loader approach described on this page.

Next steps

• Webpack Configuration — Customize your build process
• App Builder Configuration Files — Full app.config.yaml reference

Return to Guides Index.