Serve React App on IIS

Let’s say you have a front-end project developed using React or another JavaScript library/framework. Now, let’s assume that your server OS is a Windows Server and by default, you will use IIS as your web server. In this case, it’s not a routine job to deploy your project like an ASP.NET website. You have to do a little more to get your website to work. Read this concise article to learn how to do that.

Requirements

First of all, you need to install these things on your IIS server machine:

1. URL rewrite
2. iisnode
   It will add node to your IIS modules.
3. And of course, you need to install node itself.

Configuring the IIS

I assume that you’ve created your site in IIS, and your built code is in the site folder. If it’s a React project, it should have some files and folders like public, index.html, etc.

So, check the modules of your site in IIS Manager and be sure that it has the iisnode on the list. If you don’t see that, you have to install iisnode again or add it manually.

If you have a server.js file in your project, you can use express to manage its routing. In fact, you’ll create a nodejs web application with this. You may use the following command in the command line to install it:

npm install --save express

Your server.js file should be something like the following:

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;
const { log } = console;

app.use(express.static(path.join(__dirname, './')));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, './', 'index.html'));
});

app.listen(port, () => {
  log('\nServer is running on port: ' + port);
});

Also, you have to create a web.config file, and put these following lines in this config file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
	  <handlers>
		<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
	  </handlers>
	  
	  <rewrite>
		<rules>
		<rule name="nodejs" stopProcessing="true">
		  <match url="(.*)" />
		  <conditions logicalGrouping="MatchAll">
			<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
			<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
			<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
		  </conditions>
		  <action type="Rewrite" url="/" />
		</rule>
		</rules>
	  </rewrite>
	  
	  <security>
		<requestFiltering>
		<hiddenSegments>
		  <add segment="node_modules" />
		  <add segment="iisnode" />
		</hiddenSegments>
		</requestFiltering>
	  </security>
  </system.webServer>
</configuration>

It’s done.

Now, it’s possible for you to check your website in a browser to see if it really works :).

See Also

I used these following pages to do it for my project:

• https://stackoverflow.com/a/54163476/3144631
• https://dev.to/sumitkharche/how-to-deploy-react-application-on-iis-server-1ied

And some other pages that I don’t remember their addresses.

Happy Reacting!