React app not loading upon NGINX proxy pass.

Question

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

Bobby · 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

KFSys · Answer

The Uncaught SyntaxError: Unexpected token '<' error you’re encountering when trying to access your dashboard service (React app) through Nginx is likely due to the way static assets are being served by Nginx. When your React app makes requests for its JavaScript and CSS files, Nginx is probably serving the main index.html file instead of the actual assets. This is common with single-page applications (SPAs) where the server is configured to serve index.html for unknown paths. Troubleshooting and Fixing the Issue Adjust the /explorer/ Location Block The issue is likely in the /explorer/ location block. When your dashboard app requests static assets (like JavaScript or CSS files), it hits this block, which proxies the request to the React app server. But if the app server isn’t properly handling the request for these assets, Nginx might end up serving index.html (from your main app) for these asset requests. To address this, you need to ensure the dashboard React app is correctly handling requests for its assets. If you’ve got a build of your dashboard React app, ensure that the build output is correctly being served by whatever server is running on port 8080. Check the Base Path in Your Dashboard React App If your dashboard React app is indeed another SPA, it might be expecting to be served from the root path. Since you’re serving it from /explorer/, ensure that the React app is configured to use /explorer/ as its base path. This is important for routing and asset loading within the app. For Create React App, you can set the "homepage": "/explorer/" in your package.json, then rebuild the app. Inspect Network Activity Use the browser’s developer tools to inspect network activity when you load the dashboard. Look for which requests are returning the index.html file instead of the expected CSS/JS assets. This will give you a clue about which requests are being misrouted. Ensure Proper Headers Ensure that your Nginx configuration is forwarding the necessary headers to your React app. The proxy_set_header directives you have should generally be enough, but double-check if there are any additional headers required by your app. CORS Issues If your Node.js backend and React app need to communicate and are on different origins (even different ports on the same host are considered different origins), make sure you handle CORS (Cross-Origin Resource Sharing) correctly in your Node.js application. Review the Build Output of the Dashboard App Ensure that the build process of your dashboard React app is successful and the output contains all the necessary static files (JS, CSS, etc.) in their correct paths. Reload Nginx After making any changes in the Nginx configuration: sudo nginx -t sudo systemctl reload nginx

Report this

React app not loading upon NGINX proxy pass.

Troubleshooting and Fixing the Issue

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

Get our newsletter

The developer cloud

Get started for free