Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Including dependencies with ember-cli

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

like image 341
paddleman Avatar asked May 04 '14 21:05

paddleman


2 Answers

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%;
}
like image 92
theBernd Avatar answered Nov 24 '22 23:11

theBernd


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 :)

like image 23
sly7_7 Avatar answered Nov 24 '22 23:11

sly7_7