CODEWITHSUNDEEP
node.jsangulariisserver-side-renderingiisnode
Jaleel
Jaleel

Reputation: 611

Angular Universal app doesn't show server side when hosting in IIS

I have an Angular Universal application. I build the application using Visual Studio code and the application works fine when I run the application using npm run build:ssr && npm run serve:ssr locally. When the page is loaded, I can see all the css , html and other related content when I view the source of the html page.Also, The dist folder has all the files needed to run.

But, when I copy the dist folder and deploy in an IIS website, it always shows the client side of the code. That means, when I 'view source' of the rendered html page, it has approot tag and other javascript files. What this indicates is that, it is showing the client package not the server side content. The IIS structure looks like this:

enter image description here

I have IISNODE , URL Rewrite are installed in the server. Server is Windows server 2016.

Note: I think the server works just fine. Because I am able to deploy some sample Angular Universal application in the same server and they loads server side content. My guess is that , this something to do with this particular application. unfortunately can't figure out.

Appreciate any help.

Thanks, Jaleel

Upvotes: 1

Views: 1762

Answers (2)

C Crk
C Crk

Reputation: 1

Recheck your code whether you are using Local storage and session storage to load the application.
Local storage and session storage are client-side storage mechanisms that cannot be accessed from the server side in your application. To access data from both server-side and client-side environments, you can utilize concepts like SSR cookies or state transfer keys.

Upvotes: 0

Jalpa Panchal
Jalpa Panchal

Reputation: 12749

You could follow the below steps to deploy the app in iis:

1)run the below command to check the app is running locally or not:

ng serve --open

2)Run NodeJs Command Prompt

3)Navigate to your Angular Project folder

4)Execute npm run build:ssr

5)You will see dist folder in your project folder

6)Go to your windows server and create an empty folder (name it ng-ssr for example)

7)Copy to dist folder into ng-ssr

8)Open ng-ssr/dist/server folder, you will find main.js file

9)copy main.js and paste it directly in ng-ssr folder

10)Create a web.conifg file in ng-ssr folder and add the below code in it:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>        
      <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))" />
                  <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" />
          <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" />
         </staticContent>      
    </system.webServer>
  </configuration>

11)Now your website folder must look like this

enter image description here

12)Create a Web Site in IIS

13)In the IIS, go to the Application Pool for the Web Site you created, change the .Net Framework Version to No Managed Code

Now you can access the site.

Deploy Angular Universal to IIS

Upvotes: 1

Related Questions