How to deploy Angular to production server using angular-cli and its new universal server rendering feature

Question

I already have an Angular application running in Azure Server using angular-cli to deploy.

All I have to do is run the command ng build --prod --aot and copy everything from /dist folder to my root website folder. Everything works great!

Because SEO issues, now I want to implement server side rendering. So I follow that universal rendering guide and I was able to create a server bundle.

Ok, so now I have 2 folders:

1. /dist
2. /dist-serv

And now? What I have to do to deploy it to Azure Server? Witch folder should I copy to my root folder so my webserver can start to pre render it?

Answer 1

With server side rendering, copying the files to the root folder of your server is not enough.

You'll need to run a web server (like Node.js Express) and call the renderModuleFactory up on an incoming request. See e.g. this post as an example, but there are many out there.

Answer 2

This is how I deployed Angular to an production Azure server (IIS):

STEP ONE: Create an ANGULAR-CLI project. Instructions here: angular-cli

STEP TWO: Make it universal following this reference: universal-starter

Note: you can just clone this repository and bypass step 1

*How to fit one project into another:

1. Modify files that exist in both projects 1 and 2 to be exactly the same as project 2 (universal) and
2. Create files that does exist on project 2 and do not exist on project 1*

Alright, now you have a default universal project. You should be able to run npm run build:ssr && npm run serve:ssr and/or npm run build:prerender && npm run serve:prerender Note: if you can't run above command you should double check all files in your project to be like the repository at step 2.

STEP THREE:

Create a web.config file like this.

 <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <webSocket enabled="false"/>
        <handlers>
          <add name="iisnode" path="/server.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
          <rules>
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^/server.js\/debug[\/]?"/>
            </rule>
            <rule name="StaticContent">
              <action type="Rewrite" url="public{REQUEST_URI}"/>
            </rule>
            <rule name="DynamicContent">
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
              </conditions>
              <action type="Rewrite" url="/server.js"/>
            </rule>
          </rules>
        </rewrite>
        <security>
          <requestFiltering>
            <hiddenSegments>
              <remove segment="bin"/>
            </hiddenSegments>
          </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough"/>
      </system.webServer>
    </configuration>

STEP FOUR: Copy and paste web.config to dist folder root like that:

 \dist
        \browser
        \server
        prerender.js
        server.js
        web.config

STEP FIVE: Change server.ts file in your project like that:

...
// const PORT = process.env.PORT || 4000;
const PORT = process.env.PORT || 8080; // <= I changed here
// const DIST_FOLDER = join(process.cwd(), 'dist');
const DIST_FOLDER = join(process.cwd()); // <= I changed here

... (continue)

STEP SIX Rebuild and copy everything from your /dist folder to your Azure website root.

Enjoy =)