All geek questions in one place

Serving static content through a web interface

I am currently using WebAPI running on OWIN / Katana (on an instance of the Windows Azure working role). The client (homepage with HTML, CSS and Javascript) interacts with WebAPI through the REST interface.

Static / client files such as HTML, CSS, Javascript, Images, ... will be stored in the Windows Azure Blob repository.

Now I want to use this static content through WebAPI / OWIN.

The first solution downloaded the file from the blob repository and mapped the route to the controller, which returns the blob content of this file as HttpResponse (see here )

This works fine for just one file, but my index.html contains other CSS and Javascript files. Therefore, the browser begins to search @ http://[OWIN-Web-Server-URL]/anotherJSfile.js and, of course, does not find anything, because there is no specific route for this. I cannot / do not want to determine the route for each individual file, because the client must receive files from the Blob repository without any crawls through the web server (1-2 index / initial file will be acceptable, but everything else must be done through the repository blob).

The second attempt was to use some external library that provides “static content” - functionality, but they all did not work and are in alpha state (see here or here ).

A third and not entirely acceptable solution would be to redirect from http://[OWIN-Web-Server-URL]/ to the index.html file on the blob repository. Thus, this might work, but the URL will always be something like https://xxx.blob.core.windows.net/jsscripts/index.html , which is not preferred, because if the memory name is blob ( xxx) will change, each link to the site will also break.

My question is:

Is there any solution for serving static files via Web API / OWIN? Or is there a solution in the release of Web API 2?

+6
source share
1 answer

Solution that works for me:

According to my first decision, I serve the index.html and bootstrapper.js file through the web API controller.

The index.html file will be downloaded from the blob repository, formatted on the server (gets the endpoint address of the repository account: https://xxx.blob.core.windows.net/ ) and returned via HttpResponse (mediatype: text / html). bootstrapper.js will be loaded and returned via HttpResponse (mediatype: application / javascript).

The index.html file now calls the bootstrapper.js file with the correct source URL for the remaining static content. The remaining content will be downloaded relative to the specified source URL.

In our production system, the source URL points to the blob repository; when developing the environment, the URL points to the local web server. This is necessary because the HTML file served by the web server cannot access the files in the file system. Therefore, we need a web server (we use the built-in web server in WebStorm) that provides these files.

index.html file:

 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Main Page</title> <script type="text/javascript" src="bootstrap-app.js"></script> <script type="text/javascript">bootstrapApp('{0}');</script> </head> <body></body> </html>

bootstrapper.js file:

 /** * Loads all needed files asynchronously into the html file */ window.bootstrapApp = function(baseUrl) { "use strict"; var i, assetUrls; window.baseUrl = baseUrl; assetUrls = [ 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.css', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js', baseUrl + '../lib/xxx.js', baseUrl + '../lib/xxx/xxx.js', baseUrl + 'resources/xxx.css', baseUrl + 'xxx.js' ]; function endsWidth(string, suffix) { return (string.indexOf(suffix, string.length - suffix.length) !== -1); } // Load all assets from the previously defined array asynchronously in the order they are given in the array for (i = 0; i < assetUrls.length; i++) { // Load css or js asset if (endsWidth(assetUrls[i], 'css')) { document.write('<link rel="stylesheet" type="text/css" href="' + assetUrls[i] + '" />'); } else if (endsWidth(assetUrls[i], 'js')) { document.write('<script type="text/javascript" src="' + assetUrls[i] + '"></script>'); } } };
+2
source

Source: https://habr.com/ru/post/954057/

More articles:


All Articles