Azure web app returns 404 (not found)

Question

I wrote an angular app, then I have added a node.js server file to include a basic server side.

In my local folder the app works - the server returns the index.html file and let angular take over from there.

My problem is trying to deploy to azure: I created an app service and used git to commit all my files. When I try to access the site I get a "Not Found" message.

Here are all the relevant details:

The git push output:

$ git push azure master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 290 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: ........................................
remote: Updating submodules.
remote: Preparing deployment for commit id '078f9ff036'.
remote: Generating deployment script.
remote: Running deployment command...
remote: Handling node.js deployment.
remote: .............................
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Copying file: 'server.js'
remote: Using start-up script server.js from package.json.
remote: Generated web.config.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8
remote: ..
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://soundofsilence.scm.azurewebsites.net:443/soundOfSilence.git
   9b261b6..078f9ff  master -> master

The server log:

Error: ENOENT: no such file or directory, stat 'D:\home\site\wwwroot\dist\index.html' at Error (native)

My server.js code:

console.log('Server running');

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

// Get our API routes
const api = require('./src/server/routes/api');

const app = express();
var cors = require('cors');
app.use(cors());
//bring in model
let Report = require('./src/server/models/selfReport');

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Point static path to dist
app.use(express.static(path.join(__dirname, '../dist')));
// app.use(express.static(static_dir));
// Set our api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../dist/index.html'));
});



app.post('/add', function (req, res) {
    console.log('submmiting report');
    console.log(req.body);
    res.end("Good");
    return;
})

/**
 * Get port from environment and store in Express.
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

my packages.json file:

{
  "name": "sound-of-silence-app",
  "version": "0.0.0",
  "license": "MIT",
  "main": "app.js",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.5",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-timer": "^1.3.5",
    "angular2-focus": "^1.1.0",
    "body-parser": "^1.17.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "cors": "^2.8.3",
    "express": "^4.15.3",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.10.8",
    "ngx-bootstrap": "^1.6.6",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

and my file structure:

I would appreciate any help

In this line: res.sendFile(path.join(__dirname, '../dist/index.html')) of the server.js script, try removing the .. precursing it. Its in the same Directory — Daniel Copley
@DanielCopley I still get the same error. I tried to look up the Azure folder structure and I don't have a dist folder in it, I think that may be the problem — Belgi
Ok, so you set a static path prior, do you still need to specify /dist in front? Could you just have index? — Daniel Copley

Gary Liu Gary Liu · Accepted Answer · 2017-06-26T01:52:08

From your last capture, is seems that your dist folder locates in the root directory in your project.

Please modify your code snippet as:

...
app.use(express.static(path.join(__dirname, './dist')));
...
app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, './dist/index.html'));
});
...

As the main script server.js is in the same path with dist folder, ../ will find to the parent directory.

Also, please double check whether the dist folder and the files inside are deployed successfully to Azure Web Apps.

If the files in dist folder are compiled or generated, there are some additional steps we need to configured via Custom Deployment Script.

Hope it helps you, any concern, feel free to let me know.

Azure web app returns 404 (not found)

1 Answers