Why is it so difficult to add bootstrap?


#1

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’”.


How can I add Bootstrap to my ember-cli app?
#2

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.


#3

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


#4

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.


#5

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


#6

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'
	}
  },
});

#7

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


#8

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


#9

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


#10

@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.


#11

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.


#12

@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?


#13

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


#14

@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`


#15

I use bower in my project root.

I recommend Ember Addon way,

ember install:addon ember-bootstrap

look here https://www.npmjs.com/package/ember-bootstrap


#16

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


#17

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…


#18

Brocfile.js has changed ./ember-cli-build.js EmberCli not creating Brocfile.js


#19

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.

#20

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