single-spa-ember
single-spa-ember is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Ember.js. Check out the single-spa-ember github.
It is available on npm as single-spa-ember
, and also available on bower as single-spa-ember
in case you want to use it with ember cli and need to use bower.
#
OverviewWhen you are building an ember application that you want to work as a single-spa application, there are five things you need to implement:
Single-spa-ember will help you implement all of those except for the activity function.
Note that the loading and activity functions are part of the single-spa root application, whereas the bootstrap, mount, and unmount functions are part of a single-spa application
#
API#
loadEmberApploadEmberApp(appName, appUrl, vendorUrl)
is a function that helps you implement the loading function for your ember application.
appName
and appUrl
are both strings and both required, whereas vendorUrl
is an optional string.
#
singleSpaEmberSingle-spa-ember will implement the single-spa lifecyle functions for you. To use it, you call the default export as a function with a configuration object, which returns an object that has bootstrap
, mount
, and unmount
lifecycle functions on it. The provided configuration object has the following options:
App
(required): The ember Application.createOpts
(optional): The options to provide when calling App.create(options). See the ember docs for more details.
#
Usage with ember cliFor the most part, you can get applications that use ember cli to work pretty seamlessly with single-spa. Maybe the biggest thing you'll have to worry about is that ember-cli assumes that it controls the entire HTML page, whereas a single-spa application does not. However, usually we can achieve equivalent behavior by just loading the vendor and app bundles into the HTML page dynamically, instead of baking them right into the HTML page. Below is a description of the known things you should do when setting up an ember-cli application with single-spa:
First, you'll need to add single-spa-ember
as a dependency to the ember project. This can be done with npm
, yarn
, or bower
. For example:
npm init
npm install single-spa-ember
orbower init
bower install single-spa-ember --save
Add the following options to your ember-cli-build.js file:
In your single-spa root application (which is separate from anything generated by ember cli):
In your app.js file (that is generated by ember cli)