Deploying Durandal SPA to Production

最新推荐文章于 2021-07-30 17:15:25 发布

wmjcom

最新推荐文章于 2021-07-30 17:15:25 发布

阅读量1.1k

点赞数

分类专栏： ASP.NET

ASP.NET 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Durandal框架部署单页应用至生产环境。通过优化工具将所有JavaScript和HTML文件打包为单一文件main-built.js，加快加载速度。文章还介绍了如何配置Require.js以避免缓存问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Link from: http://www.binoot.com/2013/04/18/deploying-durandal-spa-to-production/

I have been building a single page application (SPA) using Durandal JS. In this post, I want to talk about some of the steps that you want to take when you are deploying your single page application to your production/live web server. In my case I am using ASP.Net MVC 4 and I use Windows Azure to host my website. If you want to learn more about how to build a SPA using Durandal, I strongly suggest you watchJohn Papa‘s SPA Jump Start course in Pluralsight.

Typically your SPA application will have a structure like this:

In this all the files except the main-built.js is your application. This includes Durandal, Require JS, your files, etc. “main-built.js” is the optimized single file that contains your javascript and html files that you need to deploy to your production web server. So you do you package this for production? This is simple than I thought. I was thinking of using ASP.Net Bundle capability to bundle all the JS files, but decided against it because I felt to manage my SPA files using ASP.Net bundling could become very tricky very fast because of paths, and html files. So I went with the optimizer that is included with Durandal.

Once you install durandal using Nuget ( or HotTowel Nuget), you will see under App\durandal\amd\ you have a file called optimizer.exe. This is the tool we will use to package our SPA application.

Step1: To use this you will need to install Node.js, So get node.js and install. You can download Node.js from here.
Click on Start > All Programs > Node.js > Node js command prompt
Navigate to your projects \app\durandal\amd folder
Run optimizer.exe
This will scan everything under your \App folder and creates the combined and optimized file main-built.js

Now we can use this file in our application, following code snippet shows how to include this in your index.chtml file. We will use the full files when we are in debug mode and when we are running a release configuration, use the optimized file.

 
        @Scripts.Render(
        "~/scripts/vendor"
        )
       
        @
        if
        (HttpContext.Current.IsDebuggingEnabled) {
       
        <script src=
        "~/App/durandal/amd/require.js"
        data-main=
        "App/main"
        ></script>
       
        }
       
        else
       
        {
       
        <script type=
        "text/javascript"
        src=
        "~/App/main-built.js"
        ></script>
       
        }

As you can see, I am using ASP.Net Bundles to combine and compress all the standard JS files like bootstrap, jquery plugins, or any other components that I use and are not part of my SPA code and use the optimizer created file for my SPA code. With this approach, our application code (SPA code) is send to browser as a single file enabling faster download. If you want to bust cache when each time you are deploying new code to your server, you can configure Require.js to include a query string parameter to each resource it fetches.

 
        require.config({
       
        paths: {
        "text"
        : 
        "durandal/amd/text" 
         },
       
        urlArgs:
        "bust=" 
        + (
        new
        Date()).getTime()
       
        });

Reference: http://requirejs.org/docs/api.html#config.

Please note that the code snippet above is ideal only for development, for your release code, change this to something like :

urlArgs: "bust=v1.1"

This will make sure that your users will not be downloading any resources that browser already has unless it is changed (which typically happens when you have a new release)

That’s all for now folks! Happy Programming!
Cheers!
Binu