How to add & use path aliases with Typescript & Serverless

A flower that represents Typescript next to one that represents Serverless. Below it sits the text "Alias Paths".

A step by step tutorial on implementing path aliases to a Serverless Typescript project, with a demonstration on how to use them.

The following step by step tutorial builds off and adds to our Open Source starter project for Typescript & Serverless by adding two folders and making them available to the system via aliases. Finally, it checks that it works by invoking (i.e. running) the hello serverless function locally through terminal.

Step One: Install serverless-tscpaths

A screenshot of terminal showing you how to add the serverless-tscpaths dependency.

In order for path alias's to work with Serverless in Typescript, we must add the serverless-tscpaths npm package.

yarn add serverless-tscpaths -D

npm i --dev serverless-tscpaths

Step Two: Add the plugin

A screenshot showing you how to add the serverless-tscpaths to the serverless.yml file. Make sure you add it below the server less typescript plugin that we added in our How to create a Serverless Typescript tutorial.

In the serverless.yml add the new serverless-tscpaths plugin below the serverless-plugin-typescript

Step Three: Create the folders

A screenshot showing you the folders that we created within VSCode.

Open VSCode or your preferred IDE and add the relevant folders that you wish to add an alias to.

In the case of our Open Source starter project, we have added three folders:

functions
modules
types

Step Four: Create the alias's

A screenshot of VSCode showing the serverless.yml and tsconfig.json with the modifications we made for the alias's. Steps described below.

The following step is dedicated to adding the alias's to the project.

If at any moment in the future you wish to add new alias's, this is the two part step that you must carry out.

A | Update tsconfig

A screenshot of VSCode showing the updated tsconfig.json. Make sure you add a baseUrl and the paths.

Update the tsconfig.json to include a baseUrl and the alias paths.

B | Update serverless.yml

A screenshot of VSCode showing the updated serverless.yml file with the custom paths.

Update the serverless.yml to include your custom paths as demonstrated in the image above.

Critical things here are:

Make sure the package includes the folders that you use
Add the paths under the tscpaths

Step Five: Verify

A screenshot of terminal showing the invocation of the hello function and the sample log appearing.

The following step is dedicated to demonstrating how to make use of an alias in Typescript & Serverless.

A | Create a new function

A screenshot of VSCode showing the sample.ts file with the test function that we created that logs "sample" to the console.

In the modules folder, create a new Typescript file called sample.ts.

Within it create a function, in our case we created a test which takes in a print, of type string and logs it to the console.

Please note that it is is exported using export default test.

B | Call the function

A screenshot of VSCode of the handler.ts file showing how we imported the Sample module and called the test function.

Within the handler.ts file:

Require the Sample module that we created & make sure you use the .ts suffix.
Call the sample function with a string to print.

C | Test

Invoke the hello function using terminal.

For more details consult the tutorial below.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.