So i have a React application , and a NodeJS (Express) Application running on port 4000.
i created the build for the react app and deployed it along with the backend on Apache.
The react app works fine , but the Frontend calls for the Node API dont seem to work , here's my Apache config:
<VirtualHost *:80 >
ServerName example.com
DocumentRoot /var/www/html
<Directory /var/www/html >
Options -Indexes +FollowSymLinks
AllowOverride None
Require all granted
</Directory>
</VirtualHost>
The front end doesnt seem to reach the backend am i missing something in the config ?
By the way in the front end i use Axios as a http client to make requests to the backend with its URL http://localhost:4000/ , and the app works fine in my local machine.
Thanks in advance!
Related
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:
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.
In react you can transfer static files in the build folder to cpanel, direct admin or other shared server.
What is the solution for nextjs?
without using the nodejs and install it on the server
If your application does not generate dynamic pages at runtime you can use nextjs export static which will generate static HTML for you and then you could deploy on cpanel
I found the way myself.
On a dedicated server, as long as you are connected to the server using Putty, you can load the site by creating a virtual host. by example
<VirtualHost *:80>
ServerName digiattar.com
ServerAlias www.digiattar.com
ProxyRequests Off
ProxyPreserveHost On
ProxyVia Full
<Proxy *>
Require all granted
</Proxy>
ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/
</VirtualHost>
If you enter the domain address in the browser, the server points to the localhost address and port 8080, on which Nextjs is running.
After completing the steps, you can go to the root of your project and run Nextjs as like it is on your computer using the command npm run dev or next start or etc
but after close putty everything expire, using pm2 for this problem
Lets assume I have project on .NET and is required to develop frontend for some additional module on ReactJS. According to requirements, I can login only on backend side (it has it's own UI) and frontend on React should be a standalone application. I can authorize on frontend side with backend API by passing cookies (that I get after login on backend) in Header.
I have placed source code to /var/www/project so there is such structure:
/var/www/project/backend - .NET serves to 127.0.0.1:5000
/var/www/project/frontend - I have generated a static build from ReactJS to /var/www/project/frontend/index.html
My Apache configuration:
<VirtualHost *:80>
ServerName project.com
ProxyPass / http://127.0.0.1:5000/
ProxyPassReverse / http://127.0.0.1:5000/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
<VirtualHost *:80>
ServerName subdomain.project.com
DocumentRoot /var/www/project/frontend/
<Directory "/">
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Backend works and I can access it at project.com. Frontend works also on subdomain.project.com. But I need backend to path cookie (e.g. http://prntscr.com/lgfikx) to frontend (where currently is http://prntscr.com/lgfjlx)
I have tried ProxyPassReverseCookiePath, ProxyPassReverseCookieDomain, Set-Cookie, but failed. Probably I have just used it wrong, but I have not found anywhere a working example. Answers on similar questions have not worked for me.
My final goal is to authorize frontend so I could talk to backend API. Can somebody tell me the best or just any working solution of how to do it?
If you can see the correct cookie in the WebDev tools, it's most likely that you set the cookie to HttpOnly and didn't make it available to JavaScript in the first place.
If your backend is aware of the domain name used (the cookies it sets should say .project.com in the Domain column of your web developer tools and not 127.0.0.1 or localhost), your frontend app should be able to access the cookies as well.
You only need the ProxyPassReverseCookieDomain if your backend server is using a different domain name than the one the reverse proxy uses. (i.e.: backend lives at domain.com, but you're accessing it through a reverse proxy at project.com)
I want to build a React powered app that uses a self hosted instance of Cockpit to fetch data and host both on an Apache server.
I'm familiar with installing Cockpit to the default DocumentRoot, but I'm not sure where to put the frontend files. I don't want to just messily dump them in the same folder, since there'd probably be also conflicts with Cockpit files.
How can I seperate both apps in a clean way and tell Apache to serve them correctly?
After doing a bit of research with more specific keywords, I found the answer myself:
Basically you want to create folders for both app and API (i.e. Cockpit) in your DocumentRoot. Then you are able to set Virtual Hosts in your Apache configuration like this (assuming your folders are named client and server and your DocumentRoot is /var/www/html/):
<VirtualHost *:80>
DocumentRoot "/var/www/html/client"
ServerName www.example.com
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/var/www/html/server"
ServerName api.example.com
</VirtualHost>
API calls can then be made via the api.example.com subdomain.
See https://httpd.apache.org/docs/2.4/vhosts/examples.html for more examples.
I have 2 applications hosted on a single apache tomcat on port 8080
>
http://mydomain.com:8080/application1
http://mydomain.com:8080/application2
I would like to run an apache proxy in front of BOTH of them with the following behaviour
>
http://mydomain.com/* (apache2) -> http://mydomain.com:8080/application1/* (tomcat)
http://subdomain.mydomain.com/* (apache2) -> http://mydomain.com:8080/application2/* (tomcat)
The best I have got right now is 2 machines with different IPs and routing the domain and subdomains correspondingly.
Ideally I want the apache proxy and the 2 apps to be on the SAME machine...
Can anyone with kick arse DEVOps skills assist?
In addition to #Jon Lin answer, consider using ProxyPassReverse also, just in case your app do any redirects. It makes Apache correct URL's on responses (More about ProxyPassReverse). It will look like that:
<VirtualHost subdomain.mydomain.com:80>
ProxyPass / http://localhost:8080/application1/
ProxyPassReverse / http://localhost:8080/application1/
</VirtualHost>
<VirtualHost mydomain.com:80>
ProxyPass / http://localhost:8080/application1/
ProxyPassReverse / http://localhost:8080/application1/
</VirtualHost>
I hope it helps.
In the virtualhost config for mydomain.com (apache), you need
ProxyPassMatch ^/(.*)$ http://mydomain.com:8080/application1/$1
In the virtualhost config for subdomain.mydomain.com (apache), you nede
ProxyPassMatch ^/(.*)$ http://mydomain.com:8080/application2/$1
Both config files should be on the same machine, and even the same file. See VirtualHost Examples for some examples on how this is setup.