Question

Configure nginx for nodejs backend and React frontend app

Posted August 16, 2019 12.8k views
Nginx Node.js Ubuntu 18.04 React

I want to configure nginx to serve static React files, and listen for requests on “mywebsite.com/graphql”, but I am not exactly sure how to do that. Any help is appreciated!

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,

You could try adding something like this to your Nginx server block:

location / {
    # This would be the directory where your React app's static files are stored at
    root /var/www/html/;
    try_files $uri /index.html;
}

Then, for the Node server you would keep what you have but put it at a different path, like so:

location /graphql {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://localhost:5000/;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

With the above you would basically proxies your traffic for /graphql to your Node server on port 5000 and also you would serve your static contents of /var/www/html for your mywebsite.com.

As always make sure to backup your config before making the changes and also run a Nginx config test before restarting Nginx:

nginx -t

If you get Syntax OK then you should be OK to restart Nginx:

systemctl restart nginx

Hope that this helps!
Regards,
Bobby

Submit an Answer