Share via

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

Emre Deveci 0 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,243 questions

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.