Hosting a node.js application in a subdirectory on a lemp droplet - Express static files pointing to domain root instead of app root
I am currently trying to setup some node.js applications on a LEMP server. The scenario is as follows:
www.mydomain.com serves up the standard websites using PHP/MySQL
e.g. www.mydomain.com/site1, www.mydomain.com/site2, ... etc.
node.mydomain.com will serve up all my little node apps.
e.g. node.mydomain.com/app2, node.mydomain.com/app3, ... etc.
But it looks like the Express static folder (/public) is not getting setup properly.
node.mydomain.com/app2/styles.css or node.mydomain.com/app2/bundle.js are not browsable. Also, it looks like webpack is either not bundling correctly, my express routes aren't setup properly, my nginx server blocks are not configured right, OR running node apps in subdirectories are a pain.
When I browse to the index page, the static files are pointing to ```node.mydomain.com/styles.css``` instead of ```node.mydomain.com/app2/styles.css```.
It all works fine on my localhost. All Express routes including static are fine. But when I deploy to the subdir, npm install, build wepback, then start the server, I get the above problems.
Here are some relevant code snippets (Node Express React app):
My Express route to the static files
```
app.use(express.static(path.join(__dirname, '..', '/public')));
```
Sample link in index.html
```
<link rel="stylesheet" href="styles.css" />
```
Express Listen
```
const port = process.env.PORT || 3000;
app.listen(port, function () {
console.log(`Your server, listening on port ${port}`);
console.log(`Browse to http://localhost:${port} to view your app`);
});
```
Server Block Directives
```
location /app2 {
proxy_pass http://localhost:3000;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
}
```
Webpack Config File
```
module.exports = {
entry: './app.js', // assumes your entry point is the app.js in the root of your project folder
output: {
path: __dirname,
publicPath: '/app2/',
filename: './public/bundle.js' // assumes your bundle.js will also be in the root of your /public folder
},
devtool: 'source-map',
resolve: {
//extensions: ['', '.js', '.jsx'] //removed '', to fix wpack config error
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['react', 'es2015'] // if you aren't using 'babel-preset-es2015', then omit the 'es2015'
}
},
// use the style-loader/css-loader/sass-loader combos for anything matching the .scss extension
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
};
```
I am new to deploying node.js apps and have been googling for some insights but have yet to find something that will work. Setting a baseurl doesn't seem to be an option unless using create-react-app (which I am not). I am also not sure if this is an issue of webpack not bundling correctly or only bundling with root as the only option etc. So I am still not sure what to do.
If anyone has any thoughts or experience with this, any insights would be much appreciated.
If all else fails I may change my nginx/url setup slightly to just serve the apps up at:
app2.mydomain.com
app3.mydomain.com
...
etc.
Instead of:
node.mydomain.com/app2
node.mydomain.com/app3
Thanks!
Is it possible that location gets automatically appended to the proxy_pass