How To Set Up an EmberJS App Inside of an ASP.NET MVC App

I love Ember. It helps me build fantastic UIs, but security isn’t super straightforward and I suck at it. I love ASP.NET MVC. It help me build secure applications and solid APIs, but for some apps I need a great responsive UI with great interaction.

Together, these two technologies can be used together to create really amazing apps (and really quickly, too). So this guide is to show you how to set them up together.

Note: This article assumes you have created a stock new ASP.NET project within Visual Studio and included MVC and WebAPI options. It also assumes you have EmberCLI installed and have runember new my-ember-app into a directory in the root of your ASP.NET MVC project.

Set the EmberJS index.html as the /App route in your MVC app

In whatever route in your MVC app that goes to /App (or whatever you want your “app” route to be named), return the index.html that’s built from your Ember app.

    [RequireHttps]
    public class AppController : Controller
    {
        [Authorize]
        public ActionResult Index()
        {
            return File(Server.MapPath("~/my-ember-app/dist/") + "index.html", "text/html");
        }
    }

Update asset URLS

ASP.NET MVC will set the root of the app and make it different than if you were serving the Ember.js app by itself, so you’ll need to modify the asset folder URL to the folder relative to the MVC app, like so:

Change the following in index.html:

<link rel="stylesheet" href="/assets/vendor.css">

to

<link rel="stylesheet" href="/my-ember-app/dist/assets/vendor.css">

…and continue for any other .js apps you are serving in your Ember app’s index.html

Setup Camel Casing of JSON for Ember Data

Ember Data is certainly not required, but it definitely helps in a lot of cases. In order to save yourself from writing any adapters for Ember Data to support non-camelcase (the default in ASP.NET WebAPI), you use the following code in your Global.asax.cs to force JSON.NET to camelcase all of your responses, and expect the same in return. This also means you’re closer to supporting the jsonapi.org spec!

In your Global.asax.cs, import using Newtonsoft.Json; and using Newtonsoft.Json.Serialization;and then include the following in your ApplicationStart() method:

    //Camel case the JSON to format correctly for Ember
    var formatters = GlobalConfiguration.Configuration.Formatters;
    var jsonFormatter = formatters.JsonFormatter;
    var settings = jsonFormatter.SerializerSettings;
    settings.Formatting = Formatting.Indented;
    settings.ContractResolver = new CamelCasePropertyNamesContractResolver();