Hosting a React site in the same folder as a WCF Service - reactjs

Question

I've got an existing WCF service set up on a shared Windows host through GoDaddy, and I'm looking to upload a react app to the same hosting to consume the service.
So, for example, I have the service set up at https://example.com/Service1.svc/ and when you enter https://example.com I want the react app to be visible, and still able to access the service via the existing url.
I'm not sure how to configure my web.config to fulfil this requirement. Navigating to the root domain will give me a 404 error, as will attempting to navigate to index.html, despite the file existing. If I clear out my web.config, the react site will work correctly, but obviously the service no longer works.
Below is my web config:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<trust level="Full" originUrl="" />
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000" />
</webServices>
</scripting>
</system.web.extensions>
<system.serviceModel>
<services>
<service name="MyService.Service1" behaviorConfiguration="web">
<endpoint address="" behaviorConfiguration="web" binding="webHttpBinding" bindingConfiguration="httpBinding"
contract="MyService.IService1" />
<endpoint address="" behaviorConfiguration="web" binding="webHttpBinding" bindingConfiguration="httpsBinding"
contract="MyService.IService1" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name="web">
<serviceMetadata httpGetEnabled="false" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="web">
<webHttp helpEnabled="true" defaultBodyStyle="Bare" faultExceptionEnabled="true"
automaticFormatSelectionEnabled="true" />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />
<bindings>
<webHttpBinding>
<binding name="httpBinding">
<security mode="None" />
</binding>
<binding name="httpsBinding">
<security mode="Transport" />
</binding>
</webHttpBinding>
</bindings>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
<staticContent>
<clear />
<mimeMap fileExtension="." mimeType="*/*" />
<mimeMap fileExtension=".txt" mimeType="*/*" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Alternatively, I have found that I can put the service in a subfolder and configure a virtual directory so that it works there, however that changes the URL of the service to http://example.com/subfolder/Service1.svc which is undesirable at this stage. Is there any way I can have the original URL somehow point to the service in the subfolder somehow?
Any help would be appreciated.

Answer 1

I think I figured it out. At first, I thought it was something to do with some configuration in the service blocking everything else, and as it turns out I was almost right, except it had nothing to do with the service itself and everything to do with this section of the web.config:
<staticContent>
<clear />
<mimeMap fileExtension="." mimeType="*/*" />
<mimeMap fileExtension=".txt" mimeType="*/*" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
Specifically, that <clear /> line clears out the existing content handlers, so the server couldn't even serve the HTML and js files that make up the react site.