title: HTTP requests from React not reaching Express backend on production server
body: <p>I have a React frontend (made with create-react-app) and an Express backend, with a remote MySQL database. Everything works fine when I run both locally, serving the frontend on <code>localhost:3000</code> and proxying http requests to <code>localhost:3306</code>, which is also the port that the Express app listens on. Requests are made to <code>localhost:3000/api/endpoint</code>, and again this works.</p>
  
  <p>I'm now trying to move this setup over to production on my server. I'm using a shared server and Node is configured through Cpanel (although I do have SSH access). I'm not "running" the React side on the server the way I would in development, but rather have created build files and placed them in the directory corresponding to my domain homepage. </p>
  
  <p>Let's say my domain is foo.com. I've been advised by my hosting company to run Node on port 50000 (as when I had tried 3306 it said it was already in use). Currently, every request to my API seems to result in a 404: it is attempting to query <code>foo.com/api/endpoint</code> and failing. My question is: how do I properly direct these requests to my backend? I know that the <code>proxy</code> option in React package.json isn't really meant to be used in production, so what should I use instead, and what should it be set to? Is there anything else I should expect to have to configure on the server?</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>Ok, I'm now trying to bypass Cpanel's Node manager and run things manually. My document structure on the server is like this:</p>
  
  <pre><code>/home/user
  |--- /project
  |   |--- /backend
  |       |--- (Node server.js, etc.)
  |   |--- /client
  |       |--- (React src, components, etc.)
  |--- /public_html
      |--- (React build files)
      |--- .htaccess
  </code></pre>
  
  <p>I believe the React build files need to be in <code>public_html</code> for the server to render them on my homepage. Hence, I am currently <strong>NOT</strong> serving the build files from my backend (although @MattCarlotta has suggested that I do this below; I am open to doing this if it seems necessary. The React app itself seems to run ok live at 3ecologies-seedbank.com; but perhaps I also need to tell the Node server about the <code>public_html</code> location?). </p>
  
  <p>Other resources have led me to think that part of the answer lies with the <code>.htaccess</code> file. Mine currently looks like this (including some Cpanel-generated code):</p>
  
  <pre><code># php -- BEGIN cPanel-generated handler, do not edit
  # Set the “ea-php56” package as the default “PHP” programming language.
  &lt;IfModule mime_module&gt;
    AddHandler application/x-httpd-ea-php56 .php .php5 .phtml
  &lt;/IfModule&gt;
  # php -- END cPanel-generated handler, do not edit
  
  RewriteEngine On
  RewriteRule ^/public_html$ http://127.0.0.1:50000/ [P,L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^/public_html/(.*)$ http://127.0.0.1:50000/$1 [P,L]
  </code></pre>
  
  <p>My rough understanding of what this should do is redirect requests from the pages at <code>public_html</code> to my Node app, which is listening on port <code>50000</code>. This makes sense to me because when I run both the back and front locally, I need to proxy requests from <code>localhost:3000</code> (front) to <code>localhost:3306</code> (back). </p>
  
  <p>I have started the Node app over SSH, with a simple <code>node server.js</code>. It is able to confirm that it is listening on port <code>50000</code> and connects to the database. However, every request made to the API from the front-end still results in a <code>404</code>. It seems to still not be reaching the back-end.</p>
  
  <p>If it helps, I'm on a shared server with Apache 2.4.41 and Cpanel 82.0 (build 17).</p>
  
  <hr>
  
  <p><strong>TL;DR</strong>
  What is the production equivalent of setting a <code>proxy</code> in React to send requests to a Node backend?</p>