Create Azure webapp using Nodejs and automate with Github actions

azure Apr 05, 2020

This post will cover the important things to focus while we create azure web app using Nodejs and automate with Github actions.

Create Azure Web App

Choose “Web App” from Create a resource. Select “Node 12 LTS” from the field Runtime Stack. Now you can create the web app and the url will be available in Overview section of the webapp.

Setup your website code with Express

To Setup the website to work on nodejs environment, we will be using express as server.

Create package.json using npm init commit or paste the below code in your file.

{
“name”: “mathan-ka”,
“version”: “1.0.0”,
“description”: “Mathan Web profile”,
“scripts”: {
“start”: “node index.js”
},
“repository”: {
“type”: “git”,
“url”: “https://github.com/MathanKA/mathan-web.git"
},
“author”: “mathanka”,
“private”: true,
“dependencies”: {
	“express”: “4.17.1”
}
}

Now move all your website code into “public” directory. And run npm install command to install the express in your project. Make sure you have installed node in your system.

Now we have to setup express server to serve our public directory. create a file “index.js” outside of public directory and paste the below code.

const express = require(‘express’); 
const port = 1337; 
const app = express(); 
 
app.use(express.static(‘public’)); 
 
app.get(‘/’, (req, res) => { 
}); 
 
app.listen(port);

It’s a very basic server setup. Important thing is Port number.

Usually, we use 3000 port. But in Azure web app runs in port 1337.

Configuring web.config for Azure

Azure needs web.config to config node process in Microsoft IIS. Create a file web.config and paste the code from the below link

https://github.com/MathanKA/mathan-web/blob/master/web.config

Automate Deployment using Github Actions — CI/CD

Go to “Deployment center” at left side menu in your azure web app.

Choose Github and authorize your account.

In next steps, choose github actions, link your repo and you can see the configuration like below. Finish the setup.

This will create a workflow file in your github repo and a secret key in settings which has publish profile code.

You can see the auto deployment workflows in github actions tab.

If suppose workflow got failed. Check the code in workflow file that is placed in .github/workflows

Make sure your app, publish profile , run commands are named correct.For our simple web app, workflow code will look like this:

name: Build and deploy Node.js app to Azure Web App — mathan-ka
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: ‘12.x’
- name: npm install, build, and test
run: |
npm install
- name: ‘Deploy to Azure Web App’
uses: azure/webapps-deploy@v1
with:
app-name: ‘mathan-ka’
slot-name: ‘production’
publish-profile: ${{ secrets.AZURE_KEY_COMES_HERE }}
package: .

Once the workflow is complete, visit the webapp url.

Hurray!! Your Webapp is live now

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.