Embroider preparation

Dave Laird
2 min readSep 9, 2020

--

After a lot of anticipation, I’m excited to finally see the Ember community be able to benefit from Embroider “a modern build system for EmberJS apps.” If you didn’t know already, Embroider will unlock heaps of build goodness for our Ember apps. Things such as:

  1. Code splitting
  2. Tree shaking
  3. Route splitting

As all Ember developers know, Ember addons make up a significant part of our applications (even Ember itself is an addon!). For years now, addons have been tested against a matrix of Ember versions to ensure compatibility using the fantastic addon ember-try maintained by Katie Gengler.

Following this example, we should also be testing our addons against Embroider. How you ask? Let’s step through how we can do that using ember-try!

The first step is to add the following code to your addon’s ember-cli-build.js file

If @embroider/webpack is installed in the addon dependencies, then Embroider will be used to build the application.

Line 11 uses embroider’s compat options.Turning on all the options will give the addon the most compatibility with Embroider.

Next, we need to setup ember-try to test against Embroider.

config/ember-try.js

The '*' means the test will use the latest version of Embroider. As of today, Embroider is at version 0.21.0.

The last step is to add the embroider-tests scenario to the continuous integration (CI) configuration.

.travis.yml

Good on ya!

Time to dance! Just like Ricky Baker.

For a few examples PRs ember-fetch ember-cli-head of adding embroider test scenario to an addon.

Just as I found some issues with my PR to ember-fetch, you might run into test failures with your addon. Jump on over to the Ember discord embroider channel to get the help you need in preparation for embroider.

Thanks heaps Jake Bixby for your help. Edward Faulkner thanks for all your hard work on Embroider.

--

--

Dave Laird

Lead frontend developer at Outdoorsy.com. Working with emberjs for 8 years.