I have an NGINX server, a Nodejs backend, 2 react apps one is my frontend app and the other is a dashboard service. Nginx conf is set to serve my frontend react app as a static file upon build while other react app is a third party dashboard service running on port 8080 which I want to proxy pass. but the react app [dashboard service ]is not loading.

Below is my server block in Nginx conf

server {
        listen       80;
        listen       [::]:80;
        server_name  task-manager.eastus.cloudapp.azure.com;
        return 301 https://$host$request_uri;
    }

    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name  task-manager.eastus.cloudapp.azure.com;

        location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }

        # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
        ssl_certificate /etc/letsencrypt/live/task-manager.eastus.cloudapp.azure.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/task-manager.eastus.cloudapp.azure.com/privkey.pem;

        ## node js server running on port 4000

        location /api/ {

            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass "http://localhost:4000/";
        }

        ##second react app running on port 8080

        location /explorer/{
           proxy_pass "http://localhost:8080/";
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        } 
    }

The following is the error that I get on the console when I load the URL.

Uncaught SyntaxError: Unexpected token '<'

Thanks in advance

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.

×
1 answer

Hello,

Actually your reverse proxy setup looks good. Does the application load when you try to access your IP address directly on port 8080?

Regards,
Bobby

Submit an Answer