Create your first Typescript Azure function with automatic build/deploy on Azure

Hey, today we are writing our first Azure function and how to build and deploy it automatically on Azure. This article uses Azure portal and Azure Dev OPs stack.

Create function on portal

Go to https://portal.azure.com and create a new “Function App”.

Bind to git repository

Once your function is created, go to your “Function App” and tab “Platform features”

Now you can connect it to your AzureDevOps repository

Init your azure function locally

Go to your git repository to initialise your app function.

$ cd ..
$ func init <yourGitFolder>

Setup Typescript

Follow this article to setup TS https://azure.microsoft.com/fr-fr/blog/improving-the-typescript-support-in-azure-functions/.

Now create your first HttpTrigger function with VSCODE extension.

Your repo should be like this.

To test your function locally, execute this command

$ func host start --build

And open your browser on this url : http://localhost:7071/api/HttpTrigger

However, if you push this code as is, it will be deployed automatically but Azure won’t find your functions as it is looking for JS files.

{
   "bindings": [{ ... }],
   "scriptFile": "../dist/HttpTrigger/index.js"
}

scriptFile is the starting point for the function host

Setting up the build on your AzureDevops Pipeline

Now we are going to add the build task to compile TS -> JS.

• Go to your AzureDevops Pipeline.
• Edit your build ( see below)

• Add TS build task
• Create a new npm task

You can “Save & Queue” and go to Azure function on Portal

And “Voilà” you have CI/CD Azure function with Typescript CODE

To try your function, executehttps://xxxx.azurewebsites.net/api/HttpTrigger?code=xxxxx&name=John and function will answer you.

Hello John

You can see an example of azure function with typescript on this repo https://github.com/mhoeger/typescript-azure-functions

Follow us