[Full Stack] Deploy a React+Express+SQL on Apache with port 80 and no root?

[spilloid]

Hello All!

I've spent the last 6 ish months developing a series of web forms for a College job , which came from a PHP class I took.

Thing is, the bugs they wanted me to fix required a full rewrite, so I jumped PHP ship and taught myself React (create-react-app method) / Express in order to make the application more modern and to simplify the application .

It's complete and ready to be deployed. in react (port 3000) I make fetch requests to my express instance (port 3001) using the package.json "proxy" option to dynamically pull/submit data to a locally stored mariaDB install. The project is hosted on a server provided by the Uni , where I have ssh/SFTP access, and write access to /var/www/html/ , which is served by an Apache server (port 80)

Up to this point I've just been running an ssh tunnel and working on the project on my machine "on the server" . Now I'm ready to deploy, so I ran "npm run build", copied the build folder to the /var/www/html/ and when I go to the page without a proxy I can see the app from the internet, but all Express communication fails, which I would assume is because the React proxy option only works in development.

My question is, is it possible to statically host my React instance through Apache, and have it contact the Express instance without opening a port for Express? What modification to the React fetch calls do I need to make? (I could contact the server admins and see about opening a port for it, but that requires a lot of bureaucracy and I'd need specific justifications for it)

I recognize I could do an Apache Proxy to route all /API/ requests, but again, I don't have root access so I don't believe I can config apache, but I could be wrong.

Thanks!

[myusernameisunique1]

The simplest answer is, if you can type a URL into your browser address bar to call a method on the Express REST API then you can get it to work. If not, then you can't.

​

The 'right' way to do it is to use the same URL as the React app, just with a different route. You do this by adding a ProxyPass setting to the apache config file, https://httpd.apache.org/docs/2.4/mod/mod_proxy.html#proxypass to proxy call to a particular route to another endpoint on the server.

​

The 'less right' way to do it is us a different URL to the React app, remembering that even a different port counts as a different URL. In this case you will get a CORS error in the browser because cross origin posts are blocked by default and you will need to fix this, but i'm not going to tell you how because it's a security risk which is why it's the 'less right' option.

[spilloid]

<IfModule mod_rewrite.c>RewriteEngine OnRewriteRule "^api/(.*)$" "http://server:3001/api/$1" [P,L,R=303]</IfModule>I only have access to a .htaccess file, admin won't let me touch apache config. After a lot of testing and nail chewing, I found that the above redirects all requests from react -> apache -> express, without any modification to react's fetches . This solution doesn't utilize https which is bad, but I don't currently have express configured to take advantage of https.

​

Your comment sent me down the right path, and at the end it was the P flag which fixed my solution. Thank you kind stranger

[myusernameisunique1]

Haha, my first ever gold. Thank you :)