Node.js and Apache for single domain same server - node.js

I built a RESTful website, and it is written in Angular2(front end) and Php(backend). Since I am using Angular Universal, I need Node.js to pre-process the Angular scripts. How can I configure my server to host both Node.js and Apache? I searched online, but can't find any resources related to "sharing Node.js and Apache on SINGLE domain"...
How to configure my Apache to route "everthing" to the /dist/ folder (and served by Node.js) except for the URI that are prefix with /api/ and /uploads/ (route to the /php/ folder).
[Back-end] Api Php script:
If www.example.com/api/?...?, then use this script /var/www/example.com/public_html/php/api.php to process it.
Uploaded images:
If asking for uploaded img files (www.example.com/uploads/[img*.png]), then try to look inside this /var/www/example.com/public_html/php/uploads/[img*.png] folder.
[Front-end] Html, Js, etc...:
Everyting www.example.com (except the /api/ and /uploads/), then ask Node.js to run it from this /var/www/example.com/public_html/dist/ folder.
I guess it is related to proxy and proxy_http, but I don't know how to configure it since I can't find any resources related to sharing both systems for single domain...

i think you should Run Node.js on a different port (e.g 8080) and use Reverse proxy in Apache config (virtual hosts) like this:
ProxyPass /api http://www.example.com/php/
ProxyPassReverse /api http://www.example.com/php/
ProxyPass /uploads http://www.example.com/php/uploads/
ProxyPassReverse /uploads http://www.example.com/php/uploads/
ProxyPass / http://www.example.com:8080/dist/
ProxyPassReverse / http://www.example.com:8080/dist/
and then use htaccess rewrite rules for your uploads and api
you can read more about mod_proxy

Related

Solved: Able to read nodejs source code by directly accessing website.com/index.js

Unless after every git push I chmod the index.js file to 771, the source code, index.js, is provided to the browser as plaintext when accessed through url. The public folder set to static works, but this file and other folders in the directory, such as sessions, are still accessible. I have tried .htaccess because I am using shared hosting with apache. I feel like it is missing something simple.
And Nelles was correct, I was serving directly from the server folder, and had the .htaccess in the wrong place.
Directory:
app
--node_modules
--public
--sessions
--views
index.js
package.json
.htaccess
NodeJS has to run as a server ideally through a port number which you delegate. You may be making the mistake of trying to serve the files up with a direct path to a public folder.
You can put this in your .htaccess or apache conf file. The following is if you want to have NodeJS listen on port 5000 but serve on /server
ProxyPreserveHost On
ProxyRequests Off
ProxyPass /server http://localhost:5000
ProxyPassReverse /server http://localhost:5000

How to properly launch Angular Universal to live server

I have my website setup and working by modifying the universal-starter seed found here: https://github.com/angular/universal-starter and I have got my site working (rendering HTML) on the localhost node server, now I have a SSH connection and node installed, now I am here:
And I am not sure where I put my /dist files etc and then start the nodejs server.
NodeJS/npm installed shown here:
Edit (3/23/21): Something to be aware of when using Universal
You really need to consider writing blocks of code specifically for the Browser or for the Server. For example:
You might use an external SAAS solution (like SharpSpring or Google Tag Manager) to help your team track leads and generate automatic workflows.
Some of these services require you to write objects to either the window or document objects. Because your server isn't running javascript, there isn't a way to get these objects to behave like they would natively when running your application on the server. You will need to really mess around with these things.
A really helpful article I found was this demo of real app problems using Angular Universal.
You will also need to dynamically append imported scripts to your index.html header. I have seen this same concept a couple of different places, but here is one as well. There might be a stack overflow answer that has this same idea.
However, in some instances, you will need to use a library or something (like Postscribe) to dynamically add scripts to individual components inside of one of your html template files. Postscribe helped us drastically by allowing us to dynamically import a specific script in front of a form in one of our components. I highly recommend using Postscribe.
So, long story short, you will need to make sure you are importing scripts and appending them to your index.html file only if your application is running in the browser. Do this check for all external JS files as well that you are importing into your application and using directly. Start by injecting PLATFORM_ID into whatever component you need to make this check in, and using it that way
This applies to all kinds of things like animations (which might be listening to a window scroll event), etc.
Original post below:
#Cacoon I hope this is what you did.
This first part is an existing answer from m98 on this Github issue. Just posted here for clarity
Build your app: npm run build:ssr
Move the dist over to your server
install PM2 npm install pm2 -g
On your server, use PM2 to run the server bundled app pm2 start dist/server.js
If you're using Nginx, or other web servers, make sure to redirect requests to the port that the app started with PM2 is listening on.
UPDATE (2/7/2020)
For Apache make sure your document root is specified as your dist/browser folder like
DocumentRoot "${SRVROOT}/htdocs/dist/browser"
<Directory "${SRVROOT}/htdocs/dist/browser">
And try this in the bottom of your httpd.conf file:
<Location />
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
</Location>
<VirtualHost *:80>
ServerName localhost
ServerAlias localhost
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / http://localhost:4000/
ProxyPassReverse / http://localhost:4000/
</VirtualHost>
<VirtualHost *:443>
ServerName localhost
ServerAlias localhost
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / https://localhost:4000/
ProxyPassReverse / https://localhost:4000/
</VirtualHost>
You have to set the virtual host in the httpd.conf, and not in a .htaccess file. You can set Mod_rewrite at the same level of your index file in an .htaccess file, but you cannot set virtual host at that level.
Also, make sure you enable the modules for the proxy, like mod_proxy_express in your httpd.conf file
This is for developing locally. Change localhost to your domain when deploying to prod.
This was actually easier than it seemed, I just needed to install pm2 with npm so I could make the nodejs process constant, then use RewriteEngine settings in the .htaccess file where I wanted to my angular universal application to render (it was in a subdomain folder) and ensure the port is correct and it linked perfectly and loads html in source allowing proper SEO and indexing

How to properly map [ server.com:port ] to [ server.com/param ] for node.js app?

I'm relatively new to Node.js and have been trying to solve this problem quite some time.
So, basically I want to map my server.com/chat to server.com:9999.
Tried to accomplish this using ProxyPass and ProxyPassReverse in my apache confs but I guess node server itself is having problem serving the socket.io file with a new url.
Here are the screens
server.com:9999
server.com/chat
config file
Any help would be much appreciated!
EDIT:
New screen, problem with a handshake
In last two images, I can see you did not proxy for /socket.io route. You should proxy for /socket.io/ route as well
ProxyPass /socket.io http://server.com:9999
ProxyPassReverse /socket.io http://server.com:9999
I would like to recommend to use RewriteCond for websocket used by socket.io and you may like to have a look https://serverfault.com/questions/616370/configuring-apache-2-4-mod-proxy-wstunnel-for-socket-io-1-0/623027#623027

Apache Proxy for Node.js and Wordpress on same "Domain" but different paths

Here is the case.
I have a Wordpress website running on my main domain say http://www.example.com.
.htaccess is enabled on server and I am using Wordpress permalinks to generate pretty URLs.
Now I have another application in Node.js (Express) which I have deployed on same server and is running on port number 3000. So if I put http://www.example.com:3000 it triggers my Expressjs app. and it is running flawlessly.
What I want is to run the Node.js application on a specific path from the same domain. For example, if I hit, http://www.example.com/node it should take user to my Node.js app which it is taking quite fine if I use Apache mod_proxy. But this works only for the / route of my Expressjs router.
But I also have several other routes e.g. /subscribe, /confirm but none of them work.
Following is my Apache config which I tried to make work by giving multiple ProxyPass directives but it doesn't work.
ProxyPass /node http://127.0.0.1:3000/
ProxyPassReverse /node http://127.0.0.1:3000/
ProxyPass /node/subscribe http://127.0.0.1:3000/subscribe
ProxyPassReverse /node/subscribe http://127.0.0.1:3000/subscribe
The Express router is pretty basic and uses following app configuration:
var router = express.Router();
app.use("/",router);
router.get("/",function(req,res){
res.sendFile(templatepath + "index.html");
});
router.get("/subscribe",function(req,res){
res.sendFile(templatepath + "subscribe.html");
});
router.get("*",function(req,res){
res.sendFile(templatepath + "404.html");
});
When I try to load http://www.example.com/node/subscribe it simply loads the * route and displays the 404.html template.
Finally got it working by modifying the Apache configuration file as follows:
ProxyPreserveHost On
RewriteEngine On
ProxyPass ^/node/(.*) http://127.0.0.1:3000/$1 [P,L]
ProxyPassReverse /node/ http://127.0.0.1:3000/

How to use node.js and sockets within my backbone application

This should be a fairly simple question to answer I think.
my node.js server is installed at
/usr/local/bin/node
I have an index.html and server.js files located at
/usr/local/bin
When I run node it works fine. I have installed a chat application which runs at localhost:8888 the main application/website runs at localhost:8000. My backbone files and main site is located on my apache server, for arguments sake say /usr/local/apache/html
How can I move my chat application into the main site so that I can access the chat app through node?
I've currently got two parts of the site working on different ports and I need to integrate the chat part.
Any advice on this would be great.
Thanks in advance :)
You need to setup Apache as a reverse proxy using mod_proxy. This will allow you to redirect requests from one port to another, making your Backbone client application only see one server.
So for instance, if you want your chat client available at www.mysite.com/chat, you would need to first install mod_proxy and then setup your site's conf file as such:
ServerName www.mysite.com
ProxyRequests off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
<Location /chat>
ProxyPassReverse http://localhost:8888/
</Location>
You can read more about mod_proxy here: http://httpd.apache.org/docs/2.2/mod/mod_proxy.html

Resources