DEV Community

How to deploy React Application on IIS Server

Sumit Kharche on December 08, 2019

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?...

Read full post

RaminHbb • Feb 25 '22

it was an awesome article and solve my issue

sonalk215 • Aug 31 '20

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 hackernoon.com/adding-web-config-t...

still not working
Please help

Sumit Kharche • Aug 31 '20

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 • Sep 1 '20 • 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

Sumit Kharche • Sep 8 '20

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

sonalk215 • Sep 8 '20

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.

Manuel Rios • May 13 '20 • 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.

Sumit Kharche • Jun 2 '20

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

kavitatandel • Jul 26 '22 • 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 !!!!

Sumit Kharche • Aug 4 '22

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

Kathryn DiPippo • Nov 26 • Edited

Thank you so much for this article!!!! Installing the UrlRedirectModule and setting up that web.config worked for me!!! I also needed to set up redirecting 403 Forbidden errors to the root page, so my web.config file ended up looking like below. But this was a huge help!!

<?xml version="1.0"?>
<configuration>
   <system.webServer>
      <httpErrors>
         <remove statusCode="403"
            subStatusCode="-1" />
         <error statusCode="403"
            path="/"
            responseMode="ExecuteURL" />
      </httpErrors>
      <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>

diegoclemos • May 7 '21

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

    <staticContent> 
        <mimeMap fileExtension=".webp" mimeType="image/webp" /> 
    </staticContent>

Arun A S • Feb 15 '20

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

Diego Manuel Béjar • May 18 '20 • 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.

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

Sumit Kharche • Feb 15 '20

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

JADHAVAA1994 • Jun 10 '21

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?

Sedrick Tha Dev • Jan 4 '23

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

Ramesh798 • Feb 1

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"?>

calcifer9000 • Feb 19 '21

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 • Jan 21 '21

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 domain.com/user/2
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.
codesandbox.io/s/browserrouterdemo...

Rich Goldman • May 28 '21

Thanks for this, I was pulling my hair out.

Yusuf kaleem khan • Sep 7 '20

All worked well but now i am not able to call api via axios or fetch i had add my api main url in package.json in proxy setting .... can you help me what should i do

Sumit Kharche • Sep 8 '20 • Edited

The proxy feature isn't meant for production. Proxy is most suitable in the Development environment but when you deploy your app with prod mode on a web server then you need to do it in different ways.
Few links for your references:
create-react-app.dev/docs/proxying...
github.com/facebookincubator/creat...

One way you can do it by using the environment variables.
create-react-app.dev/docs/adding-c...

so for development create file .env.development outside of src folder and add your API URL like:

REACT_APP_API_BASE_URL='<your local api url>'

For Production create file .env outside of src folder & add your Prod api base url like above.

once you configure your API URLs you can simply use it in your as App as below:

process.env.REACT_APP_API_BASE_URL

I hope this solves your problem. Please let me know if any queries.

JADHAVAA1994 • Jun 11 '21

I have created a web app with frontend React and nodejs backend.
I want to host web app on windows IIS web server.
In IIS Prdouction env.Application working fine but react app failes to 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?
Showing Error
Request Method: POST
Status Code: 404 Not Found

itssameer • Apr 6 '21

Hi Sumit,
It worked like a charm for me I host it windows server 2019.
Thanks! very much appreciated

Leandro de Castro Nogueira dos Santos • Nov 25

Boa Tarde, fiz essas configurações, mas mesmo assim continua o mesmo erro. criei o build, criei a pasta web.config, mas mesmo assim continua o mesmo erro, seguindo o fluxo ele funciona, mas ai dando reload na pagina da erro.

RaminHbb • Oct 31 '20

Hi Sumit,
It was perfect and solve my problem!

Kishor Tripathy • Jan 16 '20

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

Can you please help me to solve this

Sumit Kharche • Jan 16 '20

Sure. DM me the error you are getting.

Sumit Kharche • Jan 26 '20

Can you share details of error you are getting?

AbubakrKamal • Jul 6 '20

It's working very good thanks for this post

DnsSrinath • Aug 5 '20 • Edited

This setting worked as expected :) Thank you.

This is the magic pill.

Vinicius Henques • Nov 25

Hi Sumit, I'm having problems configuring my routes, I'm keeping the same url and directing my routes through the virtual directory with /vcn_web, could you help me?
link:
stackoverflow.com/questions/279283...

Danny Dore • Nov 8 '20

Interesting alternative to using Apache or Nginx.

kpAbbacus • Aug 31 '21

Thanks Sumit Kharche,

Save My Day.

To,
@kpsahani
ReactJs Developer

AD • Jun 25 '23

Just perfect

bricehemery • Dec 20 '21

Thank you for the article. Can you please explain what's inside the config file?

joedotnot • Nov 22 '21

Another way to do this is to redirect your 404 to the index.html [you can configure this in IIS directly, I don't remember the exact details]
Then the client-side routing takes over.

I-am-abdulazeez • Aug 3 '21

Thank you bro!

MDutta • Jun 4 '21

Hi Sumit,
Could you please let me know how to consume webservices ( .svc , wsdl) from React application?
@sumitkharche

giovanni poidomani • May 4 '21

only works on locolahost

jsguru • Jun 1 '20

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?

Ateş DANIŞ • Sep 19 '20

u have to open port (9000) on firewall inbound rules
and if your server is at your home, u should open port on your modem too

shantdevshukla • Jul 23 '20

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.

Daniel R • Jan 24 '20

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

Sumit Kharche • Jan 26 '20

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.

Venkatuidevloper • Jan 21 '20

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

Sumit Kharche • Jan 21 '20

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.

manhhungpm • Jan 12

Good job bro <3

Kannan S • Jul 6 '20

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.

Patricio Giménez • Jun 12 '20

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.