maggie maggie - 1 year ago 225
Node.js Question

blank page is displaying in azurewebsites when deployed from github source. It is a nodejs webapp

I just deployed the code from github to azure.
It is a nodejs web app.
In azure, I'm using app services for this.

Also, I added the code for port in /bin/www

var port = process.env.port || 8080; // 8080 for local or whatever number u want
var listener = app.listen(port, function(){
console.log('Listening on port ' + port);

Still, webpage is not showing up in https://{appname}

Here is the deployment log

Command: "D:\home\site\deployments\tools\deploy.cmd"
Handling node.js deployment.
KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
Copying file: 'package.json'
Using start-up script bin/www from package.json.
Generated web.config.
The package.json file does not specify node.js engine version constraints.
The node.js application will run with the default node.js version 4.2.3.
Selected npm version 3.5.1
{github-reponame}@0.0.0 D:\home\site\wwwroot
├── lodash@4.4.0
└── underscore@1.7.0

Finished successfully.

For Justin Pattern's comment...
In scm, the structure of files, appear to be ok.

I did check the deployment log and the deployment is successful but the page is not displaying.

In scm kudu, the structure of the files appear to be ok. Still, only a blank page shows up when clicked on https://{appname}

Hi Gary-Liu MSFT,
web.config is present in the root.
This is how the web.config looks like

<?xml version="1.0" encoding="utf-8"?>
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:

<!-- Visit for more information on WebSocket support -->
<webSocket enabled="false" />
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="bin/www" verb="*" modules="iisnode"/>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^bin/www\/debug[\/]?" />

<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>

<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
<action type="Rewrite" url="bin/www"/>

<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<remove segment="bin"/>

<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />

You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled

See for a full list of options
<!--<iisnode watchedFiles="web.config;*.js"/>-->

July 24 - 11:05 p.m. EST -- looks like there is some clue to fix this... but now sure how..
Adding more info from the log file:
The log shows "No element in the source document matches... "

2016-07-25T03:03:26 Start 'websitelogs' site extension transform
2016-07-25T03:03:26 :(6,10), No element in the source document matches '/configuration/system.applicationHost/sites/site[@name='~1{appname}']/application[@path='/websitelogs']'
2016-07-25T03:03:26 Not executing Remove (transform line 6, 68)
2016-07-25T03:03:26 StartSection Executing Insert (transform line 7, 65)
2016-07-25T03:03:26 on /configuration/system.applicationHost/sites/site[@name='~1{appname}']/application
2016-07-25T03:03:26 Applying to 'site' element (no source line info)

Update Jul 25, 1:25 PM EST
For Gary-Liu MSFT's comment:
I tried commenting the "port" lines in github and redeployed it and it still azure shows only a blank page when accessed via https://{appname} or http:{appname}

From the application log...

2016-07-25T16:41:15 PID[15128] Warning The configured default provider 'MicrosoftAccount' was ignored
because it is not enabled. An alternate provider will be chosen arbitrarily.
2016-07-25T16:41:15 PID[15128] Information Sending response: 401.71 Unauthorized

the website still shows a blank page ....when accessed via http://{appname} or https://{appname}

the code was deployed via github repo. The website works fine without azure.
It just shows a blank page after deploying to azure web app...

July 25, 1:39pm EST
Thanks Gary-Liu MSFT
Resolved! Thanks!
Commenting the port lines helped! Thanks a lot! It is working now! Thanks!
In addition... It is because , in azure the authentication/authorization was set to outlook acct. Switched it off and now no more blank page! The site works fine now! The reason , I enabled it to outlook acct was...i was hoping that it would prompt for outlook login! Thanks for your help! The site is up and running in azure now!

Answer Source

could you check whether you have a web.config file on the root directory of your application?

The content of the web.config should be similar with following:

<?xml version="1.0" encoding="utf-8"?>
    <!-- mimeMap enables IIS to serve particular file types as specified by fileExtension. -->
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

    <modules runAllManagedModulesForAllRequests="false" />

    <!-- Web.Debug.config adds attributes to this to enable remote debugging when publishing in Debug configuration. -->
    <iisnode watchedFiles="web.config;*.js;routes\*.js;views\*.jade"/>

    <!-- Remote debugging (Azure Website with git deploy): Comment out iisnode above, and uncomment iisnode below. -->
    <!--<iisnode watchedFiles="web.config;*.js;routes\*.js;views\*.jade"
      nodeProcessCommandLine="node.exe &#45;&#45;debug"/>-->

    <!-- indicates that the server.js file is a Node.js application 
    to be handled by the iisnode module -->
      <add name="iisnode" path="/bin/www" verb="*" modules="iisnode" />

      <!-- Remote debugging (Azure Website with git deploy): Uncomment NtvsDebugProxy handler below.
      Additionally copy Microsoft.NodejsTools.WebRole to 'bin' from the Remote Debug Proxy folder.-->
      <!--<add name="NtvsDebugProxy" path="ntvs-debug-proxy/ad81dc69-210e-42c6-80da-221ed1245211" verb="*" resourceType="Unspecified"
        type="Microsoft.NodejsTools.Debugger.WebSocketProxy, Microsoft.NodejsTools.WebRole"/>-->

          <remove segment="bin" />

        <clear />
        <!-- Remote debugging (Azure Website with git deploy): Uncomment the NtvsDebugProxy rule below. -->
        <!--<rule name="NtvsDebugProxy" enabled="true" stopProcessing="true">
          <match url="^ntvs-debug-proxy/.*"/>

        <rule name="app" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="iisnode.+" negate="true" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
          <action type="Rewrite" url="bin\www" />

Any update or further concern, please feel free to let me know.


It seems there are a few mistakes on your repository code. It defines the port and make the http server to listen the port several times in your code. I did some modification , and deploy to Azure for testing, now it works fine on my side.

Please try to remove or comment following code snippet, and deploy to Azure again.

  • var listener = app.listen(port, function(){ console.log('Listening on port ' + port); });
    beginning at Line 18 of bin/www
  • var port = process.env.port || 8080; // 8080 for local or whatever number u want var listener = app.listen(port, function(){ console.log('Listening on port ' + port); });
    beginning at Line 2 of app.js
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download