Using ember with webpack

For this post I will assume that you already use ember and want to integrate webpack. This isn’t a tutorial about webpack or ember.

I know ember has ember-cli (a command utility with a complete asset pipeline, strong project structure and an addon system), so why anyone would mind fighting all the way to webpack? Well, we can say that in the ember world not all projects are greenfield and the migration path to ember-cli can be quite steep.

Yes, this is about a migration path. A little bit of context, currently I'm working on a project that achieved all steps from a "let's grow" list. It started as a Rails monolith app, it migrated to a micro-services world and it replaced the Rails Views with something more ambitious™, in this case, ember. The migration happened when ember was in version 1.8.x and the original developers decided to use ember-rails to smooth the transition.

The migration was a complete success but of course, it generated other problems, as such in life. Ember-cli became the de facto ember way to go, everything migrated to ES2015+ and ember-rails failed to provide things like: good integration with qunit and ember projects around qunit (We had to glue everything ourselves and patch others to be able to write decent tests); access to the plugins ecosystem around ember-cli; hot reload and fast refreshes through sprockets; etc. It became clear that ember-rails + sprockets was aging, however, migrate to ember-cli was incredibly difficult, as you can expect, this project migrated from custom javascript code + jquery plugins to ember, thus some of the old code was still lying around and being used.

Why webpack?

I did a bunch of projects before with webpack and it has proved to be quite flexible and well accepted by the javascript community. Webpack will support our project better while we migrate the code to ES2015+ and accommodate/migrate the old javascript code, later on, we can decide if we migrate to ember-cli or keep it into webpack.

The plan?

  1. Make ember work with webpack
  2. Migrate the code to webpack
  3. Create a Rack middleware to, in development, forward asset requests to webpack
  4. Profit!
  5. Convert everything to ES2015+ and enforce more conventions while we migrate the code
  6. Migrate a more compatible code to ember-cli

Ember + webpack

During my research time, I found a nice thread on the ember forum about the subject and started my work from the solutions in the thread. Ember is compatible with webpack, we just need to provide a solution for some things:

  1. NPM package for Ember
  2. Load HTMLbars templates correctly
  3. Look up the framework modules (controllers, routes, components, etc) following ember conventions

1) NPM Package

Ember is not in NPM (yet, I hope soon) but we can use the build created for Bower by using the tarball. We don't want to use bower.

$ npm install — save

This will download jQuery as well since it's a dependency of Ember. To complete the installation we need to create some shims and aliases to easily load Ember. Let’s see how it would be using three files: jquery.js, ember.js and the alias config in webpack.config.js.

After this configuration, we can import ember like a regular library.

2) Load HTMLbars templates

The thread pointed me to a NPM module called ember-templates-loader which was supporting only ember 1.13.x, to be more future proof I switched this package with ember-cli-htmlbars , which is an official package in ember world. I just pointed the template compiler to my current template compiler to align the version being used.

3) Look up framework modules

I have created a package with the HTMLbars loader and some others to ease the integration. The package is called ember-webpack-loaders and can be found on NPM.

The package provides three loaders: one for HTLMbars; one for the template loading in ember (one thing is to precompile templates another is to load it in ember); and another one for loading framework specific modules (controllers, services, mixins, routes, etc) following ember conventions. I ended up with the following configuration in webpack:

Resuming the app structure:

Where app can be any folder you want, just configure the name in the loaders and if you decide to use something different than index.js inside app just remember to change the reference in the loader as well.

I have created a more elaborated TodoMVC app using this structure, I did it to push more from this integration, the original version was too simple and didn't cover things like helpers, components or services. You can check the demo at and you have the code in github, fell free to fork the project or suggest modifications.

Like what you read? Give Túlio Ornelas a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.