Nginx, NodeJs, Express; CSS not found - css

From the research I've done I can see you need to edit a file in nginx and change a location so static files can be served but I don't quite understand how to do this so my css cannot be found, I got the file open and it looks like this:
Nginx config file.
I don't really know what to do from here as the other similar questions seem to have very specific or complicated answers.
My html to link the css:
<link rel="stylesheet" href="/css/index.css">
my node server:
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(__dirname + '/static'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/templates/index.html'));
});
app.listen(8080);
My folder layout:
folder layout

I had a similar issue and I just resolved it by restructuring my folders.
Check the path in the error you see via dev tools and see if it matches your folder structure.
Another resolve might be in your nginx configuration. I added
include /etc/nginx/mime.types;
in the server directive block, though the folder restructure is what fixed my problem.

Not sure if this applies to every situation, however:
When using an ubuntu server to host a nodejs / express website, nginx isn't needed at all. Simply make the express server run on port 80, the web traffic port, disable ufw firewall to allow all traffic, set up cloudfare or any other ssl that allows http and https to act as a new firewall. Once the server is running on port 80 and your domain is set up correctly with the right nameservers etc, it should all be working an then optionally you can use pm2 to host mutliple things or still have access to server while website is running.

Related

Nginx Reversed Proxy Requesting Files Above Proxied Folder

I am using NGINX Proxy Manager with a Custom Location "/setup" which redirects to a reolink IP camera on ip address 192.168.1.50.
The problem is when I open a browser and connect to the target hostname i.e.
http://somedomain.com/setup
What happens, is the reolink camera host attempts to serve javascript, css etc files from itself, at the level above /setup, i.e. the root of the host and these files of course don't exist there.
For example (there are lots of files, this is just one) the host is trying to get it's css files from here:
https://somedomain.com/css/glDatePicker.default.css?timeVersion=1603795049091
When in fact it should be getting them from here: https://somedomain.com/setup/css/glDatePicker.default.css?timeVersion=1603795049091
Any suggestion on how this can be resolved ?
One way you could resolve this is by bundling everything into one HTML file. You can use a tool like webpack to do this, but webpack certainly isn't the only one. Here is another SO question about how to do this with webpack. Honestly just googling "bundle html, css, and js into one file" will bring up some good results too.

How to setup nginx.conf on IBM bluemix cloud foundry for single page application routing and how to set url rewrite to support spa routes?

I am using React single page app for my application. I have hosted solution on IBM Bluemix using cloud foundry. I want 2 help.
How to override existing nginx configuration with new one to support URL rewrite for my react routes?
What are the url rewrites configuration for nginx server? (I am using nginx for the firs time)
Here is my manifest.yml which I have used to host on cloud foundry. I am using staticfile-buildpack for node.js.
applications:
- buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
name: xyz
memory: 128M
stack: cflinuxfs2
path: build/
routes:
- route: xyz.eu-gb.mybluemix.net/
- route: xyz.eu-gb.mybluemix.net/store
- route: xyz.eu-gb.mybluemix.net/checkout
Here xyz is my app domain. I am able to load my app and pass through click action to other routes but when I hard refresh or change url from browser address bar it shows me 404 error.
Can someone please guide me here to resolve above issue.
Thanks.
How to override existing nginx configuration with new one to support URL rewrite for my react routes?
You can override the nginx.conf, but it's not recommended with the staticfile buildpack. Instead, try to use the configuration options provided by the buildpack to achieve your goal. The buildpack has a lot of common options, so you don't need to drop down to the level of configuring Nginx yourself.
https://docs.cloudfoundry.org/buildpacks/staticfile/index.html#config-options
Here xyz is my app domain. I am able to load my app and pass through click action to other routes but when I hard refresh or change url from browser address bar it shows me 404 error.
It sounds like you need to enable pushstate support. Adding pushstate: enabled to your Staticfile I think that should fix your issue.
What are the url rewrites configuration for nginx server? (I am using nginx for the firs time)
You can look at the Nginx configuration that's generated for your app. Once your push your app and it starts, run cf ssh <app-name> -c "cat app/nginx/conf/nginx.conf". That should dump the nginx config to your screen.
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
Don't point to the master branch of any buildpack. It's a moving target. Commit to commit can change or even break.
You should generally use the buildpack that's provided by your operator. If you run cf buildpacks you can see the list there. If that's not new enough or your provider doesn't include a buildpack you need, you can use the git repo syntax to link to a repo online, however make sure you include the #<branch|tag> in your URL.
Ex: https://github.com/cloudfoundry/staticfile-buildpack.git#v1.4.29
This locks in the buildpack to a tagged release which prevents it from changing out from under you.

Configure nginx to serve manifest.json

How should nginx be configured in order to serve a manifest.json from the root folder of my app?
I have added an entry in mime.types:
application/x-web-app-manifest+json webapp;
and since I use json I have added a location entry in my sites-enabled configuration:
location /manifest.json {
default_type application/x-web-app-manifest+json;
}
but my manifest.json is still not served correctly.
any idea what did I miss or what should I configure differently?
Well actually my configuration above is correct, my problem was the cache on my phone ;)
Since I already had accessed my PWA before making the corrections in my nginx, my manifest.json was cached with a bad content
Clearing the Google Chrome cache on my Android phone and trying again, of course after having applied my configuration and restarted nginx solve my issue
I use nginx as part of a progressive web app and I have not changed the configuration of the server at all for the manifest file.
The requirement fro deploying it (from MDN among others) is to refer to the manifest file in your html head like this:
<link rel="manifest" href="manifest.json">
Is there some more information you can share about your problem?

Multiple Meteor sites behind Nginx

This question is related to this SO question, but the recommended solution in the comments to use Meteor.absoluteUrl() doesn't seem to be working as expected. I want to be able to deploy multiple meteor applications to the same server and use nginx as a reverse proxy to each application.
Because each application is segregated none of the applications are going to be accessible from the ROOT_URL, but Meteor is only using the ROOT_URL to reference back for the assets it needs to load a meteor app.
I tried appending to the address using Meteor.absoluteUrl() in the server's startup, the client's startup function, and outside of the client's startup function. It had no affect in any of these places.
For example. I have nginx listening at /site1 for server_name: example.com and a reverse proxy to port 3001 to my meteor application.
When going to the site it initially loads fine but the browser dev tool shows Meteor is trying to find the javascript and css files at https://example.com when it should be looking from a base url of https://example.com/site1
Meteor.absoluteUrl("site1",{ssl:true}) was set in Meteor.startup() to try and force that as the correct path. As you can see, I am only appending to ROOT_URL with no leading / as described in the Meteor documentation.
I'm using meteor up to deploy and here's how the mup.json environment settings look:
"env": {
"ROOT_URL": "https://example.com",
"PORT": 3001,
"MONGO_URL": "mongodb://user:password#localhost:27017/db"
}
Any clarification about this this should work is greatly appreciated.
Using sub-domains suggested by apendua seems to be the easiest way to accommodate multiple Meteor applications on the same server behind nginx (if you that option available to you).
Register a sub-domain for each application (i.e. app1.domain.com, app2.domain.com, etc.)
Add an nginx server configuration for each sub-domain, setting the server_name property to your sub-domain address.
Add a default location for that server and set your proxy_pass to http://127.0.0.1:port where port is the port number you set in your environment configuration when you deployed your Meteor application (in my case I set this in my mup.json).
The root url for public assets under a meteor app is actually at /public. Each of your apps has a different base directory for the app. Assuming that you have an overall structure that looks like:
app1/ - nginx maps to https://example1.com/
client/
lib/
public/
server/
app2/ - nginx maps to https://example2.com/
client/
lib/
public/
server/
etc...
Then each app's public assets will just be under Meteor.absoluteUrl() which will serve files from app/public. Meteor.absoluteUrl()+"app1" has no meaning.

How can I setup default directives for all servers in nginx? (Issues with Plesk)

I have a DV 4.0 server on media temple which is setup with nginx as a reverse proxy to apache. I want to configure some far future expires headers (using location blocks) and other settings for my (multiple) domains running through nginx.
Normally this wouldn't be an issue, just create a common set of rules and include them in a server {} block. However, Plesk creates and updates the server {} blocks automatically in separate files, meaning any changes made in these files are wiped out.
Ideally I'd like a way to set up a generic server {} block that gets applied all servers as defaults, but if this doesn't exist I'd like to know how to add custom directives within Plesk so they don't get wiped out when it rewrites the files.
Check this page
Yoг can customize default nginx virtual hosting template:
mkdir /usr/local/psa/admin/conf/templates/custom/domain
cp /usr/local/psa/admin/conf/templates/default/domain/nginxDomainVirtualHost.php /usr/local/psa/admin/conf/templates/custom/domain/
add or change what you need in /usr/local/psa/admin/conf/templates/custom/domain/nginxDomainVirtualHost.php
/usr/local/psa/admin/bin/httpdmng --reconfigure-all # to apply new configuration for all domains

Resources