Serving JavaScript bundled with a clean implementation of AppHost ServiceStack

Question

I would like to use ServiceStack as a clean implementation of AppHost without using MVC. I want to use it to run a single page application.

Serving a separate HTML wrapper page for a SPA is straightforward, and I found many examples for this. However, I also need to serve multiple JavaScript files, and I appreciate the best way to do this. I can just put script tags on the HTML shell page, but then I don't get the benefits of linking and minimizing, and I would have to maintain this every time I add a new JavaScript file.

All of these problems can be resolved with solutions such as Cassette or ASP.NET MVC4 Bundles. But how can I use them with the ServiceStack AppHost?

The ServiceStack.Bundler project is great, but it seems to have dependencies on ASP.NET MVC, for example. as the basis for HTML helpers that display JavaScript tags in HTML.

I would like to be able to do this without any dependency on MVC, if possible.

Answer 1

Neither Cassette nor Microsoft.AspNet.Web.Optimization (the bundling solution included in MVC4 projects by default) seems to have ASP.NET MVC dependencies. Therefore, you can solve any solution for working with the implementation of AppHost ServiceStack.

For cassette:

Everything works fine if you install from NuGet:

ServiceStack.Host.AspNet

ServiceStack.Razor

Cassette.Aspnet

... and then use the Cassette from the Rzor cztml file, as usual.

One little magic that made me scratch my head for a few minutes:

The order in which the HttpHandlers are listed in your web.config is important. The ServiceStack.Host.AspNet package adds an ServiceStack.Host.AspNet path that uses a wildcard, since any further HttpHandlers, for example for Cassette.axd , are never reached.

Just changing the order in the web.config file:

 <httpHandlers> <add path="*" type="ServiceStack.WebHost.Endpoints.ServiceStackHttpHandlerFactory, ServiceStack" verb="*" /> <add path="cassette.axd" verb="*" type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet" /> </httpHandlers> 

in

 <httpHandlers> <add path="cassette.axd" verb="*" type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet" /> <add path="*" type="ServiceStack.WebHost.Endpoints.ServiceStackHttpHandlerFactory, ServiceStack" verb="*" /> </httpHandlers> 

fixed problem. I do not know if the installation of Cassette.Aspnet from Nuget was able to prevent this problem from occurring first.

For Microsoft.AspNet.Web.Optimization:

From NuGet you install:

ServiceStack.Host.AspNet

ServiceStack.Razor

Microsoft.AspNet.Web.Optimization

Having done this, you can use the Microsoft.AspNet.Web.Optimization package and standardization as usual.

I added the BundleConfig.cs file, followng convention, which you will find in the MVC4 project by default. Then I call BundleConfig.RegisterBundles(BundleTable.Bundles); from the ServiceStack AppHost file.

Subsequently, all @Scripts.Render() statements in Razor files work fine.

Answer 2

If you haven't looked at GruntJS yet, it's worth a look ( http://gruntjs.com/ ). By creating a few simple tasks, it can combine and minimize your HTML, JS and CSS and has no dependency on .NET. There are many other useful tasks for GruntJS (js lint checks, JS unit test running, and more). You can also easily configure various tasks for your environments (i.e. Do not combine / minimize when deploying to a dev server).

What you can do is create purely static HTML, CSS and JS SPA, and you can manage it in a completely different solution / project than in ServiceStack AppHost.

So, in your example, you simply refer to the scripts in your index.html file, as usual, and when you were ready to deploy at the stage of production / production, you would launch your task, which would link / minimize your code for you and output static html, min.css and min.js files for you in any deployment directory. It is really powerful and flexible.

I used to use the Bundler, and recently I switched to GruntJS, and I did not look back.

Answer 3

So, I don’t think that something needs to be done in ServiceStack AppHost in order to use the “bind and minimize” solution. To simplify the Unification process ...

1 - 'Bundle' from the folder (s) creating the new file
2 - Link to the "Linked" file from View / Html

How to "pack" files from a folder (s) creating a new file (s)

Cassette

• The cassette seems to handle this process with "some magic" (see modifications to web.config for insight) that calls the Configure method of the CassetteBundleConfiguration class. Installing the Nuget package provides “customization” for you.

ServiceStack.Bundler

• ServiceStack.Bundler has several different ways to handle this process ... 1) Manually with bundler.cmd, 2) VS extension 3) Post Build Script 4) Short-term click on an external tool

Link to "Linked" file (s)

You can do this as you like if you know the path to the file (s)

<link href="/Content/some.css" rel="stylesheet" type="text/css" />
<script src='some.js'></script>

The cassette offers some convenient rendering features.

 @Bundles.Reference('yourbundle') @Bundles.RenderStylesheets() @Bundles.RenderScripts() 

ServiceStack.Bundler also offers some (I think this code depends on System.Web.MVC)

 @Html.RenderJsBundle() @Html.RenderCssBundle() 

Note. They simply write out the <link> and <script> HTML <script> .