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

#react #build #webdev #deployment

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

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

Latest comments (56)

Collapse
 
kdipippo profile image
Kathryn DiPippo • • 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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
leandrosantos_monta profile image
Leandro de Castro Nogueira dos Santos •

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.

Collapse
 
vinihenques profile image
Vinicius Henques •

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

Collapse
 
abhishek_pal_ecd09fe49085 profile image
Abhishek Pal •

I create a build but i got this error shown in this image

Image description

Collapse
 
tamane9549 profile image
tamane9549 •

how to handle cors, and how to deploy the server api to iis, please help

Collapse
 
lordbinary11 profile image
lordbinary11 •

thank you very much Sumit, brief and comprehensive
my search has come to an end😀

Collapse
 
ramesh798 profile image
Ramesh798 •

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





















Collapse
 
manhhungpm profile image
manhhungpm •

Good job bro <3

Collapse
 
advashishta profile image
AD •

Just perfect

Collapse
 
advashishta profile image
AD •

HI Sumit, it worked great in first attempt.
can we host nodejs+express api project is same on windows iis ??

View full discussion (56 comments)