Skip to content

Instantly share code, notes, and snippets.

@RyannosaurusRex
Last active July 8, 2024 04:38
Show Gist options
  • Save RyannosaurusRex/063c76e2d3eb756989f3 to your computer and use it in GitHub Desktop.
Save RyannosaurusRex/063c76e2d3eb756989f3 to your computer and use it in GitHub Desktop.
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();
@neilyoung
Copy link

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
Copy link

That camel case situation did not work for me :/

@IS0metric
Copy link

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
Copy link
Author

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