INSTALL BOOTSTRAP FOR SYMFONY ON MAC

sources:
http://blog.teamtreehouse.com/install-node-js-npm-mac
http://symfony.com/doc/current/cookbook/frontend/bower.html

go to your project directory and keep up-to-date

$ cd /var/www/api/
$ sudo composer update

first make sure you have homebrew

$ ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

then install node and npm

$ brew install node

check the versions

$ node -v
v5.0.0

$ npm -v
3.3.9

install bower

$ npm install -g bower
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
/usr/local/lib
└── bower@1.7.9

create .bowerrc file and add this

$ sudo vi .bowerrc

{
 "directory": "web/assets/vendor/"
}

give full permission

$ sudo chmod 777 .bowerrc

now create bower.json file, just enter to all questions

$ bower init

? name api
? description
? main file
? keywords
? authors Mehmet Sen <mehmetsen80@gmail.com>
? license MIT
? homepage https://github.com/mehmetsen80/api-apps
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
name: 'api',
homepage: 'https://github.com/mehmetsen80/api-apps',
authors: [
'Mehmet Sen <mehmetsen80@gmail.com>'
],
description: '',
main: '',
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'web/assets/vendor/',
'test',
'tests'
]
}

? Looks good? Yes

finally add bootstrap

$ bower install –save bootstrap

bower bootstrap#* not-cached https://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve https://github.com/twbs/bootstrap.git#*
bower bootstrap#* checkout v3.3.6
bower bootstrap#* resolved https://github.com/twbs/bootstrap.git#3.3.6
bower jquery#1.9.1 - 2 not-cached https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower jquery#1.9.1 - 2 resolve https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower jquery#1.9.1 - 2 checkout 2.2.3
bower jquery#1.9.1 - 2 resolved https://github.com/jquery/jquery-dist.git#2.2.3
bower bootstrap#^3.3.6 install bootstrap#3.3.6
bower jquery#1.9.1 - 2 install jquery#2.2.3

it will create the missing folders

/web/assets/vendor
/web/assets/vendor/bootstrap
/web/assets/vendor/jquery

add to git

If you are on PHPStorm right click the assets folder -> Git -> +Add

access bootstrap from twig


<link rel=“stylesheet" href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}”>

YEEEYYYY!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s