Posted on February 21, 2023
We already talked about the implementation of Angular Universal in a previous article Assuming you already have an angular universal application. Execute the command given below to build an Angular app with the express server Let's look at the Note: This will generate a dist folder with two subfolders, ‘browser’ and ‘server’. Screenshot from sample example Notice: main.js path to iisnode module (If you are testing in a local machine or dedicated server Install IIS Node & URL Rewrite on the server.) (If local or dedicated server) In the IIS, go to Application Pools for the Website you created. Then change the .NET CLR Version to No Managed Code. Give IIS_IUSERS Full Control of the root directory for your website. Verify that your application is working by visiting the website in a browser and then navigating to view-source (You will notice
Let's talk about deploying the angular SSR application in IIS OR Nginx Server
npm run build:ssr
dist
folder
sever
contains the code that runs on the server-side when the application is being rendered, and browser
contains the code that runs on the client-side when the application is being rendered. How to deploy your angular universal application with IIS?
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<iisnode loggingEnabled="true" debuggingEnabled="true" />
<handlers>
<add name="iisnode" path="main.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="DynamicContent">
<match url="/*" />
<action type="Rewrite" url="main.js" />
</rule>
<rule name="StaticContent" stopProcessing="true">
<match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg|webp))" />
<action type="None" />
</rule>
</rules>
</rewrite>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" />
<remove fileExtension=".svg" />
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<remove fileExtension=".otf" />
<remove fileExtension=".webp" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
<mimeMap fileExtension=".otf" mimeType="application/otf" />
<mimeMap fileExtension=".webp" mimeType="image/webp" />
</staticContent>
</system.webServer>
</configuration>
<app-root>............</app-root>
now showing all the child elements and dynamic meta tags are also visible)How to deploy your angular universal application with NGINX server?