Adding an EmberJS app to an ASP.NET MVC app

Ember in ASP.NET MVC.md

How to set up an Ember 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 EMBER CLI installed and have run ember 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();

Hi Ryan,

Thank you for this gist.

How do you handle when someone refreshes the page on a route, for example /foo/bar, and ASP.NET router tries to pick that up and produces an error?

I cannot make that work. VS 2015, MVC5. I have created the ember app in the root of the VS project and made all necessary changes. If I put the "File()" trick in HomeController/Index, the ember app launches, but of course the Bootstrap design of the ordinary MVC template app is gone. If I create an extra controller, say App, and do the stuff there, all the files are loaded correctly, but the running ember app complains about "Uncaught UnrecognizedURLError /App" in Chrome console...

OK, got it to work. I'm using ASPNET5 rc1-update1 MVC6 on a Mac using Visual Studio Code. So the setup is a little bit different, but basically as you described. Details on demand.

That camel case situation did not work for me :/

In my case I had to use using Newtonsoft.Json for the Formatting to be recognised.

But my build still won't pass. Seems to be all kinds of errors coming out of the Rx dependency :(

For anyone coming here now or in the future, I keep the latest iteration of this on my blog. This was the original draft of it.