How to deploy Nuxt with IIS

Question

I want to deploy Nuxt in IIS i'm using IIS Node but i can't get it works... Folder

I can do it work with npm run start in my server, but i have other projects like admin y api (.net) and it's using port 80 so when i'm using port 80 it's busy while in IIS it works with this structure Folder IIS

this is my code in 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>
    <!-- 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="nuxt.config.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="^nuxt.config.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="nuxt.config.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>

ignore nuxt.config.js before i had server.js with express but it didn't work, because i'm using ES6 and when it try to run nuxt.config got a mistake about syntax

Answer 1

1)make sure you install the node.

https://nodejs.org/en/download/

2)create the nutx app by using below command:

npm init nuxt-app testnu

3)enter to the app folder and run below command to build the site:

npm run generate

This command will generate the dist folder in your app folder.

4)create a site in IIS and point the dist folder path as a site path and assign the site binding information.

5)do not forget to assign the iis_iusrs and iusr permission to the site folder.(my case the site folder is testnu)

6)refresh and restart the site after doing changes and browse the site.

Answer 2

The thing is that you absolutely have to use a server.js file to run a node.js server. The syntax mistake was probably on export in config.js and can easily be fixed by changing export default { ... to module.exports = { ...

Your server.js file should look like this:

const express = require('express');
const consola = require('consola');
const { Nuxt, Builder } = require('nuxt');
const app = express();

const config = require('./nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';

async function start() {
  const nuxt = new Nuxt(config);
  const { host, port } = nuxt.options.server;

  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build();
  } else {
    await nuxt.ready();
  }

  app.use(nuxt.render);

  app.listen(port, host);
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  });
}

start();

The file is on the same level as the nuxt.config.js (feel free to move it to server/index.js as nuxt-create-app does when you choose express as a custom server framework, and change the config import to const config = require('../nuxt.config.js'); ).

And don't forget to change the path of your rewrite rule and iisnode module to the server.js file in the web.config .

You'll also need to add <iisnode node_env="development" /> to your web.config if you wanna run it in production mode.

Also consider adding a separate config file for each environment, then in package.json you can switch them like this:

  "scripts": {
    "dev": "nuxt",
    "build-local": "nuxt build",
    "build-dev": "nuxt build --config-file nuxt.config.dev.js",
    "build": "nuxt build --config-file nuxt.config.prod.js",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }

And then build like npm run build-dev or yarn build-dev for example.

Answer 3

whoever is trying to host any type of Javascript SPA or node application with IIS should be aware of the URL rewrite. just like the following example. I have tried this with static react, angular, nextjs SPAs.

https://gist.github.com/maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45

Answer 4

Instruction:

1.Add or install IIS

1.a)Open "Turn windows features on or of" , then find "Internet Information Services"

2.b)From the "Internet Information Services" > "World Wide Web Services" check all items except "CGI"

3.c)Click on Ok button and restart your system

2.Install IISNode (download and install if it's not exist on your system)

3.Install Url Rewrite (download and install if it's not exist on your system)

4.Change the first line of nuxt.config.js file from export default { to module.exports = {

5.Run command npm install nuxt-start in your project

6.Install express => npm install express

7.Copy Server folder and web.config file to the root of your project path

8.Build your nuxt app => npm run build

Instruction for IIS:

1.Add a website

2.Set a name Change the physical path to the root of your project

3.Enter a custom port like "3000" and click on "OK" button

3.Click on Apllication Pools(in the left pane of IIS window beside the "Sites") then right click on "your website pools", then right click on it and select Advance Settings

4.Change Identity to "LocalSystem" and then click on "Ok" button

NOTE: if you have any error, open the iisnode folder in the root of your project to check logs.