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.
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.
Click below to sign up and get $100 of credit to try our products over 60 days!
Hello,
I would recommend updating your proxy rules to:
Let me know how it goes! Best, Bobby