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.

3 answers


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!

I had the same configuration. Instead of /graphql I am using /backend for my backend API calls. If I run with my IP/backend it is showing error like Cannot GET. Any idea how to solve it?

I have the same configuration but my /backend for my backend API calls gives CANNOT GET …if I interchange my frontend route from / to /frontend and my backend from /backend to / my backend works but my frontend gives CANNOT Get. Any idea whats wrong?

Submit an Answer