Nuxt.js: IISNode hosting

[shaydoc]

Hi,
I maybe doing something wrong here, but the nuxt route does not seem to work in iisnode.
using the nuxt/express example i configured it for iisnode, but it is returning a 404 when i browse to the
/ route
Stackoverflow Question
Thanks
Shay

_{This question is available on Nuxt.js community (#c411)}

[benosman]

I had some issues getting nuxt to work on Azure, partly due to the iisnode config.

In the end I had to create a stub server.js file in the repo root that is based on the node_modules/nuxt/bin/nuxt-start (just paths are changed, probably possible to refactor)

var fs = require('fs')
var Nuxt = require('nuxt')
var resolve = require('path').resolve

var rootDir = resolve('.')
var nuxtConfigFile = resolve(rootDir, 'nuxt.config.js')

var options = {}
if (fs.existsSync(nuxtConfigFile)) {
  options = require(nuxtConfigFile)
}
if (typeof options.rootDir !== 'string') {
  options.rootDir = rootDir
}
options.dev = false // Force production mode (no webpack middleware called)

var nuxt = new Nuxt(options)

new nuxt.Server(nuxt)
  .listen(
    process.env.PORT || process.env.npm_package_config_nuxt_port,
    process.env.HOST || process.env.npm_package_config_nuxt_host
)

Then in web.config I pointed to that - see the three mentions of server.js in there

<?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:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>

        <!-- <rule name="Redirect to https" stopProcessing="true">
          <match url="(.*)"/>
          <conditions>
            <add input="{HTTPS}" pattern="Off"/>
            <add input="{REQUEST_METHOD}" pattern="^get$|^head$" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
        </rule> -->

        <!-- 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}"/>
        </rule>

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

      </rules>
    </rewrite>

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

    <!-- 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 https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration>

With this setup it works, so there may be something in there for you too.

[shaydoc]

hey thanks,
I was right there behind you... I was just realizing that same thing. Thanks so much for your assistance

Shay

[shaydoc]

I believe this is resolved, thanks to @benosman

[shaydoc]

While this works for the nuxt starter kit, it still does not quite play well with ExpressJS on Azure
It is very much to do with the paths here, I guess since I built it locally and deployed it, it cannot work ?

[shaydoc]

With the previous error resolved, I now get all the assets downloaded but I get a : 500 connect EACCES 127.0.0.1:80 error message on Azure

[benosman]

what port is express set to run on ? if it's set to 80 that would likely cause issues.

This may be related:
http://stackoverflow.com/questions/36293278/error-listen-eacces-0-0-0-080-node-on-azure-server-windows-server-2012-r2

[benosman]

by the way, you said you are building locally and deploying it - is that the case still?

I created a custom post deployment script to build after deployment - details of that here:

https://gist.github.com/benosman/c80653779f90a5d6fb0b95ad2654dc96

the build-nuxt.cmd file needs to go into a deployment subdirectory of repo root. I then deploy to Azure via git, the regular deployment fetches npm packages and then this script is run to build nuxt.

[shaydoc]

Hi,
The ExpressJS api's are working perfectly well. All the issues are with the server render of the index.vue page.
Even the subroutes seem to work fine.

Nice work on the customized build script.

[benosman]

Hmm, unfortunately i'm not sure what to suggest then - it's the first time for me using windows / azure for a node app.

[shaydoc]

likewise, I usually work with ASP.NET MVC and WebApi.....
just need to get my code tracing hat on!

[shaydoc]

OK, I have everything aligned correctly now. I can categorically say the error in this is occuring on server rendering of the /pages/index.vue component. Server side rendering of subroutes works, but the top level routes fail.

So now, I must trace the server rendering for the top level routes to see what is going on and why it cannot locate these bad boys.

[shaydoc]

finally got to the bottom of the error: it was the axios.get call in the "index.vue" that was blowing up.
this is because IISNODE uses named pipes for local connections i believe.
This meant during server render the call to express api "/api/users" was failing server side.
The fix is to simply included the fully qualified api location e.g. "http://myazure.website.net/api/users"
and all works.

Worth bearing in mind that iisnode is using a named pipe!

[pmgower]

@shaydoc how did you get your iisnode deployment to work? Can you take a look at the issue I am having described in this issue?

[benmccallum]

Have been setting this up myself today on the latest version rc11. @benosman did a terrific job, but there were a few new things to handle. Here's a gist with all the relevant changes.

• In package.json > scripts, there is a start task that Azure's kudu tries to run as part of it's deployment and can't because it doesn't recognise kudu. Comment it out or rename it as we're letting Azure start it anyway via server.js.
• server.js needed some updates, see gist
• Once kudu sees you have a server.js it'll auto-generate the web.config he mentioned so no need to worry about that.
• If you're using devDependencies (like sass-loader, etc.) that are required for build, Azure won't install these for you, you need to do it yourself. I added a step in to @benosman 's custom deployment script for this.

[CKGrafico]

If you need more examples, we have added this too to PWABuilder and is working well (including small changes)
https://github.com/pwa-builder/manifoldjs-site/tree/dev-vue

check:
web.config
package.json (start task)
nuxt.config.js
server.js

[benmccallum]

Nice @CKGrafico, good to see it's getting easier for folks.

Any reason for keeping the start task? I have mine commented out and I guess Azure just runs node server.js by default. Just being explicit?

[CKGrafico]

Yes @benmccallum :)
And because they are using this too on the official example.

[Domitnator]

Guys,

Hopfully you can help me out. I have basically have the same setup with a default nuxt cli generated project . But i keep getting a content decoding error in the webbrowser.

Any experience with that error?

I also did a request with Fiddler and i cannot discover anything strange. And in fiddler the webview just works:

I dont know where to start debugging this. Is this an issue in IISNode or my Nuxt configuration?

Hopefully someone can point me in the right direction?

Update: I started from scratch again and now everything works fine. I suspect it was some misconfiguration in my azure webapp somewhere.

[Eric-Bryan]

Hello everybody,
I have a sample Nuxt app.
I applied @benosman samples for "web.config" and "node_modules/nuxt/bin/nuxt-start".

1.
I have run "npm run generate" for that app.
And I have created a new web app in IIS 7.5 with iisnode (without Azure) with the directory ".nuxt\dist" (from my app) called "nuxt" right under "Default Web App".
When I want to go to http://localhost/nuxt I get error 500.

2.
It is the same error (500) when I have run "npm run build" and have created a new app in IIS with the directory "\dist" called "nuxt2".

What have I missed ?
Do you have some advices ?
Thank you very much in advance.

[benmccallum]

@Eric-Bryan, you need to point the IIS website to the folder that contains your server.js. That folder should have things like your .nuxt/dist inside it. Does that make sense?

[Eric-Bryan]

@benmccallum : thank you for your answer.
Do I have to make the Web App point to the folder '/.nuxt' or '/.nuxt/dist' ?
Because only '/.nuxt' contains server.js.
Anyway, I have created a new Web App that points to '/.nuxt' and I still get error 500.

[CKGrafico]

can you use nuxt generate --spa and publish dist folder? like we do at https://github.com/CKGrafico/Frontend-Boilerplates/blob/nuxt-dev/package.json

[Eric-Bryan]

@CKGrafico : thank you for your answer.
I have run "nuxt generate --spa" and I added the web.config from @benosman, but I still get error 500.
How does the package.json in your link fix my issue ?

[CKGrafico]

Do you have a repo? can you take a screenshot or something of your wwwroot at kudu? to enter to kudu is easy as for example https://mywebsite.azurewebsites.net ---> https://mywebsite.scm.azurewebsites.net

[Eric-Bryan]

@CKGrafico,
Here is my pages\index.vue :

Here is my project without node_modules folder:
nux-axios-light.zip
Let me know if you need something else.

[CKGrafico]

You're using the 'copy pasted' web.config for node projects.
You don't have any server.js

1. Be sure that wou're publishing dist folder inside the wwwroot folder into your azure appservice (check with KUDU!!)

this will be a better web.config

<?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:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA 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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Why? Because your site doesn't have backend :)

[Eric-Bryan]

@CKGrafico :
I have replaced my web.config by yours and I don't have error 500 but a blank page with an image : a little grey circle in the middle of the page which bounces.
The page source is :

<!DOCTYPE html> <html data-n-head=""> <head> <meta data-n-head="true" charset="utf-8"><meta data-n-head="true" content="width=device-width,initial-scale=1" name="viewport"><meta data-n-head="true" content="Nuxt.js project" name="description" data-hid="description"><title data-n-head="true">nuxt-axios</title><link href="/favicon.ico" rel="icon" data-n-head="true" type="image/x-icon"><link href="/_nuxt/manifest.11143408c65536d7667b.js" rel="preload" as="script"><link href="/_nuxt/vendor.3ff8556a09b164ff2c2b.js" rel="preload" as="script"><link href="/_nuxt/app.b3fbd67e9ea6bfe851e6.js" rel="preload" as="script"><link href="/_nuxt/pages_posts_index.f3549afb8c4cf675b451.js" rel="prefetch"><link href="/_nuxt/pages_posts__id.d2d8dcc96acd8b67bc09.js" rel="prefetch"><link href="/_nuxt/pages_page_essai_index.b019f3dd3aa0f1edcc8b.js" rel="prefetch"><link href="/_nuxt/pages_index.e68f0c8799f779c7a7f8.js" rel="prefetch"><link href="/_nuxt/layouts_default.e7bfe3a4a42fdabf27d0.js" rel="prefetch"> </head> <body data-n-head=""> <div id="__nuxt"><style>#__nuxt,body,html{background-color:#fff;width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin:0;padding:0}.spinner{width:40px;height:40px;margin:100px auto;background-color:#dbe1ec;border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}@-webkit-keyframes sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}</style><div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div></div><!-- http://tobiasahlin.com/spinkit --></div> <script src="/_nuxt/manifest.11143408c65536d7667b.js" type="text/javascript"></script><script src="/_nuxt/vendor.3ff8556a09b164ff2c2b.js" type="text/javascript"></script><script src="/_nuxt/app.b3fbd67e9ea6bfe851e6.js" type="text/javascript"></script>

Any ideas ?
Thanks in advance.

[Eric-Bryan]

Sorry I cannot paste the whole page source code, so I send it with an attached file :
Page1.txt

[CKGrafico]

Hello I'm not asking for your source

[Eric-Bryan]

Hello @CKGrafico :
Sorry for the delay.
In fact, I don't use Azure, I only have IIS 7.5 on my server (localhost for instant).
So I don't use Kudu.
Does it make a difference with the configurations (web.config, ...) you use ?
Does your configurations only work for Azure, and not for IIS on local ?

[sergeos]

also interesting, i'm asking same question like Eric-Bryan there:
https://gist.github.com/benmccallum/226ae1b428157b9d5998a5ba27eadf59#gistcomment-2676440

so, how i'm understand we are nedeed starting equal npm run start but via iisnode (process manager).
and how possible configurate web.config with this addition?

[CKGrafico]

Actually in my projects I'm using nuxt only as a generated spa 'nuxt generate --spa' and I have backend with net core.

This was the best way

[sergeos]

And you use .net core as mvc pattern, or via Webapi?

[horihiro]

FYI about this issue.
I published a template of nuxt.js/express for Azure Web Apps.

horihiro/nuxt-express-azure-webapps

Please try this.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.