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
npm run build:ssrnpm install pm2 -gpm2 start dist/server.jsUPDATE (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