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

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

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.

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

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