Create Express Node JS App And Deploy To Azure Web App

This article helps you to create an express app in a simple and quick way with the view engine and host in an Azure web app.

Why Express JS

When a high priority task needs to create an API, there are plenty of packages/methods and middleware available to use and choosing the right one is not an easy job. Instead of spending time researching what to use and how to create it, making use of the framework with built-in features available is a wise idea. Express includes every essential fundamental of the web application features without disturbing the rules o Node JS as per the guidelines.

How to create Express JS App

To simplify the task we can use the express generator npm package to create an app every time quickly and easily from the house of ExpressJS

Open a PowerShell terminal or cmd prompt and execute the below command.

npm install -g express-generator

assuming you have installed the LTS version (recommended) version of Node package manager in your machine (typically this article covers the Windows OS). Installing the app generator package globally.

Once the package is installed, go to the destined folder to create all the projects and fire the below cmd.

npx express sampleExpressApp --hbs

npx command is used for creating an application boilerplate that includes all the necessary files and folders for the project to run. Dash (--hbs) is a choice of having a view engine to be created along with the app. We have others options like ejs, pug, hogan, jade or no view (for no engine). We will see why a view engine is required in the next section of this article.

Folder Structure and Files

Open the folder in VS Code

The app.js file holds all the methods for exporting the app with the help of express routers and middleware like logger, cookie parser, morgan and HTTP error handlers that are already added.

App.use is routing all the requests (‘/’) to the routes folder, which means when the browser reaches an endpoint the desired responses will be sent back (along with the status code like 200 OK / 404 Page Not Found) from the js files added in the routes folder.

But in case if the response JSON is to be viewed in a browser friendly HTML format then the app requires an additional capability like a view engine. Here in this app, the view engine used is Handlebar JS where all the HTML tags are supported and additionally the JSON object which is received from the router is expressed as a value.

  

In the bin folder, www file will expose the app in the PORT 3000 by default. If required this can be modified to use different PORT by providing the value in the .env file (which needs to be created separately).

Public folders are included to amend any logos/image files/open source libraries in this project.

Now install all the packages included, using the command

npm i

and start the app using the command

npm start

Now its time to deploy this sample app in Azure Web Apps

In the VS Code, install the Azure App Service Extension from the marketplace (I have already installed)

Once the extension is added, go to the service and login to Azure portal by the following steps

1. Click “Ctrl + Shift + p” to open the command palette
2. Type “Azure Sign” and choose the sign-in option to login to Azure portal
3. Azure login auth page will open in a browser window.
4. Once authenticated the page can be closed and can go back to VS Code.

  

Now select the Subscriptions based on availability or create one.

Click on the “Deploy to Web App” icon and select “Create new Web App” with advanced option

Follow the steps for choosing the resource group/app service plan. Please note app service plan will be subject to availability based on the region selected. For this demo, I have chosen the Free tier(F1) app service plan. Also, Application Insights are skipped here, but for production it will be beneficial.

The app will be deployed to the Azure Web App, meanwhile, VS Code will ask for confirmation on click of the “Deploy to web app” button every time the code will deploy to the web app, please confirm to “Yes”

Finally, once the app is deployed, add a new setting

“SCM_DO_BUILD_DURING_DEPLOYMENT” to true

Click on the “Deploy to web app” button again. Once the deployment is completed you will see this message popping up.

Now the website is up and ready for consumption.