Question

Why does nginx return 404 not found from mean server when loading assets?

I have an nginx reverse proxy that cannot get assets from upstream mean stack server. It’s a single page app that is very small. The index file will load just fine but all assets respond with 404 not found. It works locally when I have <base href="/"> but that does not work through the proxy. The request uri is simply

mydomain.com/myApp

and the folder structure looks like:

/myApp --------->/app --------->/public -------------->/views -------------->/css -------------->/js

nginx config:

   1  server {
   2     listen 80;
   3 
   4     server_name mydomain.com;
   5 
   6     location /myApp {
   7         proxy_pass http://mean-stack-ip:8080;
   8         proxy_http_version 1.1;
   9         proxy_set_header Upgrade $http_upgrade;
  10         proxy_set_header Connection 'upgrade';
  11         proxy_set_header Host $host;
  12         proxy_cache_bypass $http_upgrade;
  13     }
  14 }

server.js:

   1 // server.js
   2 
   3 // modules =================================================
   4 var express        = require('express');
   5 var app            = express();
   6 var bodyParser     = require('body-parser');
   7 var methodOverride = require('method-override');
   8 
   9 // set our port
  10 var port = process.env.PORT || 8080;
  11 
  12 // get all data/stuff of the body (POST) parameters
  13 // parse application/json 
  14 app.use(bodyParser.json());
  15 
  16 // parse application/vnd.api+json as json
  17 app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
  18 
  19 // parse application/x-www-form-urlencoded
  20 app.use(bodyParser.urlencoded({ extended: true }));
  21 
  22 // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
  23 app.use(methodOverride('X-HTTP-Method-Override'));
  24 
  25 // set the static files location /public/img will be /img for users
  26 app.use(express.static(__dirname + '/public'));
  27 
  28 // routes
  29 require('./app/routes')(app); // configure our routes
  30 
  31 // startup our app at http://localhost:8080
  32 app.listen(port);
  33 
  34 // shoutout to the user                     
  35 console.log('Server listening on port ' + port + ' ...');
  36 
  37 // expose app
  38 exports = module.exports = app;

app/routes.js:

   1 // app/routes.js
   2 
   3 module.exports = function(app) {
   4 
   5     // route to handle all angular requests
   6     app.get('/myApp', function(req, res) {
   7         res.sendfile('./public/views/index.html');
   8     });
   9 
  10 };

index.html:

   1 <!doctype html>
   2 <html lang="en">
   3 
   4 <head>
   5     <meta charset="UTF-8">
   6     <base href="/myApp/">
   7     <meta name="viewport" content="width=device-width, initial-scale=1">
   8 
   9     <title>My App</title>
  10     
  11     <!-- CSS -->
  12     <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
  13     <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
  14     <link rel="stylesheet" href="css/style.css">
  15 
  16     <!-- JS -->
  17     <script src="libs/jquery/dist/jquery.min.js"></script>
  18     <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
  19     <script src="libs/angular/angular.min.js"></script>
  20     <script src="libs/angular-route/angular-route.min.js"></script>
  21 
  22     <!-- ANGULAR -->
  23     <script src="js/controllers/mainController.js"></script>
  24     <script src="js/appRoutes.js"></script>
  25     <script src="js/app.js"></script>
  26 </head>
  27 
  28 <body ng-app="myApp" ng-controller="mainController as main">
  29     <div id="body-container" class="container-fluid">
  30         
  31         <!-- Angular dynamic content -->
  32         <div ng-view></div>
  33 
  34     </div>
  35 </body>
  36 
  37 </html>

I’m new to mean stack and brand new to nginx so any help will be greatly appreciated. I’m essentially blocked from building anything further because I can’t serve my apps!

Thanks in advance, Amr

Show comments

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

@gabrieldev, yes that is the full nginx config.

Is this your full nginx config for this site?

anyone find answer to this