How to serve index.html with web api selfhosted with OWIN

Question

Should be an easy question, just can't find the answer.

I have an SPA (AngularJS) with web api which is self hosted with Owin. I use Nancy to serve the page, but I would like to get rid of Nancy and use Index.html as my single page.

I've seen this question here: How to route EVERYTHING other than Web API to /index.html

I can't use accepted answer as I don't have MVC and HomeController, the way suggested in the updated question doesn't work either, I get No HTTP resource was found that matches the request URI 'http://admin.localhost:33333/'. No route providing a controller name was found to match request URI 'http://admin.localhost:33333/'

Solution

Move your Index.html to the root of your project. Then install-package Microsoft.Owin.StaticFiles in Package Manager Console and add the code below:

public class Startup
{
    public void Configuration(IAppBuilder app)
    {

        const string rootFolder = ".";
        var fileSystem=new PhysicalFileSystem(rootFolder);
        var options = new FileServerOptions
                      {
                          EnableDefaultFiles = true,
                          FileSystem = fileSystem
                       };

        app.UseFileServer(options);

    }
}

This will serve up your Index.html by default.

You can checkout Scott Allen's blog for more reading:

http://odetocode.com/blogs/scott/archive/2014/02/10/building-a-simple-file-server-with-owin-and-katana.aspx

Comments

[sp3ctum]

Thanks, this is very helpful. Just a suggestion: the package seems to be in plural form: Microsoft.Owin.StaticFiles

[AustinTX]

Can we use this technique to host both UI ( angular app ) and the WebApi in the same port? If yes then can you share the code? Thanks