How to deploy your React App on IIS on Windows Server

We all know that after developing a web application, we intend to deploy it in production mode. So, the most commonly used way to do this is using paid cloud services. But if we are supposed to deploy our web application in our own data center, we can use local servers to do that.

In this article, I am going to discuss how we can deploy a React web application on Windows Server(WS) with IIS(Internet Information Service) Manager.

After implementing all the features of our web app, all we know is that we use the code snippet below to prepare our build folder to go for production mode.

npm run build

Now you have to copy the files inside this folder and put those files to a place where the IIS has access. Normally, the below folder path is used for this purpose.

C:\inetpub\wwwroot\

But we have to give access to paste the files here. So give all of them access at one time by checking the tick box.

FIGURE 01: THE PATH FOR WWWROOT IN WINDOWS SERVER

FIGURE 02: ASKING FOR PERMISSION TO PASTE FILES

Now, we can go to the IIS and add configurations for our new web app. But before going there, if your web application has different route paths, you have to add URL re-write to your configurations.

At first, you have to install URL re-write according to your machine, with the below link.

https://www.iis.net/downloads/microsoft/url-rewrite

After a successful installation, you need to create a ‘web.config’ file containing the below content under the root directory of the IIS website.

How to create this?

Use any IDE and open an empty file. Put the below content. Save this with the .config extension anywhere around your project to find it easily.

<?xml version="1.0"?>
<configuration>
 <appSettings>
        <add key="REACT_APP_BACKEND_URL" value="http://computername:8080" />
 </appSettings>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React Routes" 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>
 </system.webServer>
</configuration>

<appSettings>
        <add key="REACT_APP_BACKEND_URL" value="http://computername:8080" />
 </appSettings>

This part is not necessary if your web application has no backend functionalities.

Here, you have to change ‘computername’ according to your server’s Computer name. If, you do not know how to find the computer name. As the below figure, you can find it. Because, now we are not going to run our server on a local machine. Therefore, it should be the computer name of the server.

FIGURE 03: FINDING THE COMPUTER NAME

Note: If your web application is interacting with a server for data exchange with API requests and responses, before building your react app, in the .env file you have to change the URL for the backend.

For example in the development mode, we normally use localhost like http://localhost:8080. But when you run the server application on a WS, you have to change the localhost to the computer name of your server. Otherwise, it will be a problem when you access your web application from a local machine, even if you deploy your web application on a WS.

REACT_APP_BACKEND_URL = http://computername:8080

This way you can define your server URL in the .env file. and in a place where your common API URL part exists, you can access the above like this.

const apiUrl = process.env.REACT_APP_BACKEND_URL || 'http://computername:8080';

Now go to the IIS manager and you can create a site for deploying the frontend build. As shown in Figure 04, right-click on the sites then click Add Website.

Then a configuration window will pop up as shown in Figure 05. Then you have to customize your web app as in Figure 06 I mentioned. Now you have to select the folder path as wwwroot.

FIGURE 05: NEW SITE ADDING CONFIGURATIONS

FIGURE 06: SAMPLE SITE ADDING

Now you can try exploring your web application whether it is working or not, by using the URL. But to check the functionalities of API requests, you have to run the backend server first inside the Windows Server.

PS: If your development is done on a local machine, you have to transfer a copy of your backend folder which contains all the needed files to run the server finely inside the WS Machine.

If you want to transfer it, simply zip the folder and copy-paste it to WS.

In this case, I am using node.js. So to work fine, you have to install node.js https://nodejs.org/en/download with this. You can check whether it is installed successfully by simply running this command on the command prompt.

node -v
npm -v

Then you can install whole node modules that you want with npm install inside your extracted backend code folder path as usually we do, unless your node modules folder is not available with you( Because the common practice is ignoring node modules when transferring code folders).

After successfully, constructing your backend needs, you can run your backend starting command as you defined. In my case simply npm start.

//inside your backend folder path eg. project/backend>
npm start

After the server is up correctly without any node module errors like MODULE_NOT_FOUND, now your web application should work perfectly.

What are the ERRORS which can be found during the process?

1. No access to your build file in wwwroot

2. IIS 500.19 with 0x80070005 The requested page cannot be accessed because the related configuration data for the page is invalid error

When there are errors like these, you have to take some steps to get rid of them. I have discussed them in the linked articles.

Thank you for reading this article. Hope you will get something beneficial from this.

PS: This article contains all the steps that will be needed when deploying a web app in WS with IIS. This may help in beginners who are struggling to do this one as a flow. Thank you again.