CODEWITHSUNDEEP
node.jsangularangular-universal
Cacoon
Cacoon

Reputation: 2538

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:

enter image description here

And I am not sure where I put my /dist files etc and then start the nodejs server.

NodeJS/npm installed shown here:

enter image description here

Upvotes: 2

Views: 2287

Answers (2)

Willie
Willie

Reputation: 338

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

  1. Build your app: npm run build:ssr
  2. Move the dist over to your server
  3. install PM2 npm install pm2 -g
  4. On your server, use PM2 to run the server bundled app pm2 start dist/server.js
  5. 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.

Upvotes: 2

Cacoon
Cacoon

Reputation: 2538

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

Upvotes: 1

Related Questions