"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

"Step-by-step guide on using JavaScript to print a PDF file stored locally

As an illustration, I have a local PDF file with 6 pages. When using the window.print() function, only one page is displayed in print preview regardless of what is shown in the browser. Instead of just one page, all pages should be visible in print previ ...

Issue with sending data to the server via API using AngularJS controller

I am a beginner in angular js and I am attempting to POST data to the server using an API that I have created: function addmovie_post() { { $genre = $this->post('genre'); $cast = $this->post('cast'); $director ...

ng-model fails to synchronize with HTML

When I click on ng-click, the model changes but the HTML remains the same... HTML <p>Reserved:<span>{{seatsInfo}}</span></p> <div ng-click="change()">change</div> JavaScript $scope.seatsInfo = 20; $scope.change = fu ...

Creating a password with two distinct numbers using regular expressions

In javascript I am struggling to create a password that meets the criteria of having at least eight characters, including two SEPARATE digits, one uppercase and one lowercase letter, as well as one special character (-, @, #, $, &, *, +) but not /, !, ? ...

Setting up webpack with a live server for your project is a crucial step

I am a beginner with webpack. I successfully configured this module for localhost, but now I need to host it. However, when I changed the IP address in the webpack.config.js file, it stopped working. Below is the content of my webpack.config.js:</p> ...

Restricting Checkbox Choices with JavaScript by Leveraging the forEach Function

I am developing a checklist application that limits the user to selecting a maximum of three checkboxes. I have implemented a function to prevent users from checking more than three boxes, but it is not working as expected. The function detects when an ite ...

Pause the audio using jQuery when the slide changes

I have a Drupal website with a slider that includes an audio player on each slide. I need the audio to stop whenever the slide changes. The slider plugin I'm using is owlCarousel. Here is my current code: $("#owl-demo").owlCarousel({ afterAction: ...

Creating dynamic pages using user input in Node and Express

Currently, I am facing a challenge in rendering text using node/express. Within my project setup, there is an HTML file containing a form. The file named search.ejs looks like this: $(document).ready(function(){ var userInput; $("#submit-button-i ...

Error in Rails due to a Javascript issue

My journey with learning Javascript started by following an easy game tutorial on RoR. I encountered an error in index.html.erb file which led me to a helpful video tutorial here. <script> var ctx, canvas; var data; window.onload = fun ...

Javascript time intervals run rapidly during tab changes

I am facing an issue where my neck is constrained at regular time intervals. I have a function that helps me calculate time one second at a time: Header.prototype= { time_changed : function(time){ var that = this; var clock_handle; ...

Adjusting the Connection header in a jQuery ajax request

I've been attempting to modify the Connection header using the code below, but so far, I haven't had any success jQuery.ajax({ url: URL, async: boolVariable, beforeSend: function(xhr) { xhr.setRequestHeader("Connection ...

A guide on customizing column names in MUI Datatables through object keys

I'm currently facing an issue where I need to set the name of a column in MUI Datatables using an object key. Specifically, I want to set one of the column names with the first element of children.childName so that it displays a list of child names, b ...

Using a toolbar to insert a hyperlink for hypertext communication

My journey with Javascript and React began this week, so I'm still getting the hang of things, especially in the front end domain. In my project, there's a link button within a toolbar. The idea is to click on it, have a text box pop up where yo ...

Automatically unset session variable 'unsetted' using a simple line of code

Why does the session information not get saved? When I reload the page, the session variable 'mucciusersess' disappears. What could be causing this issue? Thanks... I have a cookie on the client-side with a value like 'mucciuserid' se ...

Inform the PHP backend that the browser has been closed by the frontend Angular application

Currently, I am working on an Angular project that is interacting with a backend project created using PHP and ZF3. I am trying to figure out the most efficient method of informing the backend project when the user closes the browser window. Initially, I ...

Exploring JSON information containing colons in the labels

I am having trouble accessing JSON data in Angular that contains a colon in the label (refer to responsedata). This is the code causing issues: <li ng-repeat="i in items.autnresponse.responsedata | searchFor:searchString"> <p>{{i.autn:numhits} ...

Generating a JSON file using JavaScript amidst the presence of unconventional characters in JSON keys

In my Node Red Function Node, I'm currently facing a challenge of generating a JSON file from JavaScript code. The specific format I need for the JSON file is as follows: [ { "H-Nr.":"1", "Pos.-Nr.":"1" }, { "H-Nr.":"1", ...

This function is designed to only work under specific conditions

Looking for assistance with a function that takes an item ID as input and changes its border when pressed. The goal is to increase the border width by 2px when there is no border, and remove the border completely when pressed again. Currently, only the f ...

Show User-Specific Information Using DataTable

After conducting extensive research, I have been unable to find a suitable example to reference. My goal is to customize my DataTable so that it only displays data relevant to the currently logged-in user (admin accounts will have access to all data). I am ...

NodeJS executor fails to recognize Typescript's CommonJS Internal Modules

In the process of developing my NodeJS application, I am structuring it by creating internal modules to effectively manage my code logic. This allows me to reference these modules without specifying the full path every time. internal-module.ts export cla ...