Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bower and Rails

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for Ivan Storck Ivan Storck
December 11, 2013

Bower and Rails

Lightning talk about using Bower, the front-end package manager to manage your JavaScript and CSS assets in a a Ruby on Rails web app.

Avatar for Ivan Storck

Ivan Storck

December 11, 2013
Tweet

More Decks by Ivan Storck

Other Decks in Programming

Transcript

  1. RAILS NEW BOWERAILS $ r a i l s n

    e w b o w e r a i l s c r e a t e c r e a t e R E A D M E . r d o c c r e a t e R a k e f i l e c r e a t e c o n f i g . r u c r e a t e . g i t i g n o r e c r e a t e G e m f i l e c r e a t e a p p . . . U s i n g r a i l s ( 4 . 0 . 2 ) U s i n g r d o c ( 3 . 1 2 . 2 ) U s i n g s a s s ( 3 . 2 . 1 2 ) U s i n g s a s s - r a i l s ( 4 . 0 . 1 ) U s i n g s q l i t e 3 ( 1 . 3 . 8 ) Y o u r b u n d l e i s c o m p l e t e ! U s e ` b u n d l e s h o w [ g e m n a m e ] ` t o s e e w h e r e a b u n d l e d g e m i s i n s t a l l e d .
  2. ADD BOWER­RAILS TO GEMFILE s o u r c e

    ' h t t p s : / / r u b y g e m s . o r g ' # B u n d l e e d g e R a i l s i n s t e a d : g e m ' r a i l s ' , g i t h u b : ' r a i l s / r a i l s ' g e m ' r a i l s ' , ' 4 . 0 . 2 ' # U s e b o w e r f o r f r o n t e n d a s s e t s g e m ' b o w e r - r a i l s ' and then? b u n d l e
  3. GENERATE r a i l s g b o w

    e r _ r a i l s : i n i t i a l i z e c r e a t e b o w e r . j s o n results in a bower.json file containing: { " l i b " : { " n a m e " : " b o w e r - r a i l s g e n e r a t e d l i b a s s e t s " , " d e p e n d e n c i e s " : { } } , " v e n d o r " : { " n a m e " : " b o w e r - r a i l s g e n e r a t e d v e n d o r a s s e t s " , " d e p e n d e n c i e s " : { } } }
  4. CONFIGURE c o n f i g / a p

    p l i c a t i o n . r b m o d u l e B o w e r a i l s c l a s s A p p l i c a t i o n < R a i l s : : A p p l i c a t i o n # C o n f i g u r e B o w e r c o n f i g . a s s e t s . p a t h s < < R a i l s . r o o t . j o i n ( ' v e n d o r ' , ' a s s e t s ' , ' b o w e r _ c o m p o n e n t s ' ) e n d e n d
  5. CONFIGURE, STEP 2 a p p / a s s

    e t s / s t y l e s h e e t s / a p p l i c a t i o n . c s s * = r e q u i r e b o o t s t r a p a p p / a s s e t s / j a v a s c r i p t s / a p p l i c a t i o n . j s / / = r e q u i r e b o o t s t r a p
  6. Bowerfile a s s e t " b o o

    t s t r a p " and then... Install r a k e b o w e r : i n s t a l l
  7. BIZOWZER! r a k e b o w e r

    : u p d a t e keeps your front-end compenents up-to-date!