Deploy NodeJS App to Azure App Service from VS Code

What is Azure App Service?

Azure App Service is an HTTP-based service hosting web applications, REST APIs, and mobile backends. You can develop in your favorite language, be it .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. Applications run and scale with ease on both Windows and Linux-based environments.

What is Node JS?

Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more. Node.js is a backend JavaScript runtime environment that runs on the V8 JavaScript Engine and executes JavaScript code outside a web browser.

Prerequisites

Before starting to build a Node.js application in Azure, set up the following:

Create a free Azure account and ensure you have at least one active subscription.
Install Node.js and npm on your local machine. Verify Node.js is installed by running the node –version command.
Install Visual Studio Code with the Azure Account and Azure App Service extension.

Create Azure App Service(Azure Web App) on Azure

Login into https://portal.azure.com/ Azure Portal through your Azure Credentials. Then search App Service in the search box and create a new Web App on Azure.

I have created a web app with the below details and using Free Plan for this example.

Deploy NodeJS App to Azure App Service from VS Code

Then Click Next, Next till Review+Create Tab. I have used all default configurations in between for all Tabs. I have nothing changed. Now click on Review+Create Button.

Deploy NodeJS App to Azure App Service from VS Code

Now click on Create button, and it starts creating the web app on Azure.

Deploy NodeJS App to Azure App Service from VS Code

Now click on the Go To Resource Button, and you can see your brand new web app. You can explore the left menu by yourself for various configurations.

Deploy NodeJS App to Azure App Service from VS Code

So our Azure Web App is created. Now we will create a new sample NodeJS Express App.

Create NodeJS App using Express Module

Open Visual Studio Code and create a new folder SampleApp; under the Demo folder, open New Terminal in VS Code and hit the npm init -y command. So it will create a new package.json file.

Deploy NodeJS App to Azure App Service from VS Code

We will create NodeJS App by using an express module. Now hit the npm install express command and install the express module. After this command node_modules folder was created in the project with the package-lock.json file

Deploy NodeJS App to Azure App Service from VS Code

Now, create an index.js file and write some sample code.

Deploy NodeJS App to Azure App Service from VS Code

Set up the startup screen in the packgae.json file. We will set up the index as a startup screen per the below change in the package.json file "start": "node index".

Deploy NodeJS App to Azure App Service from VS Code

Create an index.html file with some sample HTML inside the public folder.

Deploy NodeJS App to Azure App Service from VS Code

We have set up our basic sample app. Now we will run this app using the npm run start or node index command. Hit the command in VS terminal, and our app will be running on the 8080 port.

Deploy NodeJS App to Azure App Service from VS Code

Hit the http://localhost:8080/ in the browser; our app is up and running in localhost. We will now deploy this app on Azure App Service using VS Code.

Node JS

Deploy NodeJS App on Azure App Service

From the Visual Studio Code Extensions, download and install the Azure Account and Azure App Service extensions to deploy the app on Azure.

Deploy NodeJS App to Azure App Service from VS Code

Now, we have to login into Azure Account through VS Code. Press CTRL+SHIFT+P and search Azure Sign In, and login into Azure Account through VS code. So, we can access the Azure resources and deploy them on Azure from VS Code.

Deploy NodeJS App to Azure App Service from VS Code

After successful login into Azure, right-click on the SampleApp folder and click on Deploy to Web App button for Azure Deployment.

Deploy NodeJS App to Azure App Service from VS Code

After clicking Deploy to Web App button, it will ask which Azure Web App we want to deploy the code. So, we have to choose our Azure App Service and start deploying the code. Our Azure Web App is nodejsappmy, so just select it.

Deploy NodeJS App to Azure App Service from VS Code

After the successful deployment, you will get the logs and message into the output window in VS code whether the app is deployed or not.

Deploy NodeJS App to Azure App Service from VS Code

Now click the Browse Website button, which shows in VS Code after deployment on Azure. You can directly open your app from VS Code. It will open up in the browser with our Azure App Service URI.

Node JS

We have successfully deployed our NodeJS Express App on Azure App Service through Visual Studio Code !!