How to Deploy a Serverless Node.js Application on Azure

Written by nuralem | Published 2023/05/17
Tech Story Tags: nodejs | serverless | azure | js | javascript | backend | microsoft-azure | microsoft

TLDRThis article will guide beginners in software development on how to deploy a serverless **Node.js** application on **Microsoft Azure. We will cover setting up an Azure account, creating a Node.js application, configuring Azure Functions for serverless deployment, and finally, deploying our application. The goal is to provide you with a straightforward and practical guide.via the TL;DR App

This article will guide beginners in software development on how to deploy a serverless Node.js application on Microsoft Azure. We will cover setting up an Azure account, creating a Node.js application, configuring Azure Functions for serverless deployment, and finally, deploying our application. The goal is to provide you with a straightforward and practical guide to get your Node.js application running on Azure without the need for any basic knowledge.

Setting up an Azure Account

Before we can deploy anything, you'll need an Azure account. If you don't have one yet, visit the Azure website and sign up for a free account. You'll get $200 in Azure credits and free access to popular services for 12 months.

After creating an account, first, you need to create a Web App resource.

After clicking on the “Create a resource” you will see this.

The Azure official documentation says: “App Service “Web Apps” lets you quickly build, deploy, and scale enterprise-grade web, mobile, and API apps running on any platform. Meet rigorous performance, scalability, security, and compliance requirements while using a fully managed platform to perform infrastructure maintenance.”

On this page, the most important is the Basic tab. On this tab, you will need to specify yellow things. I have highlighted them using a brush.

After pressing “Review + create” and "Create“ buttons your resource will be successfully created.

Going back to the Home page, you will see your resource, which has Type “App Service“. Now we need to set up Azure in your VS Code app.

Setting up Azure connection with VS Code

To set up Azure with Visual Studio Code (VS Code), you'll need to install the Azure App Service extension and sign in to your Azure account. Here are step-by-step instructions to do that:

  1. Install VS Code: If you haven't already, download and install Visual Studio Code from the official website: https://code.visualstudio.com/

  2. Install Azure App Service extension: Once you have VS Code installed, you can add the Azure App Service extension.

    • Open VS Code

    • Click on the Extensions view icon on the Sidebar (or press Ctrl+Shift+X).

    • Search for 'Azure App Service'.

    • Click Install.

  3. Sign in to Azure: Once the Azure App Service extension is installed, you'll need to sign in to your Azure account.

    • Click on the Azure icon on the Sidebar to switch to the Azure: App Service Explorer.

    • Click Sign in to Azure and follow the instructions.

Now you're ready to use Azure with Visual Studio Code! You can create new web apps, deploy your applications to Azure, manage your resources, and more, all directly from VS Code.

Create Hello World Nodejs app

Creating a "Hello World" Node.js application in Visual Studio Code (VS Code) is straightforward.

Here's a step-by-step guide on how to do that:

  1. Install Node.js and npm: If you haven't already, you'll need to install Node.js and npm (which comes with Node.js) on your machine. You can download Node.js and npm from the official Node.js website: https://nodejs.org/

  2. Create a new folder for your project: Open VS Code, and create a new folder for your project. You can do this by clicking on File > Open Folder... and then create a new folder.

  3. Open a new terminal in VS Code: You can do this by clicking on Terminal > New Terminal. This will open a new terminal at the bottom of your VS Code window.

  4. Initialize a new Node.js application: In the terminal, type npm init -y. This will create a new package.json file in your folder with default values.

  5. Create a new file for your application: Click on File > New File to create a new file, and save it as app.js in your project folder.

  6. Write your "Hello World" program: In the app.js file, type the following code:

    const http = require('http');
    
    const server = http.createServer((req, res) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Hello World\n');
    });
    
    server.listen(3000, '127.0.0.1', () => {
        console.log('Server running at http://127.0.0.1:3000/');
    });
    

    This code creates a simple HTTP server that responds with "Hello World" for every request.

  7. Run your application: In the terminal, type node app.js to start your application. You should see the message "Server running at http://127.0.0.1:3000/".

  8. Check your application: Open a web browser, and go to http://127.0.0.1:3000. You should see "Hello World".

Upload local project to Azure cloud

You should open Azure App Service extension in your VS Code app. Then you will see,

Right-click on the hackernooontestapp resource and click on Deploy to Web App.

Then you need to choose the project folder.

5:32:36 PM: Deployment to "hackernoontestapp" completed.

After deploying the app, you will cause some Azure errors.

5:33:59 PM: "hackernoontestapp" reported a critical error: Cannot find module '/home/site/wwwroot/index.js'

This error means that we need to open package.json file and make some changes to it.

{
  "name": "hackernoon",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

It should look like this. We have replaced “main“: “index.js“ with “main“: “app.js“ and added a start script to it. By default, when you select Azure Web App based on Linux, it will open an 8080 port in a docker container, that’s why we need to change our app.js code.

const http = require('http');

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
});

server.listen(8080, '0.0.0.0', () => {
    console.log('Server running at http://0.0.0.0:8080/');
});

Deploy the app again, and finally, you will see Hello World on your browser! Don’t forget to reboot your cloud app on the Azure website. In case of some problems, you can right-click on your web app and click “Start Streaming logs“on your VS Code extension. You will see error messages and can deal with them.

Conclusion

Thank you for reading! If you've followed along, you now have a basic understanding of how to deploy a serverless Node.js application on Azure. Remember, practice makes perfect. So, continue exploring, and before you know it, you'll be an expert in deploying serverless applications.


Written by nuralem | Software engineer
Published by HackerNoon on 2023/05/17