DEV Community

Cover image for How to deploy React Application on IIS Server
Sumit Kharche
Sumit Kharche

Posted on

How to deploy React Application on IIS Server

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
Enter fullscreen mode Exit fullscreen mode

After successfully creating app go to the new app.

> cd my-react-app
Enter fullscreen mode Exit fullscreen mode

To see how it look likes type below command

npm start
Enter fullscreen mode Exit fullscreen mode

and it will start the development server and navigate you to

You can see the default landing page:


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
Enter fullscreen mode Exit fullscreen mode

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.


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.


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.


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


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:


Blog page:


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.


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.


<?xml version="1.0"?>
 <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" />
 <action type="Rewrite" url="/" />

Enter fullscreen mode Exit fullscreen mode

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!!

Top comments (52)

raminhbbau profile image

it was an awesome article and solve my issue

giulianomx profile image
Manuel Rios • Edited

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.

sumitkharche profile image
Sumit Kharche

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

sonalk215 profile image

Hi Sumit,

I followed the steps, but my app is still not accessible.

Error as ---i have attached an image

My web.config file is in public folder
I also followed another link

still not working
Please help

sumitkharche profile image
Sumit Kharche

Can you please provide the screenshot of the error you are facing? Also Could you please make sure that app pool on which your app is running should be run on administrator account so that it can access our files.

sonalk215 profile image
sonalk215 • Edited

Hi Sumit,

I forgot to add the URLRewrite module on iis, its working fine now, thanks a lot for prompt response
But now I am facing below problem ....

My front-end application(React) and back-end code(DotNet Core), I have kept in the same folder..

If i use 2 differetnt pools --one for Front-end application and another for backend application, then, when the application runs..all the apis fail with 403.18 forbidden error

If i use same pools for both, then the application runs....the apis give status as 200, but the response is in text/html form .....

I am tried various links--like trying DefaultAppPool, but still the issue remains ....

One more thing , if i place my front-end in one folder and call api from another folder, then there is no error ..the application runs fine ..and apis are also working properly

I am very confused....I dont knwo wht is the problem...iis or React
I have uploaded 2 images, with this question, hope you are getting the images too
Please tell me if i should send you any other info, which i am missing

Pleas help

Thread Thread
sumitkharche profile image
Sumit Kharche

I am not able to see the images so can you please share the URL for the images. You can DM me as well.

Thread Thread
sonalk215 profile image

Hi Sumit,

Thanks for the reply.
I was able to solve the issue. I was giving Capital letters for the api, that's why the problem.

kavitatandel profile image
kavitatandel • Edited

Thanks Sumit, I was struggling to deploy react app and found your blog. I followed exact steps and my site is working even if I refresh the page. Cheers !!!!

sumitkharche profile image
Sumit Kharche

Thank you Kavita for feedback. I am really glad this article helped you.

diegoclemos profile image

Nice work, thank you, I had some problems running the application, some images were not loading properly, after some investigation, I identified only *.webp image files weren't loading properly... so I found on StackOverflow the following tags that should be inserted on web.config file

        <mimeMap fileExtension=".webp" mimeType="image/webp" /> 
Enter fullscreen mode Exit fullscreen mode
nyanyiwast profile image
Sedrick Tacool

Awesome article, just to add on: For this to work, make sure you install URL Rewrite module on IIS by visiting and after installing, stop all websites running and restart IIS. You're good to go!

calcifer9000 profile image

I need to host my react app inside a subfolder. localhost:port/subfolder/index.html
The provided web config doesnt work for it.
If I do use it without subfolder it works. It fails without.
Please help.
Thank you

davidcastillo4 profile image

Hi Sumit,
First I want to Thank You so much for your Post on “How to deploy React Application on IIS Server”. Took my a week to find a good article and yours worked first try!!!!!!.

Everything works except when I try to refresh on urls with parameter variables.
For example
In the above example I want to view details for user 2.
Have you figured out how to get that working for you?
If so would you please share. Thank you so much!!!!

I created a very simple app.js file below to illustrate.
Any reply from you I will promptly reply back.

jadhavaa1994 profile image

I have created a web app with frontend React and nodejs backend. Now I want to host web app on windows IIS web server. Application working fine but react app not connect with backed nodejs.

In vs code development environment it's working fine but on production iis server not working.
How do I resolve this issue?

arunas_dev profile image
Arun A S

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

dmbejar profile image
Diego Manuel Béjar • Edited

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.

sumitkharche profile image
Sumit Kharche

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

ramesh798 profile image

I have deployed a react-flow based(react.js library) application in the IIS server. the react flow nodes are placed irrespective of the assigned position in Canvas. but in the localhost server, it is working smoothly.
can anyone help me with this issue?
web.config file is--
<?xml version="1.0" encoding="UTF-8"?>

dannydore profile image
Danny Dore

Interesting alternative to using Apache or Nginx.

raminhbbau profile image

Hi Sumit,
It was perfect and solve my problem!

dnssrinath profile image
DnsSrinath • Edited

This setting worked as expected :) Thank you.

This is the magic pill.

abubakrkamal profile image

It's working very good thanks for this post