1

Despite substantial unsuccessful research of this problem, I believe that it is probably not that hard to solve, it is just that I do not have enough experience with Angular and Apache.

So here is the info. I have an Angular 2 app that I wanted to be server-side rendered, in order to improve its SEO, as well as to improve the appearance of the links to the site shared on social media.

The server on which the site is hosted is Linux Ubuntu Linux ubuntu 18.04.

Web server application is Apache2.

I have followed the instructions for Server-Side rendering from the official Angular documentation.

Also, I started the server.js file, so it is serving the application at port 4000. And I have to point it out, I have no problems running it locally. The problem is when I try to run it on the server...

For security reasons, I will not be using real domains in this post.

When opening the page: www.mydomainexample.com/ssr I get this error:

SSR error

Here is my folder structure:

  • /var/www/html/
    • ssr/
      • .htaccess
      • server.js
      • dist/
        • browser/
          • 3rdpartylicenses.txt
          • es2015-polyfills.js
          • favicon.ico
          • fontawesome-webfont.svg
          • fontawesome-webfont.ttf
          • fontawesome-webfont.woff
          • fontawesome-webfont.woff2
          • index.html
          • main.js
          • polyfills.js
          • runtime.js
          • scripts.js
          • styles.css
          • assets
        • server/
          • main.js
          • main.js.map

Here is the apache2.conf

...
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Require all denied
</Directory>

<Directory /usr/share>
    AllowOverride None
    Require all granted
</Directory>

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
...

Here is the .htaccess file:

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /ssr/
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^ - [L]
 RewriteRule ^ /dist/browser/index.html
</IfModule>
<VirtualHost *:80>
 ServerName mydomainexample.com
 ServerAlias www.mydomainexample.com
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / http://localhost:4000/
 ProxyPassReverse / http://localhost:4000/
</VirtualHost>

<VirtualHost *:443>
 ServerName mydomainexample.com
 ServerAlias www.mydomainexample.com
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / https://localhost:4000/
 ProxyPassReverse / https://localhost:4000/
</VirtualHost>

Also, I believe it is important to show a part of index html file, and I believe that the base tag is significant as well. Here is the base tag from index.html file:

...
<base href="/">
...

1 Answer 1

3

If your website is running under /ssr you need to build your app with <base href="/ssr">.

Also you probably don't need the dist folder. browser and server folders usually reside next to the server.js but this may depend on your setup.

Additionally your rewrite rule doesn't seem to work since you obviously get HTML responses for your file requests but this may be related to the base href.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.