MERN Stack on a LAMP Droplet (DigitalOcean) - reactjs

Question

I have a MERN application split into:
1. client folder : Front-End code (REACT app)
2. server folder : API Code (Express, NodeJs)
For some reason, front-end calls the /api part of the app, but does not return a response. Is the issue in Apache2 setup? or something in the react app. And how is the link usually done between ExpressJs (Backend) and the ReactJs (Frontend).
Routing is setup through an Apache2 Reverse Proxy
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/example.com/
Options -Indexes
ProxyRequests on
ProxyPass /api https://example.com:3000/
ProxyPassReverse /api https://example:3000/
ProxyPass / https://example.com:7000/
ProxyPassReverse / https://example:7000/
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>
Just to clarify in picture of what I'm trying to achieve:

Answer 1

I think the issue is that you've forgotten to prepare your React App for production. You spent all the time developing it and using react-scripts-start or something similar. When you are done developing you have to run react-scripts-build so that your code can be transpiled into something the browser can read. Web browsers don't read things like import and require.
Here's info on preparing for production (it's very simple)
https://create-react-app.dev/docs/production-build
And here's info on how to integrate it with your back end:
https://create-react-app.dev/docs/deployment#other-solutions
Essentially:
In your client folder run
npm build
In your server.js add
app.use(express.static(__dirname + '/build')
Now a client requests your index.html from your back end server and it serves your react app. Added benefit: no more CORS errors. Any work-around you did for CORS you should probably take it out.