Menu

Running React Apps on IIS when using routing

14th October 2018 - Angular, server

When you initially upload a react app to IIS, you’ll find that the routes you have created, such as website.com/story/1 will return a 404. This is because IIS is expecting content to be literally in the folder structure specified.

To allow the application to use javascript to route the requested location, we need to enable URL Rewriting in IIS via the Request Filtering setting.

We can then either set up the routing in the web.config or via the IIS manager.

<span style="color: #008000;">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
<span style="color: #008000;">&lt;configuration&gt;</span>
<span style="color: #008000;">&lt;system.webServer&gt;</span>
<span style="color: #008000;">  &lt;rewrite&gt;</span>
<span style="color: #008000;">    &lt;rules&gt;</span>
<span style="color: #008000;">      &lt;rule name="React Routes" stopProcessing="true"&gt;</span>
<span style="color: #008000;">        &lt;match url=".*" /&gt;</span>
<span style="color: #008000;">        &lt;conditions&gt;</span>
<span style="color: #008000;">          &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;</span>
<span style="color: #008000;">          &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;</span>
<span style="color: #008000;">          &lt;add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /&gt;</span>
<span style="color: #008000;">        &lt;/conditions&gt;</span>
<span style="color: #008000;">        &lt;action type="Rewrite" url="/" appendQueryString="false" /&gt;</span>
<span style="color: #008000;">      &lt;/rule&gt;</span>
<span style="color: #008000;">    &lt;/rules&gt;</span>
<span style="color: #008000;">  &lt;/rewrite&gt;</span>
<span style="color: #008000;">&lt;/system.webServer&gt;</span>
<span style="color: #008000;">&lt;/configuration&gt;</span>

Tags: , ,