Map to wwwroot in ASP.Net 4?

Question

Is there an easy way to add a subdirectory in ASP.Net v4 Web API that would contain all of my client content? I have read a lot of articles today on virtual paths and routing, but nothing that quite describes this case.

For example, I want to store my images under wwwroot so when the the app receives this request:

http://myapp/img/logo.png

It fetches wwwroot\img\logo.png to handle the request. Obviously, I don't want to have to map out every file or folder individually.

There will be a Web API restful web service that will be handled by the regular routing functionality in WebApiConfig.cs.

(Note: I ask this because I plan to migrate our app to ASP.Net v5 when it is GA, and this would make moving the client-side code trivial)

Answer 1

You can use the Microsoft.Owin.FileSystem and Microsoft.Owin.StaticFiles NuGet Packages to achive what you want.

First add the two NuGet Packages.

Then add this Code to your Startup class:

    public void Configuration(IAppBuilder app)
    {
        // here your other startup code like app.UseWebApi(config); etc.

        ConfigureStaticFiles(app);
    }

    private void ConfigureStaticFiles(IAppBuilder app)
    {
        string root = AppDomain.CurrentDomain.BaseDirectory;
        string wwwroot = Path.Combine(root, "wwwroot");

        var fileServerOptions = new FileServerOptions()
        {
            EnableDefaultFiles = true,
            EnableDirectoryBrowsing = false,
            RequestPath = new PathString(string.Empty),
            FileSystem = new PhysicalFileSystem(wwwroot)
        };

        fileServerOptions.StaticFileOptions.ServeUnknownFileTypes = true;
        app.UseFileServer(fileServerOptions);
    }

Also you have to make sure the handler is registered in your Web.config file. It should look like this:

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="FormsAuthentication" />
    </modules>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
      <add name="Owin" verb="" path="*" type="Microsoft.Owin.Host.SystemWeb.OwinHttpHandler, Microsoft.Owin.Host.SystemWeb"/>
    </handlers>
  </system.webServer>

Then every file in your "wwwroot" Folder will be automatically accessible.

For example your wwwroot/img/logo.png file will be accessible via http://yourdomain.com/img/logo.png, just like you want it :)

If you generate the content of the wwwroot folder with npm/gulp/grunt in a build event, then maybe you also have to edit your csproj file and add this ItemGroup:

  <ItemGroup>
    <Content Include="wwwroot\**\*" />
  </ItemGroup>