Click here to Skip to main content
14,979,278 members
Articles / DevOps
Posted 9 Apr 2021


6 bookmarked

First Cloud Native Steps: Automated Build, Test, and Deploy

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
9 Apr 2021CPOL8 min read
This article will serve as a hands-on introduction to Cloud Native development for Node developers. Unlike most other introductions, we're going to show how to do things in a realistic way using modern tools.
Here we'll start with Azure DevOps and set up a pipeline that can build, test, and deploy a TypeScript Azure function completely in the cloud. Once the pipeline is created, we'll add code to our function that can receive and handle an HTTP request. Most of the article will be spent setting up the build/test/deploy pipeline, so we won't have space to make the serverless function do much more than say "Hello, world!"

This article is a sponsored article. Articles such as these are intended to provide you with information on products and services that we consider useful and of value to developers

Cloud native development involves more than just running code in the cloud. As we’ve discussed in part one of this series, DevOps with continuous integration and continuous deployment (CI/CD) is also part of cloud native, especially when running microservices.

In this article, we’ll focus on CI/CD and not so much on writing code. In fact, we’ll set up our Azure DevOps environment before we write any code at all. We’ll then be able to set up a new Function App with TypeScript in mere minutes, after which our code will deploy automatically after every push to our Git repository.

Setting Up the Project

We first need to create a Git repository in Azure DevOps. This repository is necessary to create a build pipeline. When you’re in Azure DevOps, either create a new project, which will automatically create a Git repository we can use, or add a new Git repository to one of your existing projects. Be sure to initialize the repository by adding a README file or a (Node) gitignore file. After that, clone the repository to your machine.

Next, we’ll need a Function App in Azure. Go into the Azure portal, add a new resource, and search for "Function". For quick cleanup later, put your new Function App in a new resource group, which you can create in the blade that opens up. The name of your Function App must be unique across Azure.

Since a Function is serverless, you’ll need a storage account to store your code. It’s good practice to use a dedicated storage account, so create a new one in Create Function App. The Consumption Plan is the serverless plan. Note that you can run your functions on a regular hosting plan, but this will limit your scaling options. You can pick either Linux or Windows as your operating system, but we picked Linux in this example. Next, disable Application Insights.

Image 1

Next, click Create and wait for your Function App to be provisioned.

Note that while this is the easiest method to create a Function App, it may not always be the best choice because it still requires manual work.

Creating a Build Pipeline

Now, go back to Azure DevOps. This is where we’ll create our pipeline to build, test, and deploy our project. Go to Pipelines and click New pipeline. We’ll use the Azure Repos Git option, but notice that you can use other Git sources as well, such as GitHub, which takes you through an authorization process, but otherwise works exactly the same.

After you select your Git repository, pick a pipeline template. You’ll find some templates for ASP.NET Core (and .NET Framework), Node.js, Android, and Ant. When you click Show more, you find additional templates for C/C++, Go, Python, PHP, and much more.

The one we’re looking for is Node.js Function App to Linux on Azure. Clicking it prompts you for an Azure subscription and a Function App. So, choose your subscription and the Function App we’ve just created.

After that, you get a YAML script that describes the steps necessary to deploy your code to your Azure Function. We don’t have to change it right now as it will work right out of the box with the default Node.js Azure Function template. I’ll get into some nitty-gritty details in a bit. First, let’s verify it works by deploying some code to Azure.

Creating an Azure Function Using TypeScript

The easiest method of creating an Azure Function with TypeScript is using Visual Studio Code. Install the Azure Functions extension then go to the newly-added Azure page.

There, click Create New Project in the upper-right corner.

Select a folder: the repository you cloned while setting up this project.

After that, pick your language: TypeScript.

Choose HTTP trigger, name it (or leave the default HttpTrigger1), and press Enter.

For authorization level, pick Function.

Finally, opt to open your project in the current window. This may prompt you to install some additional Azure Functions extensions, which you should accept.

Once that’s all done, a new Function is scaffolded. Check that it runs by pressing F5 or selecting Start Debugging from the Run menu. You’ll see some stuff happening in the terminal, then finally you’ll see:

[Function name]: [GET,POST] http://localhost:[port]/api/[Function name]

Open the link in your browser and you should see "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response."

So, add something like "?name=Bill" to the end of the URL, and you should now see "Hello, Bill. This HTTP triggered function executed successfully." That means everything works.

Now, it’s time to commit and push the code back to Azure DevOps and watch the magic happen! Go to your build pipeline and you should see a couple of green checks indicating everything went well. To check that your code is actually running correctly, go to the Azure portal and find your Function App. Click Functions and select your function. Here, click Code + Test then click Get function URL and copy the URL (it has a code, which is the Function authorization that we added, so not just anyone can invoke your function). The result should be the same as when you run it locally.

Congratulations, you’ve just automatically built and deployed your TypeScript Azure Function!

How It Works

So what did we just do?

First of all, when we created a pipeline in Azure DevOps, we created a YAML file that was pushed to our Git repository. This YAML file describes the steps to build, test, and deploy our code. Azure DevOps can read and execute it. For example the following command tells Azure DevOps to start executing when something is pushed to our main branch:

   – main

The important pieces are in the following section:

- task: NodeTool@0
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    if [ -f extensions.csproj ]
        dotnet build extensions.csproj --runtime ubuntu.16.04-x64 --output ./bin
  displayName: 'Build extensions'

- script: |
    npm install
    npm run build --if-present
    npm run test --if-present
  displayName: 'Prepare binaries'

In this code, we define some steps to run. The first task is to install Node.js, using the NodeTool task. In Azure DevOps, go to the settings above a task to get some visual help with writing your YAML script.

After that, we run two Shell scripts. The first runs the dotnet build command, if necessary. The second runs npm install and runs the build and test scripts from our package.json file. Meanwhile, the default Node.js TypeScript Function template scaffolded a project with the TypeScript package from npm, as well as built a script that transpiles our TypeScript into JavaScript.

The next task, omitted here for brevity, puts our root folder in a ZIP file in the artifact staging folder. After that, the artifact staging folder is published as an artifact named "drop". Subsequent processes can reuse these artifacts.

Next is the deploy stage. We only have a single build environment, but we want to deploy our Function to Development, Test, Acceptance and Production (DTAP) eventually. So, for this, we use a release pipeline. You may remove the -stage: Deploy code completely, but before you do, look at the AzureFunctionApp@1 task settings. We’ll use this exact same step when we build a release pipeline.

Release Pipelines

Go to Releases in Azure DevOps. Unfortunately, release pipelines don’t work with YAML scripts, so we’ll have to do some clicking here.

First, create a new release pipeline. When prompted for a template, pick: Deploy a function app to Azure Functions.

Rename your pipeline to something like "TypeScript Function release".

Next, rename "Stage 1" to "Development".

Click Add an artifact and, from your project, choose the Function App build. Enable continuous deployment via the lightning button on the artifact.

Next, go to your tasks. In your Development deployment process, pick an Azure subscription, set App type to Function App on Linux.

For your App service name, set $(AppServiceName). "AppServiceName" is a variable that we can set per environment, so we can specify a different name for our test environment when we set that up.

Under Run on agent, set the Agent Specification to ubuntu-20.04. The Deploy Azure Function App is actually the same task as the AzureFunctionApp@1 we had in our YAML script.

Next, go to variables and add "AppServiceName". For value, enter the name of your App Service and set it to the Development scope.

Save, then run your pipeline. If all goes well, your Azure Function URL still works.

It is now possible to clone the Development stage and rename the clone to "Test". You can then give your variable another name in the Test scope. Your development and test releases will then be the same process using the same artifact, created by the same build, but will deploy your code to another Azure Function App. However, we aren’t going to clone to a new environment just yet. First, we’re going to add a few extra steps to the pipeline, as described in the next article.

Next Steps

Creating and deploying a Node.js Function App with TypeScript is easy to do, and you can do it in mere minutes. The default templates actually provide a good foundation.

In the next installment of this series, we add a back end to our Function App, as well as add DTAP to our release pipeline, turning our Function App into a microservice.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sander Rossel
CEO JUUN Software
Netherlands Netherlands
Sander Rossel is a Microsoft certified professional developer with experience and expertise in .NET and .NET Core (C#, ASP.NET, and Entity Framework), SQL Server, Azure, Azure DevOps, JavaScript, MongoDB, and other technologies.

He is the owner of JUUN Software, a company specializing in custom software. JUUN Software uses modern, but proven technologies, such as .NET Core, Azure and Azure DevOps.

You can't miss his books on Amazon and his free e-books on Syncfusion!

He wrote a JavaScript LINQ library, arrgh.js (works in IE8+, Edge, Firefox, Chrome, and probably everything else).

Check out his prize-winning articles on CodeProject as well!

Comments and Discussions

-- There are no messages in this forum --
Beginner's Guide to Cloud Native Development in Node.js