Angular app publish with IISNode on Smarterasp.net

Question

My online host service smarterasp.net require some changes made to publish my angular compiled app (Angular v. 11.1.1) as a node js app. On their quickstart guide(https://www.smarterasp.net/support/kb/a1970/quick-start-node_js.aspx?KBSearchID=818443) they say: "We are Hosting node.js applications in IIS on Windows via IISNode, so you need to update listening port to use "process.env.PORT" in your code" and there's code given as an example:

HelloWorld Sample:

hello.js

var http = require('http');
http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    res.end('Hello, world!');
}).listen(process.env.PORT);

web.config

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="iisnode" path="hello.js" verb="*" modules="iisnode" />
        </handlers>
        <rewrite>
            <rules>
                <rule name="mysite">
                    <match url="/*" />
                    <action type="Rewrite" url="hello.js" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

"You do not have to run any command line with npm or node.exe to host nodejs with us." They say.

Now, the problem is: My compiled Angular app consists on many .js files, but the hello.js example given only has a string return res.end('Hello, world!');. My questions are:

What's the correct code to use in my case (instead of the hello.js) and where should I put this code? I already try to put it inside my index.html file, inside the header tags, inside a script, but the web browser console shows me the error (Uncaught ReferenceError: require is not defined).
Once I uploaded my test files, my website shows a black screen. This is my attempt of script inside my index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DummyTitle</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <script>
    var http = require('http');
    http.createServer(function (req, res) {
      res.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      res.write(req.url);
      res.end();
    }).listen(process.env.PORT);
  </script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="background-color: black;">
  <app-root></app-root>
</body>
</html>

And this is my web.config file (following the angular guide about IIS (https://angular.io/guide/deployment)):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/mainwebpage/index.html" />
      </rule>
    </rules>
  </rewrite>
        <handlers>
            <add name="iisnode" path="*.js" verb="*" modules="iisnode" />
        </handlers>
</system.webServer>
</configuration>

Has somebody found the same issue before? Help please!!

score 1 · Accepted Answer · answered Feb 06 '21 at 22:23

After a few days I figure out the quick start guide provided was wrong (https://www.smarterasp.net/support/kb/a1970/quick-start-node_js.aspx?KBSearchID=818443) I had absolutely no necesity to redirect my requests/responses to a server as suggested on the hello.js file. Probably because my angular app doesn't use server side rendering (SSR, Angular universal).

The solution was simply paste the compiled angular files at the designated folder and add a web.config. To my surprise I discover that the example of web.config file given on the official angular site (https://angular.io/guide/deployment#fallback-configuration-examples) was also wrong. Here's my web.config file, hoping it helps other poor souls looking for an inexistence documentation:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>  
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

If your issue is solved then I request you to mark the helpful suggestion as an answer. This will help other people who face the same issue. — Jalpa Panchal, Feb 19 '21 at 09:48

score 0 · Answer 2 · answered Feb 05 '21 at 07:07

If you have server.js file put the code "process.env.PORT" inside the server.js file.

<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
</handlers>    
</system.webServer>
</configuration>

This handler registration allows the same web site to contain other *.js files (e.g. jQuery libraries) that IIS will continue serving as static files.

Reference link:

use node.js express on iis with iisnode

Angular app publish with IISNode on Smarterasp.net

2 Answers2