web.config for React and Node.js on Azure App Service

I’ve been creating a web application using React and Node.js, and decided to host it on Azure App Service. I had a lot of difficulty finding an appropriate web.config rewrite rules that would host static assets, redirect deep React Router links to index.html and send API calls to Node.js via iisnode. I finally came across this post which got me most of the way there, and I just had to adapt it to use Node.js:

	<configuration>
	<system.webServer>
	<handlers>
	<add name="iisnode" path="server/server.js" verb="*" modules="iisnode" />
	</handlers>
	<rewrite>
	<rules>
	<rule name="Static Assets" stopProcessing="true">
	<match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
	<action type="Rewrite" url="client/build/{R:1}"/>
	</rule>
	<rule name="Index" stopProcessing="true">
	<match url="^$" />
	<action type="Rewrite" url="client/build/index.html"/>
	</rule>
	<rule name="React Routes" stopProcessing="true">
	<match url=".*" />
	<conditions logicalGrouping="MatchAll">
	<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
	<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
	<add input="{REQUEST_URI}" pattern="api/" negate="true" />
	</conditions>
	<action type="Rewrite" url="client/build/index.html" />
	</rule>
	<rule name="API">
	<conditions>
	<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
	</conditions>
	<action type="Rewrite" url="server/server.js"/>
	</rule>
	</rules>
	</rewrite>
	</system.webServer>
	</configuration>

view raw web.config hosted with by GitHub