By amrtgaber
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
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
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!
Answered on stack overflow here: You could try proxying all requests instead of just /myApp.
Just had to change the nginx config to this:
1 server {
2 listen 80;
3
4 server_name mydomain.com;
5
6 location / {
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 }
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.