Why is it so difficult to add bootstrap?

MarkNeon · November 12, 2014, 6:31pm

I’ve spent hours trying to get bootstrap working and am beginning to think that Ember is still in beta.

At this point all I want to do is get bootstrap from a CDN, e.g.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">

But now I’m getting all these security violations:

[Report Only] Refused to load the stylesheet ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css’ because it violates the following Content Security Policy directive: “style-src ‘self’”.

kylecoberly · November 12, 2014, 7:14pm

It’s because Ember CLI enforces CSP on the local node server. You have to whitelist external domains you want to pull from- check out that link for the API. I’m sure @rwjblue can clarify better than I can.

Panman8201 · November 12, 2014, 9:23pm

Have you tried the ember-cli-bootstrap addon, which uses bootstrap-for-ember?

MarkNeon · November 12, 2014, 11:24pm

Yes, I tried that first and this is what happened:

c:\Sites\MyEmberApp>npm install --save-dev ember-cli-bootstrap
|
> ember-cli-bootstrap@0.0.12 postinstall c:\Sites\MyEmberApp\node_modules\ember-cli-bootstrap
> bower install

bower cached        git://github.com/twbs/bootstrap.git#3.1.1
bower validate      3.1.1 against git://github.com/twbs/bootstrap.git#~3.1.1
bower cached        git://github.com/ember-addons/bootstrap-for-ember.git#0.7.0
bower validate      0.7.0 against git://github.com/ember-addons/bootstrap-for-ember.git#~0.7.0
bower cached        git://github.com/jquery/jquery.git#2.1.1
bower validate      2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0
bower install       ember-addons.bs_for_ember#0.7.0
bower install       bootstrap#3.1.1
bower install       jquery#2.1.1

ember-addons.bs_for_ember#0.7.0 vendor\ember-addons.bs_for_ember

bootstrap#3.1.1 vendor\bootstrap
└── jquery#2.1.1

jquery#2.1.1 vendor\jquery
ember-cli-bootstrap@0.0.12 node_modules\ember-cli-bootstrap

c:\Sites\MyEmberApp>ember server
version: 0.1.2
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\bootstrap\dist\css\bootstrap.css` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\bootstrap\dist\css\bootstrap.css.map` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\css\bs-growl-notifications.min.css` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-core.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-alert.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-alert.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-badge.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-badge.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-basic.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-basic.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-breadcrumbs.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-breadcrumbs.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-button.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-button.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-core.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-core.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-growl-notifications.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-growl-notifications.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-items-action-bar.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-items-action-bar.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-label.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-label.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-list-group.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-list-group.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-modal.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-modal.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-nav.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-nav.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-notifications.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-notifications.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-popover.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-popover.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-progressbar.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-progressbar.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-wizard.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\ember-addons.bs_for_ember\dist\js\bs-wizard.max.js` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\bootstrap\dist\fonts\glyphicons-halflings-regular.eot` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\bootstrap\dist\fonts\glyphicons-halflings-regular.svg` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\bootstrap\dist\fonts\glyphicons-halflings-regular.ttf` into a subdirectory.
Using `app.import` with a file in the root of `vendor/` causes a significant performance penalty. Please move `vendor\bootstrap\dist\fonts\glyphicons-halflings-regular.woff` into a subdirectory.
Livereload server on port 35729
Serving on http://0.0.0.0:4200/

Build successful - 30973ms.

Slowest Trees                  | Total
-------------------------------+----------------
TreeMerger (appAndDependencies) | 6410ms
TreeMerger (ExternalTree)      | 4799ms
TreeMerger (stylesAndVendor)   | 4463ms
TreeMerger (vendor)            | 2786ms
CustomStaticCompiler           | 2729ms
TreeMerger                     | 2729ms
TreeMerger                     | 1785ms

The strange thing is that my vendor directory is empty except for a file named .gitkeep.

Panman8201 · November 13, 2014, 3:09pm

That is a strange error. What version of ember-cli are you on? ember -v

Might help to delete your node_modules folder, clear cache npm cache clean, then re-install npm install

jeffcressman · November 27, 2014, 7:22am

I agree with @Panman8201 that clearing your caches might help, as this has fixed issues for me as well when I’ve tried a few different paths to get something working. I’d also clear the bower cache

npm cache clean
bower cache clean
npm install
bower install

Also, to get the Bootstrap javascript working you need to explicitly import the javascript in your Brocfile.js

I also ran into an issue related to Bootstrap where I had to include the un-minified version of handlebars.js to get builds working on Heroku and Firebase. You may not need that and better if you don’t as your deployed code will be smaller).

var app = new EmberApp({
  'ember-cli-bootstrap': {
    'importBootstrapJS': true
  },
  vendorFiles: {
	'handlebars.js': {
		production:  'bower_components/handlebars/handlebars.js'
	}
  },
});

Branson_G_Kuria · February 25, 2015, 12:03pm

this gives errors when i try to use it too, weird…

Branson_G_Kuria · February 25, 2015, 12:09pm

for anyone coming to this thread for help…ember-cli 0.2.0 beta 1…that worked flawlessly for me

pcjpcj2 · February 26, 2015, 2:23pm

Use bower,

bower install --save-dev bootstrap

and open Brocfile.js , add above module.exports = app.toTree();

app.import('bower_components/bootstrap/dist/css/bootstrap.min.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');

Good luck @MarkNeon

diegodesouza · April 20, 2015, 2:34am

@pcjpcj2 I followed your example, but I think i might have done something wrong, since it’s not picking up bootstrap. when you do the bower install do you have to be in a specific directory of your app? or root does it? I imported the files also, no luck.

jorge_lainfiesta · April 20, 2015, 2:54am

To use bower you must be in the ember directory, as it will download the modules to bower_components in your ember app directory. Also, bower.json keeps track of the dependencies of your particular project.

diegodesouza · April 20, 2015, 3:00am

@jorge_lainfiesta I thought that was the case, though there’s something fishy then. … omitted for brevity "bootstrap": "~3.3", "ember-addons.bs_for_ember": "~0.7.0" }, "devDependencies": { "bootstrap": "~3.3.4" } } these are the dependencies in my bower.json and i see the directory it created for me in my bower_components. So why aren’t the changes being applied to my code?

jorge_lainfiesta · April 20, 2015, 3:03am

Did you edited your Brocfile.js too?

Also, remember to quit ember serve and start it again as it doesn’t check for changes in Brocfile.js (if I remember correctly).

diegodesouza · April 20, 2015, 3:06am

@jorge_lainfiesta Yea I’m pretty sure i had to restart my server. Because now i have a few bugs, `Uncaught Error: Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`. Uncaught Error: Could not find module `ember-cli-bootstrap/utils/test-breadcrumbs` imported from `blogger/helpers/test-breadcrumbs`

pcjpcj2 · April 20, 2015, 3:45am

I use bower in my project root.

I recommend Ember Addon way,

ember install:addon ember-bootstrap

look here

diegodesouza · April 20, 2015, 2:40pm

excellent. Thanks for the response. It seems to be working now. @pcjpcj2

shturm · May 16, 2015, 11:10pm

With this it fails to resolve source maps. I’d rather stick with custom grunt/broccoli setup. Already spent a full day just trying to add bootstrap…

pcjpcj2 · September 7, 2015, 11:41am

Brocfile.js has changed ./ember-cli-build.js EmberCli not creating Brocfile.js - #6 by Frank_Stock

zoltan · November 16, 2015, 5:59am

I usually suggest the following if you need bootstrap and sass.

Add sass and bootstrap to your ember.js 2.x project

Run the following two command in your terminal.

ember install ember-cli-sass
ember install ember-cli-bootstrap-sassy

Rename your app.css to app.scss.
Open ./app/styles/app.scss file in your editor and add the following line:

@import "bootstrap";

Done.

zoltan · November 16, 2015, 8:07am

A one liner:

ember install ember-cli-sass && ember install ember-cli-bootstrap-sassy && echo '@import "bootstrap";' > ./app/styles/app.scss && rm ./app/styles/app.css

Topic		Replies	Views
How can I add Bootstrap to my ember-cli app? Ember CLI	7	11724	November 13, 2015
Solved: How to create an Ember Addon that provides a customizable bootstrap theme Design	6	1910	February 1, 2017
Tutorial to add 3rd party bootstrap template Questions	0	552	May 17, 2019
Best way to import external CSS/JS into ember Ember CLI	1	865	July 6, 2017
Ember Beginner - Managing Dependencies General	2	575	June 1, 2019

Why is it so difficult to add bootstrap?

Related topics