How to deploy React Next.JS on iis?

Question

I have a react web app with Next.Js. I want To upload it on my IIS ftp. Should I copy .next folder? If yes, Why I get error on this case?

Error screenshot:

Answer 1

add this to your package.json scripts : "prod": "next export" and after building run this script then copy the output folder : /out

Answer 2

you can make a localhost on your server and redirect requests to that local host. for doing that make a 'server.js' file in main folder. Inside that folder make a process that runs in production mode(on port 4000). server.js:

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const hostname = 'localhost';
const port = process.env.PORT || 4000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
createServer(async (req, res) => {
try {
  // Be sure to pass `true` as the second argument to `url.parse`.
  // This tells it to parse the query portion of the URL.
  const parsedUrl = parse(req.url, true);
  const { pathname, query } = parsedUrl;

  if (pathname === '/a') {
    await app.render(req, res, '/a', query);
  } else if (pathname === '/b') {
    await app.render(req, res, '/b', query);
  } else {
    await handle(req, res, parsedUrl);
  }
} catch (err) {
  console.error('Error occurred handling', req.url, err);
  res.statusCode = 500;
  res.end('internal server error');
}
}).listen(port, (err) => {
if (err) throw err;
console.log(`> Ready on http://${hostname}:${port}`);
});
});

after that make a "service.js" file wich redirect all of the urls to local host(reverse proxy)

web.config:

<configuration>
<system.webServer>
    <rewrite>
        <rules>                 
            <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                <match url="(.*)" />
                <action type="Rewrite" url="http://localhost:4000/{R:1}" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

and at the end make "service.js" file wich run server.js file as a service.

service.js:

var Service = require('node-windows').Service;
var path = require('path');

var svc = new Service({
name: 'service name',
description: 'example server',
script: path.join(__dirname, 'server.js'),
workingdirectory: path.join(__dirname, 'server.js'),
nodeOptions: [],
env: {
name: 'NODE_ENV',
value: 'production',
},
});
//svc.uninstall();

svc.on('install', function () {
svc.start();
});

svc.install();

now run service.js with 'node service.js' command. now you can see 'service name' service in your server's services(you can check if it doesn't started,start it manually)

• for uninstalling service you can uncomment 'svc.uninstall();' line in service.js file and comment lines about installing and starting service

Answer 3

The easiest solution is to publish the project and put the output files (static html files and assets) to a folder and setting up a IIS website pointing that folder. This is OK if you do not need to dynamic rendering.

Please have a look at this article where I've tried to explain how to deploy a static html website built by next.js on IIS.

Answer 4

To run node js app on iis you need to configure the iisnode module. https://github.com/tjanczuk/iisnode

then run below command to build the application:

npm run build

which creates the production application in the .next folder.

https://nextjs.org/docs/advanced-features/static-html-export