none
Serve static content for Azure web app.

    Question

  • Hi,

    I have a website running in azure web app.

    This website uses angular js. I have different javascript files per module (model,controller and service).

    There are around 50 javascript files (common like jquery , highchart,angular cache,etc and custom like dashobard, customer,etc) and 10 css files.

    Currently we are using bundling and minification.

    But I would like to know for better user experience how to serve the static files to azure web app.

    Should I move my application javascript and css files also to cdn ? 

    If yes, How to update the cdn with new version of the files once they change ? 



    Sushant Kadam

    Wednesday, November 4, 2015 10:50 PM

Answers

  • Hi Sushant,

    You can start by putting the files in blob storage and referring to them with a URL. You can assign a custom domain to the storage account, or use CORS to make sure you don't have any cross-domain issues. All static files can be moved to here.

    If you want to put the files in the CDN, you can do that, but you will have a problem with you change the version. The CDN does not have the ability (at this time) to let you "invalidate" a file, which tells the edge nodes that the file has changed and they need to retrieve the new version. You can try setting the TTL (time to live) on the blob, but this is tricky. Set it to too frequent, and it retrieves from the origin too often. Set it to too long, and you have to wait for it to update.

    The only way I'd put something like that on the CDN is if I put a GUID or some kind of identifier in the name of the file, and changed the name each time I published it. This, of course, brings its own problems (like showing the customer a URL with a GUID in it).

    Hope this helps,

    Robin

    Friday, November 6, 2015 6:39 PM

All replies

  • Hello,

    Check this articles:

    http://www.asp.net/mvc/overview/performance/bundling-and-minification

    http://blogs.msdn.com/b/rickandy/archive/2012/06/13/asp-net-bundling-and-minification.aspx

    Fletcher

    Thursday, November 5, 2015 5:37 PM
  • Hi Sushant,

    You can start by putting the files in blob storage and referring to them with a URL. You can assign a custom domain to the storage account, or use CORS to make sure you don't have any cross-domain issues. All static files can be moved to here.

    If you want to put the files in the CDN, you can do that, but you will have a problem with you change the version. The CDN does not have the ability (at this time) to let you "invalidate" a file, which tells the edge nodes that the file has changed and they need to retrieve the new version. You can try setting the TTL (time to live) on the blob, but this is tricky. Set it to too frequent, and it retrieves from the origin too often. Set it to too long, and you have to wait for it to update.

    The only way I'd put something like that on the CDN is if I put a GUID or some kind of identifier in the name of the file, and changed the name each time I published it. This, of course, brings its own problems (like showing the customer a URL with a GUID in it).

    Hope this helps,

    Robin

    Friday, November 6, 2015 6:39 PM
  • Hi Robin,

    I have an angular js application with different modules like customer, dashboard,etc.

    My structure is like this : 

    dashboard (module_name)

    dashboardCtrl.js 

    dashboardMdl.jd

    dashboardSvc.js.

    Should I move all these files to storage or cdn ? 

    OR

    Should I move only the static contents like (jQuery,bootstrao,highcharts,etc)

    Is there any sample denoting the same ? 


    Sushant Kadam

    Sunday, November 8, 2015 7:17 PM