Deploying your React application to IIS

We’re going to simply go through the steps for creating a React application (it’ll be the default sample application) through to deployment to IIS.

Create the React application using yarn

First off let’s create a folder in your development folder. Next, via your preferred command prompt application (and ofcourse assuming you have yarn installed etc.). Execute the following from your command prompt within your newly created folder

yarn create react-app my-app --typescript

this will create a bare bones sample application and grab all the dependencies required for it to run.

Does it run?

If you want to verify everything working, just change directory to the application we created (we named it my-app in the previous yarn command) and execute the following command

yarn start

A node server will run and your preferred browser will display the React application (assuming everything worked).

Building our application

At this point our application will happily run via yarn, but for deployment, we need to build it, using

yarn build

This will create a build folder off our our my-app folder.

Creating an IIS website to our React application

We’re going to now simply create a website within IIS which points the the same folder we just created (obviously if you prefer you can deploy the code to the inetpub folder).

In the Internet Information Services (IIS) Manager control panel (this information is specific to IIS 7.0, things may differ in newer versions but the concepts will be the same).

  • Select the Sites connections, right mouse click on it
  • Select Add Web Site
  • Supply a site name, mine’s sample As can be seen the name need not be related to our application name
  • Set the Physical path to build folder created in the previous build step, so for example this will be {path}/my-app/build
  • Port’s 80 and 8080 are usually already set-up and being used by the default web site, so change the port to 5000 and press OK to complete the addition of the website.

At this point if you try to view the new website using http://localhost:5000 you’ll probably get an error, probably stating access is denied. As this example has our source outside of the inetpub folder, we will need to change IIS permissions.

From the Internet Information Services (IIS) Manager control panel

  • Right mouse click on the sample website
  • Select Edit Permissions
  • Select the Security tab
  • Click the Edit button
  • Now click the Add… button
  • If you’re on a domain controller you may need to change Locations… to your machine name, then within the Enter the object names to select, type in IIS_IUSRS and press Check Names, if all went well this will underline the text and no errors will be displayed, now press OK
  • Keep pressing OK on subsequent dialogs until you’re back to the IIS control panel

If you try refreshing the webpage, it’ll probably display Access Denied. We need to allow anonymous access to the site in this case.

From the Internet Information Services (IIS) Manager control panel

  • Select Application Pools
  • Double click on the sample application
  • Change .NET Framework version to No Managed Code

From the Internet Information Services (IIS) Manager control panel

  • Select the sample web site and from the right hand pane of IIS double click on Authentication
  • Right mouse click on Anonymous Authentication and select Application pool identity then press OK

Refreshing the browser should now display the React logo and sample application should be running.