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.

Transcript

1. DOGS AND CATS LIVING TOGETHER Mass Hysteria!
2. RAILS ENGINES MANUAL DOWNLOADS
3. BOWER + RAILS
4. 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 .
5. 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
6. 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 " : { } } }
7. 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
8. 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
9. 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
10. BIZOWZER! r a k e b o w e r : u p d a t e keeps your front-end compenents up-to-date!
11. EXAMPLE APP AND SLIDES Click here: Example Bower Rails App
12. Ivan Storck @ivanoats @codefellowsorg Faculty Blog Codefellows Blog