How do I host Express static site plus API in single Azure Web App

Question

I have what I thought was an extremely simple Express app. In fact, I stood it up and got it running on my laptop in less than an hour. It's deploying to Azure Web App that is driving me nuts!

I have a simple/static web app that also has its own API. So, requests to /website.com/api are handled as API (basically, forwarded to a different server to avoid CORS issues) and everything else is served from a static site area.

This is the entire Express App:

import express from 'express'
import fetch from 'node-fetch'
const app = express()

const API_SERVER_URL = 'https://my-web-site.com/'

app.listen(3000, () => console.log('Express listening at port 3000'))
app.use(express.static('public'))
app.use(express.json({ limit: '1mb' }))

app.post('/api', async (request, response) => {
  const paramStrArr = request.originalUrl.split('?')
  const paramStr = paramStrArr.length > 1 ? '?' + paramStrArr[1] : ''
  const results = await fetch(API_SERVER_URL + paramStr, {
    method: 'POST',
    headers: {
      "Content-type": 'text/plain',
      "Cache-Control": "no-cache"
    },
    body: JSON.stringify(request.body)
  })
  const responseBody = await results.text()
  response.send(responseBody)
})

app.get('/api', async (request, response) => {
  const paramStrArr = request.originalUrl.split('?')
  const paramStr = paramStrArr.length > 1 ? '?' + paramStrArr[1] : ''
  const results = await fetch(API_SERVER_URL + paramStr, {
    method: 'GET',
    headers: {
      "Content-type": 'application/json',
      "Cache-Control": "no-cache"
    }
  })
  response.send(await results.text())
})

This works perfectly when I run from localhost. Static content renders. API calls work great!

In fact, as the rest of the Web App is basically a static site in the public folder, that seems to be about the only part that's relevant to this problem. No security. Nothing in the least bit complex about this...or so I thought.

After deploying to Azure Web App, the static pages load and display great (i.e. my-web-site.com/ returns expected HTML page)! But any POST or GET to my-web-site.com/api/ returns a 404 error.

My guess is that Azure's server is looking for a ./api/ folder (and/or corresponding index.html), finds none and returns the 404 - instead of routing the request through my root index.js.

I've found old Azure docs on redirecting, but the instructions are outdated and don't seem to apply here (i.e. literally cannot be followed due to now-missing options, etc). I expected some way to do this in the console (i.e. in Web App settings/config/networking); but I've not found anything.

I've tried creating a web.config to redirect calls. But if this is the solution, I'm doing something wrong. I can share that - if needed - but I'd like someone to verify that I'm headed in the right direction first. I suspect I'm missing something pretty simple.

krishg krishg · Accepted Answer · 2020-09-01T10:31:36

Can you update the static middleware registration to:

var path = require('path');


app.use('/static', express.static(path.join(__dirname, 'public')));

Here we are explicitly defining the route /static (or whatever name you prefer) for static contents.

It's bit strange, the working sample from https://github.com/Azure-Samples/app-service-web-nodejs-get-started just works fine for me.

How do I host Express static site plus API in single Azure Web App

1 Answers