Question

React app not loading upon NGINX proxy pass.

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

Subscribe
Share

Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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.

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