Awesome Typescript Azure Functions: Part 1 — Project Setup

Amr Yousef
Apr 13, 2018 · 2 min read
Image for post
Image for post

The first thing you will need to install is Azure functions core tools. It’s an NPM package which will install the required executables to build Azure Functions App.

Installation Guide.

Next, let’s create a demo app to work with using the following command.

func init DemoProject 

This command will create a new folder for you including:

  • local.settings.json

This file is your project’s equivalent of environment variables. Use it to store all the application settings and connection strings.

Note that this file will not be used when you deploy the application to Azure.

Now, let’s create our first function.

func new --language JavaScript --template HttpTrigger --name HelloWorld

This command will create a new folder called HelloWorld which includes:

  • index.js

This file includes the source code for the HelloWorld function

  • function.json

The file also includes configuration for the HelloWorld function such as the trigger type, input and output bindings. You can find more details on this link.

The key thing to notice in that file is that it exports one function only.

By default, Azure functions runtime looks for the function code in a file called index.js then it executes the exported function.

If you are exporting more than one function, you will need to name your default function “index” or “run”. Alternatively, you can use the function.json to define an entry point.

npm init

Next let’s install install TypeScript:

npm install --save typescript

Afterwards, let’s generate TypeScript configuration file by running:

tsc --init

An optimal tsconfig file would look something like this:

Note that sourceMap should be set to true for easier debugging especially with VSCode.

Navigate to the HelloWorld function and create a new file index.ts. This file will export a function called index which takes context and request as arguments.

Azure function accepts .js files which means that the index.ts file will need to be compiled first by executing the following:


This will create:

  1. index.js

And now your function is ready to be executed.

Finally, for an efficient development exprience, we will use nodemon. Nodemon will watch all the changes made and automatically compile TypeScript files to JavaScript.

npm install --save nodemon

Nodemon can be configured to watch for .ts files and run a command every time a file changes.

nodemon -e ts --exec tsc

That’s all it takes to have a TypeScript introduced into your Azure Functions codebase. In the next part, I will go through the process of setting a CI pipeline using VSTS for our HelloWorld Functions App.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store