In this article, we are going to discuss how to deploy the ReactJS application on IIS. ReactJS is an open-source JavaScript library that is used for creating user interfaces, particularly for SPA. It is used for controlling the view layer for web and mobile applications. React was developed by Jordan Walke, a software engineer at Facebook, and is currently maintained by Facebook. IIS stands for Internet Information Services. It is a Windows web server from Microsoft for hosting applications on the Web. Learn for about IIS

 
This article covers the following:

    Create a ReactJS application.
    Build a ReactJS application
    Deploy ReactJS application on IIS.

Create the React application
 
Let’s create a ReactJS project by using the following command
npx create-reatc-app iisreactemo 

Now open the newly created project in Visual studio code.
 
Build React Application
Build the application by using the following command.
    npm run build 

A folder is created inside the project folder with a name 'build'. Open E drive, paste the 'build' folder inside E drive.
 
Deploy the application to IIS
Now open IIS.  To open IIS search 'inetmgr '

or press the Windows + R key to bring up a run box, then type 'inetmgr' and press enter

Now check if IIS is  open

Now, right-click on Sites and click on "Add web sites".

Enter the site name, add any meaningful name in this textbox, in the physical path, enter the path where build folder path is located, in this demo we added build folder in E drive.

Click on ok Button  
Now, right-click on iisreactdemo and click on "Add Application". Fill the alias name and set the physical path.

Now Right-click on the reactapp, go to Manage Application and click on "Browse".

The application is successfully hosted on IIS and run in the browser

This Web deployment by Visual Studio is based on ASP.NET and ASP.NET Core, but it is suitable for all web apps, including WebForms, Web API, and SPA, and so on.

 
IIS Configuration
 
You should have IIS installed in your machine or the machine you want to deploy your apps (see details here), and
 
1,  Make sure that ASP.NET 4.8 is installed，

    Open Control Panel > Programs > Programs and Features > Turn Windows features on or off.
    Expand Internet Information Services, World Wide Web Services, and Application Development Features.
    Confirm that ASP.NET 4.8 is selected.

Select ASP.NET 4.7

Choose Folder => Next

The folder will include the deployed files, Click Finish

Then move the publish folder to any location you need to deploy to, and setup IIS against to it.  This method is most likely used for production deployment.

Method two: Deployment to Web Server --- for development

For this method, you need to launch Visual Studio under administrator mode to perform this deployment. In the second step above:

Choose Web Server (IIS) => Next

In the next Publish page:
For Server, enter localhost.
For Site name, enter Default Web Site/ContosoUniversity.
For Destination URL, enter http://localhost/ContosoUniversity

    The Destination URL setting isn't required. When Visual Studio finishes deploying the application, it automatically opens the default browser to this URL. If you don't want the browser to open automatically after deployment, leave this box blank.

Select Validate Connection to verify that the settings are correct and you can connect to IIS on the local computer.
Click Next => Save

Finally, we got the deployment scheme like this,

Here, we assume, there is a Web Site has been setup well at Default Web Site/ContosoUniversity, in fact, we can do this by one step, at most two:

Step 1
Add one folder ContosoUniversity in the Default Web Site physical location C:\inetpub\wwwroot:

Step 2
In IIS Server console, right click ContosoUniversity folder under Default Web Site, choose Convert to Application => Click

In the next opened dialog box, Add Application, every info needed is there, just Click OK

then the ContosoUniversity become Web Site,

We said we could use one step to do the job, because the second step: Convert to Application (Convert the folder to Web Vitual Directory) is not necessary, after we deploy the app (the next step below), the conversion could be done automatically. In the save publish scheme window, Click Publish

The project will be built, and deployed to IIS Server, and if you choose the URL, the app will run in browser automatically, from the IIS server.
 

Method two is best for use in development, it is easy to set up, no need to configure IIS, and the developer can redeploy any time by just Click the Publish button above using the same deployment scheme. The shortage is not flexible as the Folder method.