With so many different types of serverless out there today, whether it's something like Heroku or Azure, there's a lot to keep up with. Not only with which service to use and the changing features, but how to continuously deploy an application to one of these services and ensure quality engineering through the entire software lifecycle. What's the best way?

In this blog post, you will learn how to deploy a JavaScript web API that was made via Express to Azure App Services via the deployment center. The Azure App Service deployment center is a way to connect source control directly to the web API and anytime a commit is made to the source control repository, the web app gets updated with the new code.

Prerequisites

To follow along with this blog post, you should have the following:

  • A working knowledge of source control, like GitHub.
  • A GitHub profile.
  • An Azure subscription. If you don't have one, you can sign up for a 30-day free trial here.
  • A mid-level knowledge of JavaScript
  • How APIs work from a frontend perspective.
  • The JavaScript web API used for this blog post, which can be found here. Please clone it or fork it to your GitHub profile.

Taking a Look at the JS Code

Before you can use any type of deployment system, you need code to deploy. The JavaScript code that is used will be an Express API that returns the date and time. With each refresh of the browser, the time changes to match the exact time of the day.

The API

The Node module that is used is express, which is an API framework built for JavaScript. Express allows you to have a web facing API endpoint that users can navigate to.

The application itself returns only one value, which is the date and time. The date and time will be returned to the web browser from the root URL, which will be generated once you deploy the JavaScript code in the last section of this blog post.

The Express API is below. Let's break it down.

  • const express = require('express')
    const app = express() - The first two lines create constants that put in a requirement for the Express API to be used and then initiates the Express API It then holds the value inside of the app constant.
  • const port=process.env.PORT||80 - The port constant holds the value of what port (which is 80) the application should run on. More specifically, the process.env.PORT sets an environment variable to specifically use port 80. This is needed because sometimes, depending on what Platform-as-a-Service (PaaS) offering you are using, it may specify an environment port by default. Using the process.env.PORT bypasses that.
  • app.get('', (req, res) => {    var today = new Date()    res.send(today)    }) - The actual application itself. What the application is doing is returning a GET request at the root URL, which is why '' is empty. The application then has a variable that initiates the Date() method and returns the take method via the send method.
  • app.listen(port) - The last line initiates the application to specifically listen on port 80.
const express = require('express')
const app = express()
const port = process.env.PORT || 80

app.get('', (req, res) => {
    var today = new Date()

    res.send(today)
    
})

app.listen(port)

The Package.json

The package.json was created by using npm init, so it automatically initialized by looking at the GitHub repository listed in the prerequisites. As the Github repository is public, that's perfectly fine. However, if you want the package.json to look point to another repository, you should either:

  • Re-run the npm init after cloning down the code
  • Update the package.json which is shown below.
{
  "name": "js-express-api",
  "version": "1.0.0",
  "description": "Express API",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AdminTurnedDevOps/JS-Express-API.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AdminTurnedDevOps/JS-Express-API/issues"
  },
  "homepage": "https://github.com/AdminTurnedDevOps/JS-Express-API#readme"
}

Creating the Azure App Service

Now that you know what the code looks like and how the Express API will be used, it's time to create the Azure App Service that the JavaScript code will run on. To do this, you will use the Azure app portal.

If you are using Azure CLI (AZ CLI), you can also create a web app from the command line. The instructions can be found here.

Web Application Details

Open up the Azure web portal and go to the app services blade to start creating the Azure web app.

Click the + Add button.

Under the web app basics, please use the specific subscription and resource group that correlates with the subscription that the JavaScript application should reside in. For the code version, you will be using Node 12 LTS as that's the latest JavaScript runtime that Azure currently offers. As for the region, you can choose East US or any region that's closer to you.

The App Service Plan will stay as the default, but it can be changed if need-be. For the purposes of this blog post, it will stay as the default.

Once all of the information is entered, click the Next: Monitoring button.

Monitoring

Monitoring for the Azure web app will provide a way to enable application insights. Application insights is for:

  • Code monitoring
  • API monitoring

For example, from application insights, you can see if users are reaching the website via a GET request. You can also find helpful errors inside of application insights if there is a problem with the application and you are trying to troubleshoot. Although not mandatory, for the purposes of this blog post, application insights will be turned on.

Once complete, click the blue Review + create button.

Once the review is complete, click the blue Create button.

Connecting the Azure App Service to GitHub via Deployment Center

Now that the Azure web app is created, it's time to deploy code to it. One of the best ways to do this is by using the built-in deployment center inside of a web app. The deployment center gives you the ability to continuously deliver value to your end-users by keeping the Azure web app up-to-date with the code that is in GitHub. That means any times there is a code edit to GitHub where the JavaScript source code is, the Azure web app automagically updates.

Once the deployment is complete, click on the blue Go to resource button.

Under Deployment, go to Deployment center to start the JavaScript application deployment.

You will see a few different options under Deployment Center. Because the JavaScript code is in GitHub, you will choose GitHub.

Click the blue Continue button.

Under the Build Provider screen, you will see a few different options. GitHub Actions and Azure Pipelines are CICD tools which you can deploy the JavaScript code from. Because you want to keep the deployment in Azure web apps, you will use the App Service build service. Once chosen, click the blue Continue button.

Under the Configure option, you will choose the appropriate organization, repository, and branch of where you cloned the JavaScript code to. You will see an example in the below screenshot of where the JavaScript code is. Once complete, click the blue Continue button.

Deploying the JavaScript Web Application

In the previous section you configured the settings for the JS web app. Now it's time to deploy it.

Click the blue Finish button to complete the web app setup.

The deployment process will now begin, as shown in the screenshot below.

Once complete, you will see a Success status.

Navigate to the Overview dashboard to retrieve the URL of the web application.

Click on the URL and you will now see the web application.

Congrats! You have successfully deployed a JavaScript web application to an Azure App Service.

Conclusion

In this blog post you learned about not only how to use Azure App Services, but how to deploy a web facing application. You went over how to set up the deployment of the Azure web app using the Deployment Center and how the Deployment Center helps continuously deliver the application to end users automatically. You then got to see the application live in a web browser.

For your next challenge, try creating an app service deployment using another programming language. If you don't use any other programming languages, a recommendation is to try a C# web application. You can find instructions for that here.