Nginx, React, Node & Let's Encrypt... How To Point Nginx At My React App

I have a React app that I need to talk to a Node server running on port 5000(via pm2) and be the root directory of my site. The Node server fetches some data from an API and return

Solution 1:

From what I understand, you're basically asking how to serve static files from a directory. In order for a React app (client-side) to call the Node backend (server-side), both need to be exposed. You should add a NGINX directive like so:

location / {
    # Set this to the directory containing your React app's index.html.
    root /var/www/;
    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 /api {
    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;
}

This proxies /api to your Node server while serving the static contents of /var/www as the root route (/).

NOTE: You might need to change your React configuration to reflect the /api addition.