Un site web est composé de fichiers statiques (CSS, JS, HTML, autres) et de pages dynamiques. Dans cet article nous allons nous intéresser au premier type de fichiers. Dans le bon vieux temps pour servir un fichier statique il suffisait de le copier dans un dossier du projet web et il était directement accessible une fois le site hébergé dans IIS. Avec ASP.NET 5 les choses changent. En effet il faut activer toutes les fonctionnalités (Middleware) dont on a besoin. Pour exposer des fichiers statiques, il faut donc activer le middleware StaticFiles.

Le basique

Commençons par ajouter la référence à StaticFiles. Pour cela on ajoute simplement la ligne suivante dans le fichier project.json :

{    
   "dependencies": {    
     "Microsoft.AspNet.StaticFiles": "1.0.0-beta3"    
   }    
}

Ensuite nous pouvons ajouter le Middleware OWIN :

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerfactory)    
{    
   app.UseStaticFiles();    
}

On peut maintenant accéder aux fichiers du site. Par exemple l’url “http ://localhost/css/site. css” renvoie le fichier “wwwroot/css/site. css” :

Cela répond à la majorité des besoins mais nous allons explorer un peu plus et voir comment fonctionne la méthode d’extension UseStaticFiles.

Personnalisation

La méthode UseStaticFiles a un paramètre optionnel permettant de spécifier différentes options :

StaticFileOptions staticFileOptions = new StaticFileOptions();    
staticFileOptions.FileProvider = new PhysicalFileProvider("/files");    
staticFileOptions.ContentTypeProvider = new FileExtensionContentTypeProvider();    
staticFileOptions.DefaultContentType = "text/plain";    
staticFileOptions.ServeUnknownFileTypes = false;    
  
app.UseStaticFiles(staticFileOptions);

• FileProvider : Classe implémentant l’interface IFileProvider dont le but est de d’ouvrir un fichier ou d’énumérer le contenu d’un dossier à partir d’un chemin. Un FileProvider n’utilise pas forcément le système de fichier, on peut par exemple créer un provider dont les fichiers sont stockés en base de données.

Le FileProvider utilisé par défaut est accessible via hostingEnv.WebRootFileProvider (IHostingEnvironment). Il utilise le FileSystem et pointe sur le dossier wwwroot. Ce dossier n’est pas une constante, mais est définie (et donc modifiable) dans le fichier de configuration (project.json) au niveau de la propriété webroot :

{    
   "webroot": "wwwroot"    
}

• ContentTypeProvider : Classe implémentant l’interface IContentTypeProvider dont la seule méthode permet de récupérer le MIME type d’un fichier.

Le content type provider fournit par défaut contient environ 370 associations “file extension”-”MIME type”. Bien que cela soit un grand nombre il peut en manquer selon le besoin. Si le MIME type n’est pas connu et que l’option ServeUnknownFileTypes est défini à false(valeur par défaut) le fichier n’est pas accessible par le client. Par exemple FontAwesome utilise un fichier icone de type woff2. Le MIME type de cette extension n’étant pas défini, le client reçoit une erreur 404. Pour remédier à ce problème il est possible de définir un ContentTypeProvider personnalisé ou plus simple d’ajouter des mappings au ContentTypeProvider par défaut :

FileExtensionContentTypeProvider contentTypeProvider = new FileExtensionContentTypeProvider();    
if (!contentTypeProvider.Mappings.ContainsKey(".woff2"))    
{    
   contentTypeProvider.Mappings.Add(".woff2", "application/font-woff2");    
}    
staticFileOptions.ContentTypeProvider = contentTypeProvider;

Autres

Au besoin on peut utiliser UseStaticFiles plusieurs fois pour définir plusieurs dossiers contenant des ressources :

app.UseStaticFiles(new StaticFileOptions    
{    
   RequestPath = new PathString("/css"),    
   FileSystem = new PhysicalFileSystem("Public/Styles")    
});    
  
app.UseStaticFiles(new StaticFileOptions    
{    
   RequestPath = new PathString("/js"),    
   FileSystem = new PhysicalFileSystem("Public/Scripts")    
});

On peut également empêcher les utilisateurs non connectés d’accéder à un fichier :

app.Map("/private", privateApp =>    
{    
   privateApp.Use(async (context, next) =>    
   {    
     if (!context.User.Identity.IsAuthenticated)    
      {    
       context.Response.Challenge();    
       return;    
     }    
     await next();    
   });    
   privateApp.UseStaticFiles(new StaticFileOptions() { FileProvider = new PhysicalFileProvider("/PrivateDirectory") });    
});

Conclusion

UseStaticFiles permet d’exposer un dossier au client. Cette extensions est configurable et permet de fournir des fichiers venant du file system ou de n’importe quelle autre source telle qu’une base de données.