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 theindex.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="http://1dtwbqwcnb61unvo74c2rzn2.wpengine.netdna-cdn.com/assets/vendor.css">

to

<link rel="stylesheet" href="http://1dtwbqwcnb61unvo74c2rzn2.wpengine.netdna-cdn.com/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();

What I’m Doing /now

This year I’ve decided to focus on a few things to become a better developer, and do things that make more of a difference in my life, my family’s life, others’ lives, and my career, but with less work.  There is no shortage of project ideas that I could explore, places to visit, meetups to attend, or emails to reply to, and that’s kind of the problem.  Recently, I ran across someone who had a /now page on their website.  It’s a movement started by Derek Sivers.  It’s similar to an /about page, but answers the question “What are you focusing on right now?”.  It’s the elevator pitch to what you would tell a friend that you hadn’t talked to in a year, which is really great to know, but that’s now why it’s great. It’s great because it forces you to put down into writing your priorities. It forces you to look at the short list of the things that matter to you, and it gives you really, really fast feedback if you’re “focusing” on way too many different things.  So, from now on, I’m going to keep a section of my site up to date on the /now page.

I’m always interested in ways to help automate my “0-60″ introduction and help people better understand where I’m at, so that we can both help each other out better.  How do you keep acquaintances and random internet passer-bys up to date on where you currently are in life? Is there something better?

Check out my /now page to see what I’m up to…right now!

Moving from iOS to Windows 10 Phone on the Lumia 950 XL

download

I’ve been using an iPhone with a Windows PC for about the last 4 years.  Before that it was an Android Phone and a MacBook Pro.  Admittedly, I’m an early adopter and generally like to play with new technology and see how it can improve my life.  I love Windows 10 and the beautiful balance it strikes between touch and desktop – and with Cortana, I truly feel like Windows 10 as an OS has made me more productive than ever before.  When Microsoft announced the Lumia 950 and 950 XL, it came right at the end of my Verizon contract, so I decided to make the jump.  So far, I’ve had the phone for about 2 full days, and this blog post series will cover my journey from iOS and the iPhone to Windows 10 Mobile, the pros and cons, what you’ll love and what you’ll miss. Continue reading…

Announcing Ember.JS and Broccoli.JS Task Runner Extension for Visual Studio

imgres

Visual Studio has an amazing task runner that lets you integrate run task-based command line tools into VS’s build system.  This means you can list commands and even set them to run with builds right inside Visual Studio without even touching the command line!  This is great for getting your team using these command line tools, while taking baby steps if your team isn’t comfortable with the command line yet.  The Broccoli Task Runner adds support for both Broccoli files as well as EmberCLI files, which means all your Ember.JS apps now have full support in Visual Studio!

You can download the tools in the Visual Studio Gallery or contribute to it (since it’s open source) on Github.

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. Continue reading…

Synchronize Node.JS Install Version with Visual Studio 2015

maxresdefault

Visual Studio 2015 is out for download now (and free for individual use)!  It’s been so great to have integrated Grunt and Gulp support, and ES6+ features.  In addition, Visual Studio 2015’s installer has an option to install Node.JS as part of its regular install in order to support the Gulp and Grunt task runners that are built in.  However I ran into an issue today in which I updated Node.JS outside of Visual Studio, but since VS uses its own install that is separate from any outside installation, you can potentially run into a node_modules package dependency issue where one version of npm installs a package (which makes it rely on that version of Node/npm), and then you can’t run commands in the other version (they break).  Specifically, I had an issue with node-sass and windows bindings.  The solution was to point Visual Studio to the version of Node.JS that I had already set up externally to Visual Studio.  Here’s how to synchronize them: Continue reading…

NServiceBus: Could not enumerate all types

nservicebus_logo-black

I’ve recently started using NServiceBus for the first time in a long time.  The initial setup was great, but once I started integrating it into a really large, complex, existing app, it took a bit of re-working.  One of the errors I ran into was a HUGE string of errors all centering around not being able to enumerate all types.  In this case, the root cause turned out to be NServiceBus scanning every single .dll of your app looking for handlers.  By default, it searches everything, and when that happens it can run into situations where it can break.  The out of the box, greenfield developer experience works great, but if you’re adding NServiceBus to an existing app, then you need to add the line below to fix the error.

Basically in an existing app where you’ve added NServiceBus code to handle/send messages, then you know exactly the assembly where it lives.  Again, by default, NServiceBus scans everything, so in NServiceBus 5.0 and above, when you create the actual Bus object, you need to specify in the configuration the assemblies you want to scan.  Generally, the code is going to be in right int he webapp/console app that you are adding it to, so in that case just add:


var config = new BusConfiguration();

// config.AllYourOtherConfigurationGoesHere

config.AssembliesToScan(Assembly.GetExecutingAssembly());

var bus = Bus.Create(config);

This tells NServiceBus to only scan the assembly that is currently in use (This will fix things 95% of the time, unless your comsumer/sender code is in a different project and pulled in).  Once this is configured, NServiceBus will not scan every single assembly in hopes of finding a handler somewhere, which helps a ton if you have really old assemblies that are fragile and busted.  :)