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.