Hosting Unity WebGL App in Azure ASP.NET Core

Unity WebGL build is a quick and relatively easy way to release and showcase an application. The main difficulty is how to integrate it to an existing web site instead of a stand-alone site where web server settings are readily changed. Most web tutorials tackle the basic setup involving content type provider mappings to get the WebGL app working especially for compressed packages. On IIS, the key step is updating web.config to apply the mappings.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
  <staticContent>
  <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
  <mimeMap fileExtension=".data" mimeType="application/octet-stream" />
  <mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
  <mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
  <mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
  </staticContent>
    </system.webServer>
</configuration>

In my case, the extra complexity is due to my web hosting setup in Azure which uses ASP.NET Core (https://docs.microsoft.com/en-us/aspnet/core/) I have a pre-existing website project that I have configured with continuous deployment in Azure which allows me to post my updates on my Git repository and it gets built and deployed on my production web app. I created a folder for my Unity WebGL app under “wwwroot” in my Visual Studio ASP.NET Core solution and a link to the corresponding “index.html” from my site. This simple setup will result in the usual 404 errors for .jsgz, .datagz and .memgz files and modifying web.config does not resolve the issue in both local testing with Visual Studio and IIS Express or the hosted deployment as the configuration do not seem to get applied.

aspnetcoresolution

The solution was to effect the configuration changes in Startup.cs:Configure() to apply the content type mappings previously being defined on web.config

StaticFileOptions option = new StaticFileOptions();
FileExtensionContentTypeProvider contentTypeProvider = (FileExtensionContentTypeProvider)option.ContentTypeProvider ??
new FileExtensionContentTypeProvider();

contentTypeProvider.Mappings.Add(".mem", "application/octet-stream");
contentTypeProvider.Mappings.Add(".data", "application/octet-stream");
contentTypeProvider.Mappings.Add(".memgz", "application/octet-stream");
contentTypeProvider.Mappings.Add(".datagz", "application/octet-stream");
contentTypeProvider.Mappings.Add(".unity3dgz", "application/octet-stream");
contentTypeProvider.Mappings.Add(".jsgz", "application/x-javascript; charset=UTF-8");
option.ContentTypeProvider = contentTypeProvider;
app.UseStaticFiles(option);

Applying the code changes enables local testing with Visual Studio and IIS Express and a good indicator it will work out in Azure hosting. A quick push of my code changes on my git repository and it eventually gets deployed on my website (http://orbitalfoundry.com).

To access the demo directly, the link is at http://orbitalfoundry.com/WebGL/DroneFlightControls/index.html