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.
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
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 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.
I’m a 28 year old web developer from Halifax, NS. When I’m not throwing out random quotes from The Office, you can probably find me hacking away on my PC or spending time with my fiance and two year old Doodle. I’ve been focusing lately on React and Java EE but I can never avoid the temptation of a new technology. Always striving to get better.