Deploy simple Express app to Azure App Service

Question

I have a ridiculously simple Node/Express app that I am trying to get running in Azure App services. It's sole purpose is to allow me to learn by getting it working the to incrementally expand the app using Git and Azure Devops.

I'm stuck already.

I have a local folder 'node-starter' and in there is my app.js, package.json, node-modules (including Express) and so on. The app.js is very simple:

const express = require("express")

const app = express()

app.get("/", (req, res) => {
    res.send({
        "first": "jason",
        "last": "bourne"
    })
})

app.listen(3000,()=> {
    console.log("server running....")
})

My package.json is also very simple:

{
  "name": "node-starter",
  "version": "1.0.0",
  "description": "simple node and express app to test azure deployments",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "express": "^4.17.1"
  }
}

When I run this locally using the npm start script the application runs and I can get the json response on the localhost on port 3000. Very simple and works perfectly locally.

What I then do is:

1. Set up an Azure Devlop project and repo for this simple project, I call it 'node-simple'.
2. I then push the entire contents of my node-starter folder up to that repo and visually check that everthing is there and looks fine. It does.
3. I then go to Azure Apps and create a new web app. I choose a free tier Linux machine and go through the business of setting up the App then go to the 'deployment center'.
4. In the deployment center I tell it where to find the code repo (in Azure Devops), the wizard finds this and allows me to select it.
5. I am able to supply info like startup commands (npm start) and the Node version (12 LTS). I then deploy it and after about a minute or so I get a message saying all successful.
6. I then go back to the Azure Devops project and can see in pipelines that there has been a build AND a release to production. So, it's all looking good. No errors.

But, when I then browse to the URL provide by the App servive I typically get an application error 503. When I click on the link to get more information, I am taken to a blank Azure help screen. Just three flashing blue circles that never come to anything.

What might be going wrong? Everything looks like its setting up and deploying ok, the app just doesn't seem to be working once its deployed. It has to be something simple, right?

Couple of questions, if that's allowed:

1. In the app.js I am specifying port 3000, which seems to be default for Express. Does that mean I need to append ':3000' to the Azure supplied URL or does Azure know to proxy the port?
2. After a lot of clicking around I found a Bash shell in Azure for the app (Kudo). When I connect to that I see that my app code appears to have been deployed to site/wwwroot. I can see my files and app.js in there. I tried running 'npm start' there but still no good. I tried an 'npm i' to try to resolve any dependency issues - still no good.

I also tried deploying the app using the VSCode plugin and got exactly the same results. Please put me out my misery and tell me where I might be going wrong. Please.

Answer 1

Only ports 80 and 443 are open for Web Apps. You should change the listen port to process.env.PORT.

const port = process.env.PORT;
app.listen(port);