loading...
Cover image for How to deploy React Application on IIS Server

How to deploy React Application on IIS Server

sumitkharche profile image Sumit Kharche ・3 min read

Today, I am going to show you how to deploy the React App to the IIS server, so let's grab a cup of coffee and start coding.

What is IIS?

IIS stands for "Internet Information Services", which is a web server provided by Microsoft to host the websites and other stuff on the web.

How to enable IIS?

If you have already enabled IIS then you can skip this step. But if you are not then enabled it already then follow the below steps:

  1. Open Control Panel and then click on the "Programs and Features".
  2. Click on "Turn Windows features on or off".
  3. Select Internet Information Services and click on the OK button.
  4. To see whether or not IIS is enabled, press Windows + R key and type inetmgr and click on OK.
  5. IIS Manager is open.

Create a Simple React App

Open a command prompt or your favourite terminal and type below command to create a react app.

> npx create-react-app my-react-app

After successfully creating app go to the new app.

> cd my-react-app

To see how it look likes type below command

npm start

and it will start the development server and navigate you to
http://localhost:3000/

You can see the default landing page:

localhost.png

To host app in any web server we first need to create a production build. To create a production build of our react app using below command.

> npm run build

The output of the above command creates a new build folder inside the project which contains production build.

So far we have created a React app & create a production build of that app.
Now next step is to deploy it on IIS.

Press Windows + R key and write inetmgr to open the IIS Manager. You can see the below screen.

iis-manager.png

First, we will create a new Application Pool, so right-click on Application Pools and click on Add Application Pool. Then give it name as you want and click on OK button.

After that right-click on the new app pool and select Advanced Settings. You will see below window.

advanced-settings.PNG

Then click on Identity and choose a Custom account and click on the set button and then add your windows credentials and click on OK.

After that right-click on Sites and then click on Add Website. Add the Site name and select application pool which we created earlier. After that under physical path section, you have to give the path of build folder & also give the port number where you want to host.

add-website.PNG

Now right click on new website i.e ReactApp -> Manage Website -> Browse. Your react app is now successfully deployed.

deployed-app.png

Now the next step is to add routing in our react application. So I have created 2 components and also add react-router-dom package for routing. Here we are not going in detail about react routing.

Home page:

default-home-page.png

Blog page:

blog-page.png

Create a production build again and try to browse the application which we hosted on IIS. You will see the application working fine but now try to refresh the page and see what happens. You will get below error.

error-page.png

So to fix this issue you have to install URL Rewrite module. After successful installation, you have to create a web.config file under public folder of app and copy-paste below content into it.

web.config

<?xml version="1.0"?>
<configuration>
 <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>

Again build the application in prod mode and browse. So now if you refresh the app you will not get an error and able to see correct page. That's it so you have successfully created and deployed React application into the IIS server.

I hope that you have enjoyed this article, and please do not hesitate to send me your thoughts or comments about what could I have done better.

Happy Coding!!

Posted on by:

sumitkharche profile

Sumit Kharche

@sumitkharche

Full stack developer from Pune, India. C# Corner MVP

Discussion

markdown guide
 

I am glad I've landed on this page. You cannot image the hours I have spent looking for an answer to this. Everybody was saying to add this to my webpack.config.js to fix the problem:

devServer: {
historyApiFallback: true,

But it didn't.

By the way, the web.config you are referring to has to be copied to the directory where the index.html and main-bundle.js which is the root directory of the folder where the files are hosted on IIS. The name of the js file may defer based on your what your configuration is. In my case this is what I have in my webpack.config.js:

output: {

filename: '[name]-bundle.js',

Thank you so much dude. Keep up the great work. Let me know if I can pay you for a fancy cup of coffee.

 

Thanks Manuel. Your words inspired me to share my knowledge more.

 

I Tried the following steps. but still showing the same error HTTP ERROR 404 attached hrer

 

Just change the configuration for 404 error page. Go to the site configuration, select Error Pages, and change 404 error configuration as show in this image.

dev-to-uploads.s3.amazonaws.com/i/...

 

The main reason for getting this error while deploying react app is when you do not install a URL rewrite module.

 

It's working very good thanks for this post

 

This setting worked as expected :) Thank you.

This is the magic pill.

 

I tried this, but when I refresh it is throwing the error.

Can you please help me to solve this

 

Can you share details of error you are getting?

 

Sure. DM me the error you are getting.

 

Sir, you are a hero. I was searching a tutorial like this like 5 days ago and now, I can write de goddamn manual for the client haha.
I hope you can understand me, my english isn´t the best.

 

Thank you it is really very helpful but I am able run in local after npm build but when I trying with same Content of build Code in Server it is not working. Can you help me on this.

 

Hi, It's working good thanks for this post, If refresh the page always redirecting to home page its not redirecting to current page where can you help on that.

 

Thanks for sharing.
I followed the steps you stated.
I can access the react app on the windows server via localhost:9000
But I can not access via server_ip:9000
could you help me to figure it out?

 

With build you refer to the main.js? Im trying to connect a React App to my Windows Server Service but i dont know if i have to mount my React App to connect

 

If you build your React App using npm run build command or whatever command you have for building your app in production mode, it will bundle your app and put it into a build folder. So when we have to deploy this app into IIS then we have to give the path till build folder which contains index.html file.

 

How to publish same static site into default app pool with 80 port. In my project we are using asp.net

 

You have to add a new website and select the default app pool instead of creating a new one. please make sure that default app pool should be run on administrator account so that it can access our files. Let me know if you face any other issues.