How to include folder of assets into ember app with ember cli

1

This took over an hour to solve…hopefully this helps other newcomers

How to add HTML KickStart CSS Framework to an ember app with ember-cli:

1). Copy the folder into myapp/public/assets. In my case, I downloaded it from http://www.99lime.com/elements/

/public  
/public/assets  
/public/assets/HTML-Kickstart  
/public/assets/HTML-Kickstart/css  
/public/assets/HTML-Kickstart/js  
/public/assets/HTML-Kickstart/style.css  
/public/assets/HTML-Kickstart/css/fonts  
/public/assets/HTML-Kickstart/css/img

2). Add to your brocfile.js (you also need to npm install broccoli-funnel)

var EmberApp = require(‘ember-cli/lib/broccoli/ember-app’);
var Funnel = require(‘broccoli-funnel’);
var app = new EmberApp();

var extraAssets = new Funnel('public/assets/HTML-KickStart', {
  destDir: '/assets'
});

module.exports = app.toTree(extraAssets);

3). include in myapp/app/index.html

<link rel="stylesheet" href="assets/HTML-KickStart/css/kickstart.css">  
<link rel="stylesheet" href="assets/HTML-KickStart/style.css">  
<script src="assets/HTML-KickStart/js/kickstart.js"></script>

The brocfile will copy them to the dist/assets folder and you can reference them in your app.

8 Likes
2

I followed these steps and I managed to include my css/js and images folder into ember app. However, I observed that folders are copied twice. Once in the dist folder and then in dist\assets folder.

3

it works :smiley: i just can say that i sign up here to thank you

4

How would you do the reference to the elements.html??? For example to be the starting page in my ember app??