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


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

The source code of the app is at

Here are my configs:


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

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}`);


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

I tried setting basename to /ecapp here.

nginx config:

server {
    listen       80;
    location /ecommerce/api/ { # node js backend
    location /ecapp/ { # this is the front-end app

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

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/.



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.


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