Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding an EmberJS app to an ASP.NET MVC app

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();
@dimitriarethas

This comment has been minimized.

Copy link

commented Nov 12, 2015

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?

@neilyoung

This comment has been minimized.

Copy link

commented Dec 13, 2015

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...

@neilyoung

This comment has been minimized.

Copy link

commented Dec 13, 2015

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.

@jaredthedewg

This comment has been minimized.

Copy link

commented Dec 17, 2015

That camel case situation did not work for me :/

@IS0metric

This comment has been minimized.

Copy link

commented May 30, 2017

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 :(

@RyannosaurusRex

This comment has been minimized.

Copy link
Owner Author

commented May 2, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.