Azure Question posted in
The official documentation to get you started can be found here.

Run Express server with my NodeJS app via Azure App Service deployed to Azure Container

My NodeJS with Express server in TS app gets a 404 when I hit the https://appurl/server-running endpoint in server.mjs. But when I do https://appurl/assets/img.png, it returns back an image which is not what I was expecting.
The default https://appurl/ is a basic TS page which works fine.
I tried redirecting my url requests to server.mjs via web.config hoping to use iisnode but that does not work either. Also, I don’t see any IISNODE logs.

I have also tried navigating in Azure container via kudu where my app is deployed to manually start node server.mjs and then hitting the endpoint, but got the same results. Looking at process explorer, my express server does not run unless I manually invoke it via kudu cli which is another issue.
I got my cors set to * for now.
This Wep App is created as an App Service deployed on an Azure Container, I am currently on a free tier of azure, supecting the free tier does not allow iisnode? I cannot install anything on the container either.
Node v20.18.0
What am I missing here, why is my express server not running and my redirects not working after deployments?

HTTP Error 404.0 – Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

PS: I have a beginner-level understanding of these concepts, and I am doing this project as a learning experience.

package.json snip

`  "type": "module",
  "main": "server.mjs",
  "scripts": {
    "dev": "vite",
    "mainbuild": "tsc -b && vite build && npx tsc -b tsconfig.server.json",
    "build": " npm run mainbuild && npm run rename.mjs && npm run postbuild",
    "postbuild": "cp web.config dist/",
    "rename.mjs": "renamer --find "/\.js$/" --replace ".mjs" "./dist/*.js"",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "concurrently "node server.mjs" "vite""`

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.mjs" verb="*" modules="iisnode" resourceType="Unspecified" />
    </handlers>
    <defaultDocument>
      <files>
        <clear />
        <add value="server.mjs" />
      </files>
    </defaultDocument>
    <iisnode>
      <nodeProcessCommandLine>node</nodeProcessCommandLine>
      <loggingEnabled>true</loggingEnabled>
    </iisnode>
  </system.webServer>
</configuration>

server.ts which is converted to js and then renamed to mjs

import express from "express";
import cors from "cors";
import {existsSync} from "fs";
const {FRONTEND_URL, EXPRESS_SERVER_CONFIG} = await import(
  existsSync("./config.ts") ? "./config.ts" : "./config.mjs"
);
import JSONBig from "json-bigint";
const app = express();

app.use(
  cors({
    origin: FRONTEND_URL, 
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], 
    credentials: true,
  })
);
app.use(bodyParser.json());

app.get("/server-running", (req, res) => {
  console.log(req.baseUrl);
  res.send("Server is Running");
});

app.use((req, res) => {
  res.status(404).json({error: "404"});
});

const PORT = process.env.PORT || 3000; 
app.listen(PORT, () => {
  console.log(
    `Server is running on port ${PORT} front end url: ${FRONTEND_URL}`
  );
});

CI/CD
CI/ CD Pipeline

Kudu
404 Error and Kudu browing

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Issue 1: Thank you @suresh, first step forward was adding tsconfig.json file to my build.

    Issue 2: I had to get the mjs to cjs since the import keyword does not work in mjs. module: CommonJs to the rescue for my server.ts file which I need to manually rename to cjs after build using renamed.

    Issue 3: I had the whole application running in FE, meaning the server runs on FE too, so adding VITE_CONFIG_VARIABLE: "string", ; adding VITE_ keyword to all my config variables was needed.

    Issue 4: I had to write a function in a separate file to import config values as some values needed process.env and some needed import.meta.env for importing the variables from .env file.

    import "dotenv/config";

const getEnvVar = (key: keyof ImportMetaEnv): string => {
  if (
    typeof import.meta !== "undefined" &&
    import.meta.env &&
    import.meta.env[key] !== undefined
  ) {
    return import.meta.env[key] as string;
  } else if (process.env[key] !== undefined) {
    return process.env[key]!;
  }
  throw new Error(`Missing required environment variable: ${key}`);
};

export const environmentVariables = {
  // Square API Configuration
  environment: getEnvVar("VITE_SQUARE_ENVIRONMENT"),


  2. 0

    But when I do https://appurl/assets/img.png, it returns back an image which is not what I was expecting.

    When you access https://appurl/assets/img.png and get an image, it indicates that the server is serving static files correctly.

    and also add "outDir": "./dist", in the tsconfig.json configuration file.

    enter image description here

    I can be able to send the post req to the server after configuring this locally.

    Initially I too got the same 404 error it come due to incorrect endpoint directing towards server.

    After making changes I had deployed my application to the azure app service.

    enter image description here

    deploying through pipeline or from editor doesn’t make difference for your error.

    After the deployment I can be able to run my application successfully and also able access endpoints too.

    Kudu console:
    enter image description here

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search