How to properly launch Angular Universal to live server - node.js

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

Related

How do I make apache2.4 configuration specific to a particular virtualhost so it doesn't affect other virtualhost on a centos server

I have put in my include file which is in this directory /etc/apache2/conf.d/userdata/std/2_4/myusername/sub.domain.com/proxy.conf.
On the file I did proxy reverse to localhost port 5000 for my net core app.
Then I did a post virtualhost include using include editor.
When I try to reach other domain on same VPS I get server temporarily unavailable to handle request error.but when I uncommented the proxy reverse on my include file i was able to reach other domain.
So my question is given the procedure I have taken, why is an include specified for a particular virtualhost affecting other virtualhosts on the server.
Proxy reverse code in the include file is code below
ProxyPass / http://127.0.0.1:5000/
ProxyPassReverse / http://127.0.0.1:5000/ ```
And this include was applied to virtualhost for the particular sub domain, don't know why it affects other virtualhosts.
Then I did a post virtualhost include using include editor.
If this means outside the <virtualhost> then its no wonder it affects all virtualhosts -- outside of <virtualhost> is global.
what i did was i opened up the post_virtualhost_global.conf file found in /etc/apache2/includes/.
then i removed the include statement from the post_virtualhost_global.conf file, then it worked, i dont seem to understand how, but it worked perfectly anyway. i have also applied same practice for subsequent virtualhost proxyreverse includes i have done afterward.

Gitlab api v4 returns 404 on project search when using namespace/projectname instead of id

I try to use the Gitlab Workflow plugin for VS Code. Unfortunately it does not find my project. I debugged it and found that it calls
https://mydomain/gitlab/api/v4/projects/mygroup%2Fmyproject
and the api returns
{
error: "404 Project Not Found"
}
This should work according to the documentation.
If I call https://mydomain/gitlab/api/v4/projects/:id where id is the project number I get
path_with_namespace: "mygroup/myproject",
Browsing the internet I found some people claiming it does not work for them too but no solution. Others say it works perfectly for them.
I've tried with Gitlab CE 12.x.x and upgraded now to the latest version 13 (13.0.6) using https://github.com/sameersbn/docker-gitlab
I've tried with several projects to no avail.
I'm maintainer for the projects.
The access token has the rights api and read_user as requested by the plugin.
Clearly I'm missing something. But what?
EDIT:
My setup is having the docker container behind a reverse proxy apache. Maybe the authorization does not work as expected. The plugin sends a header PRIVATE-TOKEN. I'll check if the header is passed to the api.
Nope. The PRIVATE-TOKEN header is recieved by the docker container.
EDIT2:
I set up a public group and a public project to eliminate auth problems. Still does not work. Search returns 404.
EDIT3:
Since Dashrath Mundkar asked about the curl command:
curl -H "PRIVATE-TOKEN:XXXXXXX" https://mydomain/gitlab/api/v4/projects/mygroup%2Fmyproject
Ok. I found the answer and it is a bit specific to my setup.
Since it may be very well relevant for others too who are using Apache 2.4 as a reverse proxy in front of Gitlab, I answer my own question.
My config for Apache contained AllowEncodedSlashes NoDecode so that requests for Gitlab could contain an urlencoded path as needed by the Api e.g mygroup%2Fmyproject (otherwise Apache would already throw a 404, see AllowEncodedSlashes)
Unfortunately that was not enough. Normally, mod_proxy will canonicalise ProxyPassed URLs too.
So my backend recieved mygroup%252Fmyproject (notice the added 25, encoding the % char in %2F) which led to the 404 from Gitlab.
After I changed the Apache config to ProxyPass /gitlab http://gitlab.local:80/gitlab nocanon (I added nocanon) everything was working fine.
This worked for me
<VirtualHost *:80>
ServerName gitlab.example.lk
ProxyRequests Off
ProxyPreserveHost On
ProxyVia Full
<Proxy *>
Require all granted
</Proxy>
AllowEncodedSlashes NoDecode
ProxyPass / http://localhost:8181/ nocanon
ProxyPassReverse / http://localhost:8181/
RewriteEngine on
RewriteCond %{SERVER_NAME} =www.gitlab.example.lk [OR]
RewriteCond %{SERVER_NAME} =gitlab.example.lk
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

Apache on CentOS issue configuring routing to "Index.html" (uppercase"I")

I have a project being deployed such that an Apache instance is running on CentOS (DMZ) which is due to forward all requests to a TOMCAT instance running behind the firewall. For instance, a request:
www.Example.com
needs to be forwarded to:
HTTP://<servername behind the firewall>:<port number>/Blabla/Index.html
(Note that Index.html has a capital I).
I should note that the whole project required extensive review as it was developed under Windows (case insensitive filenames) but the running environment is Linux, and now all filenames and their references are fully synchronized.
The problem appears to be that it is not possible to configure within Apache to forward requests to Index.html and it converts it to index.html, which does not exist.
I can change all the file names to lowercase, but this will take quite some effort.
Is there any way to force Apache to use as-is what I define (i.e. if lowercase, use lowercase; if uppercase, use uppercase; if mixed, use mixed).
Thanks in advance.
You should be able to use mod_speling from Apache. In your configuration file, simply put:
CheckSpelling On
CheckCaseOnly On
And reload Apache using either:
/etc/init.d/httpd reload
Or if you're using CentOS 7:
systemctl reload httpd
This should now make all the files in your website directory insensitive.
If you're using virtualhosts, you may add this option into it:
DirectoryIndex Index.html
So your virtualhost should be like that :
<VirtualHost *:80>
ServerName website_name
DocumentRoot website_directory
DirectoryIndex Index.html
</VirtualHost>
You can paste it in /etc/httpd/conf.d/mywebsite.conf and reload apache with :
systemctl reload httpd
If you have CentOS/7. For older versions of CentOS use this command:
service httpd reload

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

Relative file path issue while using Apache rewrite rules

I am trying to create some Apache rewrite rules that shall be able to route URI requests like e.g.
http://mydomain.com/articles/example to
http://mydomain.com/index.php?site=articles&page=example
What I've got so far is this:
RewriteRule ^/?([a-zA-Z_]+)/([a-zA-Z0-9_]+).html$ index.php?site=$1&page=$2 [L]
RewriteRule ^/?([a-zA-Z_]+)/([a-zA-Z0-9_]+)$ index.php?site=$1&page=$2 [L]
Since I am using relative file paths everywhere in my index.php, for style sheets, scripts, images and the like, I am facing the problem of incorrectly resolved absolute file paths.
For example when I am in the root, http://mydomain.com/ or http://mydomain.com/articles, all relative image paths resolve correctly - images/logo.jpg becomes http://mydomain.com/images/logo.jpg or htdocs/mydomain/images/logo.jpg respectively.
When I click one of my links on the site, e.g. http://mydomain.com/articles/example, Apache (or the Browser?) assumes all my images are located here http://mydomain.com/articles/images/ - it is pretty obvious that this path doesn't really exist.
So here are my questions:
1. Is it possible to solve this problem without changing all my relative file paths to absolute ones?
I could use root / for all my paths on my actual web server, because my domain is advantageously linked.
mydomain.com is linked to /html/mydomain on my web server - / resolves to mydomain.com/, but on my personal computer I am running XAMPP and / resolves to htdocs/ - it should however resolve to htdocs/mydomain/ simply because I hold several sites in htdocs
Absolute file paths are terrible when updating index.php to my web server, because I have to auto-systematically replace path declarations - not only in index.php, but style sheets and scripts as well.
2. Should I create a static DNS entry on my personal computer to adapt to my web server?
3. What is the most commonly used method?
Thank you in advance!
Sincerely, Sebastian
I figured it out by myself, by editing Windows' hosts file and the Apache's httpd-vhosts.conf file.
1. Adding a new static DNS entry to %SystemRoot%\system32\drivers\etc\hosts
127.0.0.1 www.mydomain.local
2. Appending a new virtual host entry to %ApacheInstallDir%\conf\extra\httpd-vhosts.conf
<Directory "E:\htdocs">
Order Deny,Allow
Allow from all
</Directory>
NameVirtualHost 127.0.0.1
<VirtualHost 127.0.0.1>
DocumentRoot "E:\htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost 127.0.0.1>
DocumentRoot "E:\htdocs\mydomain"
ServerName www.mydomain.local
</VirtualHost>
Now http://www.mydomain.local leads to htdocs/mydomain directly
3. Changing all relative paths and links in my index.php by simply "rooting" them with a / in front of them, e.g. <img src="/images/logo.jpg" />
I also managed to set up a Site in Dreamweaver, so I am able to use the Design- and the Live-View correctly.

Resources