Node.js doesnt load entire page on Azure although loads on localhost and Google Cloud

Emre Deveci 20 Reputation points
2025-01-26T09:31:09.62+00:00

Hello,

This web page has little node.js code isn't loaded properly on Azure however it is loaded full in Google Cloud.

  • Changed port number but doesn't work
  • If there is web.config file, nothing is loaded but when I delete it at least I could see the half of the page
  • I tried FTP and Linux and didn't change anything
  • Generally edit on VS Code and deploy
  • By the way it is loading on localhost but not Azure, you can see screenshots
  • Changed "start": "node ./bin/www" to "node server.js" nothing has changed https://theappwin.azurewebsites.net/
{
  "name": "myexpressapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;
const FILES_DIR = path.join(__dirname, 'files');

app.use(express.static(__dirname));

app.get('/files', (req, res) => {
    fs.readdir(FILES_DIR, (err, files) => {
        if (err) {
            return res.status(500).json({ error: 'Unable to read files directory' });
        }
        res.json(files);
    });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Files Directory</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .file-list {
            list-style: none;
            padding: 0;
        }
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            margin: 8px 0;
            background: #f8f9fa;
            border-radius: 6px;
            transition: all 0.2s;
        }
        .file-item:hover {
            background: #e9ecef;
        }
        .download-btn {
            background: #0366d6;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>Files Directory</h1>
    <ul id="fileList" class="file-list"></ul>

    <script>
        async function fetchFiles() {
            try {
                const response = await fetch('/files');
                const files = await response.json();
                updateFileList(files);
            } catch (error) {
                console.error('Error fetching files:', error);
            }
        }

        function updateFileList(files) {
            const fileList = document.getElementById('fileList');
            fileList.innerHTML = ''; // Clear existing list

            files.forEach(file => {
                const li = document.createElement('li');
                li.className = 'file-item';

                const fileName = document.createElement('span');
                fileName.textContent = `📄 ${file}`;

                const downloadLink = document.createElement('a');
                downloadLink.href = `./files/${file}`;
                downloadLink.className = 'download-btn';
                downloadLink.textContent = 'Download';
                downloadLink.setAttribute('download', '');

                li.appendChild(fileName);
                li.appendChild(downloadLink);
                fileList.appendChild(li);
            });
        }

        // Initial fetch
        fetchFiles();

        // Optionally, set an interval to refresh the file list periodically
        setInterval(fetchFiles, 60000); // Refresh every 60 seconds
    </script>
</body>
</html>

localhostOK

Azurefail

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
8,288 questions
{count} votes

Accepted answer
  1. Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor
    2025-02-03T18:11:23.0066667+00:00

    Hi @Emre Deveci ,
    Thanks for the question and using MS Q&A platform.
    It appears that your Node.js application is encountering issues when deployed on Azure App Service, although it functions correctly on localhost and Google Cloud.

    • Ensure your web.config file is configured properly. If removing the web.config file allows part of the page to load, review its contents to ensure it is correctly set up for your application. Azure App Service requires this file for handling requests appropriately.
    • Verify that your application is listening on the port specified by the PORT environment variable. This should be configured in your startup script (e.g., bin/www) in your Express app.
    • Test your application locally in production mode to ensure it behaves as expected. Azure runs Node.js apps in production mode, which may impact how packages are loaded or static files are served.
    • Access the log stream in Azure to identify any errors that might provide insight into the deployment issues.
    • If using FTP or ZIP deployment, ensure the deployment is set up correctly and all necessary files are included.
    • Add the setting SCM_DO_BUILD_DURING_DEPLOYMENT with the value true in the Application Settings of your Azure App Service. This enables build automation, which can assist in generating the web.config file correctly.
    • Confirm that all dependencies listed in your package.json are installed correctly in Azure. Environmental differences can sometimes cause issues with package loading.

    Let me know if you have any assistances.
    If the answer is helpful, please click Accept Answer and kindly upvote it so that other people who faces similar issue may get benefitted from it.
    References:


1 additional answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 71,506 Reputation points
    2025-02-04T23:47:36.3333333+00:00

    it appears fs.readdir() is return results for an empty dir. on the azure site, check the permission of the files folder, and that it has actual files.

    also you using windows or linux for hosting?


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.