Question

How to set up reverse proxy with nginx to host express js app in subpath

Hello.

I want to host an express js app at http://my_public_vps_ip/ecapp/.

The source code of the app is at https://github.com/kaloraat/react-node-ecommerce/tree/master/final-code-with-improvments/ecommerce-front

Here are my configs:

server.js

const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();

app.use(compression());
app.use(express.static(path.join(__dirname, 'build')));

app.use('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`App is running on port ${PORT}`);
});

Routes.js

const Routes = () => {
    return (
        <BrowserRouter basename='/ecapp'>
            <Switch>
                <Route path="/" exact component={Home} />
                ...
            </Switch>
        </BrowserRouter>
    );
};

I tried setting basename to /ecapp here.

nginx config:

server {
    listen       80;
    server_name  184.168.120.55;
    
    location /ecommerce/api/ { # node js backend
    	proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location /ecapp/ { # this is the front-end app
    	proxy_pass      http://127.0.0.1:3000/;
    }
}

My front end app loads correctly at http://my_public_vps_ip/ when location is set to root as follows:

location / { # this is the front-end app
    	proxy_pass      http://127.0.0.1:3000/;
}

But if location is set to /ecapp/ and I try to access the front-end app via http://my_public_vps_ip/ecapp/ I get the following errors in console:

GET http://my_public_vps_ip/static/js/bundle.js
GET http://my_public_vps_ip/static/js/main.chunk.js
GET http://my_public_vps_ip/static/js/0.chunk.js
Loading failed for the <script> with source “http://my_public_vps_ip/static/js/bundle.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_public_vps_ip/static/js/0.chunk.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_public_vps_ip/static/js/main.chunk.js”. ecapp:30:1

I want to load the front-end app at http://my_public_vps_ip/ecapp/.

Thanks.

Subscribe
Share

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

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.

Hello,

I would recommend updating your proxy rules to:

location /ecapp {
        rewrite ^/ecapp/(.*)$ /$1 break;

        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://localhost:3000;
}

Let me know how it goes! Best, Bobby