"What is the best approach for setting up an Azure Web App to host both an Express static site and API

Setting up an Express app was a breeze for me, but when it comes to deploying it on Azure Web App, I'm hitting some roadblocks!

The structure of my app is quite simple: a static web app with its own API. Requests to /website.com/api are forwarded to a different server to avoid CORS issues, while everything else is served from the static site area.

Below is the code snippet for my 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' })

// Code for handling POST and GET requests to '/api'

While everything runs smoothly on localhost, after deploying to Azure Web App, I encounter a strange issue. The static pages load fine, but any request to my-web-site.com/api/ results in a 404 error.

I suspect that Azure's server is looking for an /api/ folder or index.html within it, causing the 404 instead of processing the request through my root index.js file.

Although I've come across some outdated instructions on redirecting in Azure, they don't seem to apply here. I'm yet to find a solution either in the console settings/configurations or networking options.

I've attempted creating a web.config file for redirection purposes, but it seems like I might be missing a step. Before sharing the code, I'd appreciate some guidance to ensure I'm on the right track. It feels like I'm overlooking something obvious.

Answer №1

Would you be able to modify the static middleware registration to look like this:

var path = require('path');


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

In this modification, we are explicitly setting the route /static (or any other name you prefer) for serving static content.

Interestingly, the code snippet I found in https://github.com/Azure-Samples/app-service-web-nodejs-get-started works perfectly fine without any adjustments needed on my end.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The UseEffect function is displaying an inappropriate value, however, it only occurs once

My goal is to display the state value whenever the password is changed using the useEffect hook in React. It's working fine for the password, but the issue arises when I try to change the email. The console also renders the email value, which is not i ...

Nuxt.js serverMiddleware failing to handle errors as expected

In the serverMiddleware directory of my Nuxt.js (v2.15) project, I am developing a backend using Express (v4.17). Currently, I am working on integrating error handling in my API routes, specifically for input validation errors. According to the documentat ...

Is it possible to customize the MUI CSS for a specific menu item using the sx prop?

How can I apply the MenuItemStyle to the sx prop of a MenuItem using: const MenuItemStyle = { '&:hover': { backgroundColor: `${theme.color.secondaryHover}`, }, '&:selected, &:selected:hover': { backgroundColor: ...

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

As a newcomer to testing, I am attempting to write Jasmine/Karma tests for a controller. Given a sample test to use as a starting point, the issue arises when passing the $controller in the argument of the it block. The test passes successfully with this s ...

Navigating to the next page on a dynamic component in Angular 5 by

I'm uncertain if this scenario is feasible, but I have a page that fetches a list of items from an external API. There are currently 5 elements on the page, each acting as a link to its individual dynamically generated page through query strings. For ...

Unable to reset the input value to an empty string

I have created a table with a search bar feature that filters the data when the search button is clicked and resets the filter to show unfiltered data when the clear button is clicked. However, the current input value is not clearing from the display even ...

Preventing CORS problems when a web application imports JavaScript modules from different domains

Currently, I am in the process of developing a web application using NodeJS. The application is divided into a back-end responsible for handling database queries with MongoDB, and a front end built on a Node-based web server that utilizes interactjs alongs ...

Struggling with Vue's Router Transition fade in/out effect not functioning as expected?

Question: I've implemented Vue's Router and it switches between components without any issues. However, I added a <transition name="fade" mode="out=in"> around it but the fade effect is not working as expected. Desired ...

The date picker feature of Jquery Mobile is not appearing on the popup field

I implemented the jtsage jquery mobile date picker, and I am facing an issue where the date picker appears behind the popup instead of in front of it when the text inside the popup is clicked. Here is a snippet of my code: <div data-role="content"> ...

Add the content of a JavaScript variable to a label without using any scripting

Is there a way to concatenate the value of a JavaScript variable with a label without utilizing jQuery? For example: Var global_message = "1234"; <label id="my-label">Test</label> I desire the concatenated value "Test1234" to be displayed o ...

Next JS restricts XLSX to return only 100 objects as an array of arrays

I've developed a file upload system that reads Excel files and uploads data to a database (using Mongoose). After implementing the code, I noticed that when I use console.log(sheetData), it returns an array of arrays with objects inside. Each internal ...

Read a local file using the HTML5 FileReader

I am currently working on developing an offline application that can read text from a locally stored text file. I have been researching and found that using html5 and FileReader can make this possible. My goal is to set a hard-coded relative path for the ...

`Warning: The alert function is not working properly in the console error

I am currently working on integrating otp functionality into my Ionic 3 project. I am facing an issue where I am able to receive the otp, but it is not redirecting to the otp receive page due to a specific error. Below is the console error that I am encou ...

Linking functions as needed

I apologize for the not-so-great title of this question. Basically, I have a library that generates users with predetermined capabilities. Currently, it involves creating a new user instance and calling asynchronous methods like: var User = require(...).U ...

Having trouble adding a track to a playlist on Spotify with a post request using fetch API

Struggling to post a track URI and playlist ID to the Spotify API in order to add a track to a playlist. Utilizing URL parameters and adding one track at a time based on Spotify's guidance that states 'The Spotify URIs of the tracks to add can b ...

Having difficulty passing the new state value using props in ReactJS

I am facing an issue with sending state values from parent to child components. Initially, the state value is empty but after making an API call, the state value gets updated. However, the props in my child component are still stuck with the initial empty ...

Having trouble with the Twitter share count URL - seeking out other options

Previously, I utilized the following Javascript function to retrieve the Twitter share count for a URL. Unfortunately, Twitter has discontinued providing the share count. Is there a more effective alternative available? // Twitter Shares Count $.getJSON ...

The passport authentication process is currently stalled and failing to provide any results

The current authentication process is functioning properly app.post('/login', passport.authenticate('local-login', { successRedirect: '/home', failureRedirect: '/login', failureFlash: true }) ); Howev ...

Attempting to implement Vue js extensions without relying on NPM or webpack

The issue Currently, I am trying to follow the jqWidgets guidelines provided in the link below to create a dropdown box. However, the challenge I'm facing is that their setup involves using the IMPORT functionality which is restricted by my tech lead ...

The worth of the scope is evident, yet it remains undefined when trying to access it

Currently, I am in the process of developing an AngularJS directive. However, I have encountered an issue where a scope variable appears to be undefined when attempting to access it. Interestingly, upon printing out the scope, it is evident that the variab ...