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 · Accepted Answer · 2020-09-01 15:00:58Z

1

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.

edited Sep 1, 2020 at 15:00

answered Sep 1, 2020 at 10:31

krishg

6,5782 gold badges15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Cliff Chaney Over a year ago

Thank you for your quick suggestion. However, this did not have the desired effect. It made no difference. localhost continues to work. But the Azure deployed site behaves the same. i.e. my-site.com/ displays the correct web page by ./API/ calls return 404. All good on localhost.

Cliff Chaney Over a year ago

Sure I can! Good suggestion. But the static content was already rendering correctly. This change had no effect on my problem. Static content still renders fine. ./API/ calls still give 404 error. Seriously... thank you for your continued suggestions. I'm willing to try anything.

krishg Over a year ago

yeah it's bit strange, the working example link I shared just runs fine for me. Also, note in my updated answer, I am now registering an explicit virtual route for static files. So, now /static/.. serves only static files and /api/.. serves api requests.

Cliff Chaney Over a year ago

I'll try the linked app as a baseline - right down to putting static content in a different folder. I was reluctant since it's 5 years old. But if you got it working, it looks like it's worth a shot. I'll flag the above response as an answer if it works. Thank you!

krishg Over a year ago

I am not suggesting to move to different folder. /static is just a virtual path, your folder is still "public". expressjs.com/en/starter/static-files.html

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related