Including dependencies with ember-cli

Question

I am trying out ember-cli to get an ember project going, however I have previously relied on rails and the asset pipeline to compile all my js and (s)css for previous projects.

I admit a weak understanding of js build tools, so apologies if the question is basic: How can I see what dependencies are being compiled/included in the build? Specifically, I want to include both zurb-foundation and ember-leaflet in my project. I am not sure if they are there (at least the leaflet map is not showing up in the project --- using a basic example that worked with both rails and rail-eak).

The files (ember-leaflet, etc) are in the vendor directory of the project and were placed there thru bower install (I assume?); do I have to manually include them in the root bower.json file (currently they are not); is the order in bower.json important?

Thanks in advance.

DJ

If the dependencies are already in the vendor directory, just add the js files to 'legacyFilesToAppend' in the Brocfile.js. This should give you an idea https://github.com/stefanpenner/ember-cli/issues/234 — blessanm86, May 05 '14 at 04:01

theBernd · Accepted Answer · 2014-06-17T07:24:31.033

After some digging and a lot of reading I found the solution here and got ember-leaflet to work.

1.) Download the libs

bower install --save leaflet
bower install --save ember-leaflet

Note: It's probably not neccessary to download leaflet, since ember-leaflet seems to have it included (leaflet-dist).This is the part I did manually a few times, so you may or may not have vendor/leaflet-dist. Just change accordingly.

2.) Configure building the assets

Add the import lines in your Brocfile.js before the module.exports line

app.import('vendor/leaflet-dist/leaflet-src.js')
app.import('vendor/leaflet-dist/leaflet.css')
app.import('vendor/ember-leaflet/dist/ember-leaflet.js')

module.exports = app.toTree();

3) make Leaflet and EmberLeaflet known to Ember (.jshintrc)

{
  "predef": {
    ...
    "L": true,
    "EmberLeaflet": true
  }
  ...
}

4) create a view

export default EmberLeaflet.MapView.extend({
  classNames : ['ember-leaflet-map']
});

5) create a template using the view (where view name corresponds to the file name, here views/mapview.js)

<div id="map">
  {{view 'mapview'}}
</div>

6) check / add vendor style sheet to app/index.html (should be present with recent versions of ember-cli)

<head>
   ...
   <link rel="stylesheet" href="assets/vendor.css">
</head>

7) run Ember

ember server

8) Bonus: In case you are using Twitter Bootstrap 3 here's the css I had to add to app/styles/app.css (could probably be simplified)

html,
body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 20px;
  height: 100%;
}
.page-content {
  padding: 40px 15px;
  height: 100%;
}
.row {
  margin-bottom: 1.5em;
}
#map {
  height: 100%;
}
.ember-leaflet-map {
  height: 100%;
}
body > .ember-view {
  height: 100%;
}

thanks for posting this information; this solution has come to light over the last week or so. I fumbled my way to almost the identical solution, reading the referenced doc PR from ember-cli. I think the only difference was I did not link the the stylesheet in the , since I was using scss so I @import and had to copy to leaflet images to the /public/images folder....thanks again. — paddleman, May 28 '14 at 05:06
Thanks so much for this solution. I just banged my head on the wall the last 5 days about Ember-Leaflet integration. I hope there won't be any from-outer-space tricks to control this map with Ember controllers ! — Zofren, Nov 11 '14 at 20:36

score 1 · Answer 2 · answered Jul 11 '14 at 19:00

1

It seems like somebody just created an ember-cli addon: https://www.npmjs.org/package/ember-cli-ember-leaflet

I'm going to try it :)

answered Jul 11 '14 at 19:00

sly7_7

11,961
3
40
54

Nice. I tried to create a small app using ember-cli (0.0.39-master-1b6fcf0cad) with ember-cli-ember-leaflet but could not get it to work. I needed to add the ember-cli-leaflet dependency (and move it above ember-leaflet in the package.json file, as instructed on the [ember-cli-ember-leaflet](http://github.com/csantero/ember-cli-ember-leaflet) github instructions. I also had to add broccoli-static-assets and broccoli-merge-trees. However, the console error is the L is undefined. How did you import ember-leaflet into your view? – paddleman Jul 12 '14 at 22:45
hm, the addon has changed since I installed it. I had also to install broccoli-static-assets and broccoli-merge-trees. Then I just used in my view class something like export default EmberLeaflet.MapView.extend({...}). I will try to update to the last 0.0.6 and see how it could work. – sly7_7 Jul 14 '14 at 11:13
Okay. I figured this one out, and here is the recap. Follow the instructions for [ember-cli-ember-leaflet](https://github.com/csantero/ember-cli-ember-leaflet).Add broccoli-static-assets and broccoli-merge-trees. In your view, you should import the following: import EmberLeaflet from 'ember-leaflet'; import L from 'L'; and finally you have to hack the ember-leaflet and leaflet vendor files as suggested in [this](https://github.com/csantero/ember-cli-ember-leaflet/issues/1) issue. Phewww. – paddleman Jul 20 '14 at 05:46

Including dependencies with ember-cli

2 Answers2

Linked