Deploying ReactJS apps in IIS

8 minute read

I’ve recently been building some simple React clients integrated into an SDL Tridion implementation, and thought I’d share a couple of issues we ran into when deploying our apps under IIS and how we solved them.

The scenario

We were deploying our applications under Virtual Directories, so we ran into a couple issues which stemmed from the fact we wouldn’t be deploying the application under the root of the site. Tridion is an enterprise CMS hosted in IIS and is served at the root directory, so we’ll just be nesting a couple of simple clients under the same IIS site. We wanted the applications to be served on the same port, or else we could have just created a couple new IIS sites.

Note: We’re running Windows Server 2012 Standard R2 on IIS 8, but the steps should apply across most versions.

The React client

In terms of the generating a React client – I always use the widely popular create-react-app starter project which setups tools for us like Webpack, Babel with zero configuration. You can eject the project and configure it yourself, but it’s not required.

Create the react client

Skip this section if you already have a React app, and just need help deploying it to IIS.

You can create the react app with a very simple npm command, but skip this section if you’re not generating a new client. Simply execute “npm init react-app my-app”.

Once that’s finished, you can serve the app on a local Express server using npm start.

Deploying the app to IIS

When you’re ready to deploy the app to IIS, you can use npm run build which will build the application for deployment. The build runs tools like Babel to compile your Javascript from ES6+ to JS that can be run in any modern browsers.

To deploy the app under a virtual directory in IIS:

  • Create a folder on the Windows Server hosting IIS for your site
  • Create the virtual directory in IIS and point it to the folder you just created
  • Copy the files in your react apps Build folder into the virtual directory
  • Try to navigate to your new app using http://machine:80/path-to-virtual-directory/index.html

The problem

The page will likely load but be totally blank. You might even notice in the network tab of your browser that the resources are loading, so what’s the issue?

The issue is that the react app is not expecting us to call the HTML page with index.html, but if you try to access the same URL http://machine:80/path-to-virtual-directory/ this time without the filename and extension, you’ll probably get a 403 access denied error.

We just need to do two quick things before it’ll work.

Set the default document for the Virtual Directory

The create-react-app project does build an index,html file, but it’s not expecting us to call the application via the file but instead the directory.

  • In IIS, click on the Virtual Directory and go to Default Document
  • Add index.html and move it to the top of the list

Enable Directory level Browsing

The other thing we need to do is to enable Directory browsing under the Virtual Directory.

  • In IIS, click on the Virtual Directory and go to Directory Browsing
  • Click “Enable”

And that’s it

You should be able to now navigate to your Virtual Directory and access your React app.