nginx with expressjs are not finding the css files for my three other apps


First time using nginx.

What i have:
I have three apps running.

  1. Public app: http://localhost:8080;
  2. Admin app: http://localhost:1000;
  3. Infra app: http://localhost:3000;

What i’m trying to do:
I want each app to use its respective resources (css, js, etc).

What i’m already doing:
In each app i’m already serving their respective static files.
So i have in Public and Admin apps this respective line of code:'/css',express.static(path.resolve(__dirname, 'css')));

When accessing each app directly (using its respective door) e.g (http://localhost:8080) their respective resources are being found and used.

What is going wrong:
Wen accessing and app through the web server with the exception of the Public App (door 8080) their respective resources are not being loaded.

What i tried to do:
Set up two additional locations for the infra app, but i don’t know if this is the right course of action.

nginx config file:

worker_processes  1;

events {
    worker_connections  1024;

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name  localhost;

        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        proxy_http_version 1.1;

        # PUBLIC
        location / {
            proxy_pass http://localhost:8080;

        # ADMIN
        location /admin {
            proxy_pass http://localhost:1000;

        # INFRA
        location /api {
            proxy_pass http://localhost:3000/api;

        location /images {
            proxy_pass http://localhost:3000/images;

        location /fonts {
            proxy_pass http://localhost:3000/fonts;

        # ErrorPage
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;



Modify admin app to server the static files on /admin/css and /admin/js paths. Do the same with infra app, its static files will be served on /infra/css and /infra/js paths.

Admin App:'/admin/css',express.static(path.resolve(__dirname, 'css')));'/admin/js',express.static(path.resolve(__dirname, 'js')));

Infra App:'/infra/css',express.static(path.resolve(__dirname, 'css')));'/infra/js',express.static(path.resolve(__dirname, 'js')));

Modify the nginx file such that all paths starting with /admin will go to you admin app and all paths starting with /infra will go to infra app.

location / {
    proxy_pass http://localhost:8080/;     #note the trailing slash

location /admin/ {                         #note the trailing slash
    proxy_pass http://localhost:1000/;     #note the trailing slash

location /infra/ {                         #note the trailing slash
    proxy_pass http://localhost:3000/;     #note the trailing slash

Let’s say you’re running nginx on default port i.e. 80 http://localhost/css will now load css of public app, http://localhost/infra/css will load css of infra app and http://localhost/admin/css will load the same for admin app.

Answered By – Rahul Sharma

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published