Understanding the Asset Pipeline in Ruby on Rails

[Music] hey guys this video is about the asset pipeline in Ruby on Rails so the asset pipeline does a lot of magic and it's super useful and I think honestly a big inspiration for some of the things out there that we know and love like NPM and whatnot with its gems and just how it handles assets and compilation and whatnot this videos that attempt to kind of do a very summarized version of what it is how you use it why you'd use it and what's to come in future versions of rails today rails 6 is on the horizon and with that comes web pack by default that's not to say that the asset pipeline doesn't still exist in rails app but more likely your JavaScript will be living in the web pack library and and what will be a JavaScript folder in your app rather than in the ad set pipeline it years itself you can choose to go that direction you can choose to just forego that direction it's up to you the perk of using the web pack route is to write really modern JavaScript and even harness some front-end frameworks with that on the rise and though I still wanted to cover what the asset pipeline is and how you can use it and the quirks i've found at least learning the framework of what I would run into often when I need to do some things or include some CSS or JavaScript etc so by default the rails new command will ship with what's known as the sprockets rails gym which essentially is a way to do all this compilation and stuff behind the scenes per to environment so it's pretty convicted when you run a new rails app which is great you can choose to skip that if you want and install it later but by default you'll see these gems in your app in the gym file until if you run the new app without this flag besides that there's configurations per environment that allow you to use different pre-compiled I said configurations so built into the Rockets Jim is like uglify ER for JavaScript and why I for the CSS compression so typically in a development environment you get something that looks like I'm going to show you their example and we'll go back and do some of that like this basically so when you I'll show you how to require assets but this is what it looks like in a typical application that's using the asset pipelines so these typically in the file look like comments which is kind of deceiving but they're actually not they're requiring a file that you've created elsewhere in this directory called Java scripts and within that you can compile all those down to trick the trick to the gym or to the essa pipeline is to compile all them down in production into a one file in the end or a series of files if you need more than one rather than include file after file of non compiled JavaScript or CSS and in the end you can cache that code and it's just way more performant using this technique so it's definitely an upgrade to use this built in in the framework but when you generate locally in your development environment you'll see in the view source if you view source just see if things occur like this but when you hit the production you'll notice based based on your configuration you'll get these fingerprints on the files which is great for caching and typically when you are in production you want to cache your files just so that they're quick and snappy so nothing really needs to change unless it has to so you can pre-cut compile your assets in loke in your local environment if you really want to you can do it with this command basically just you're imitating the rails production environment and running assets pre-compiled so let me show you in the actual rails we go here go into a example app I created there we go I'm gonna make this a little bit bigger so yeah and the rails I've done another video on the CLI and in here you can actually compile assets if you want to based on the environment you can pre-compile them and what that does is it goes and generates all your assets establishes those fingerprints and either compiles them down into one file in production or compiles them down to several files in development so this all sounds you know kind of advanced kind of imitating but really it's not too bad so I think I have this open here this is the the new app what I want to do just by example is say add a popular framework to the app using asset pipeline and why not choose bootstrap which is probably something you've seen or heard before I've already used I've already downloaded bootstrap but I'll show you the version number at this time let's get bootstrap I come for three one so if you go to download you can follow along if you want to and I'm going to just download the compiled CSS and yes it's not actually compiled but it's compiled based on this source files so I'll show you what I mean here in a second let me go open that let go I'll close this for now let's go to my desktop add a new one so I have bootstrap on my my desktop here and inside CSS and j/s and by example I'm just gonna include the onion a 5 version which is 129 K and the minified version is 156 case somehow so I guess that's compiling these either way you can include what you want there the same is true for the J s will include this on minified for now just so we could see what rails is doing so let's open my site's folder I'll open this it just open it in your finder if you're on a Mac doing that and we'll add these files in so your files can live in three different places typically if they're part of your app they're going to be in the app assets directory so anything in here is like little code that's part of your app that no one else made but you made so that stuff would live here if you're adding it elsewhere or from a third party like I am changes are you want to put it in vendor because that's just another route of which code that doesn't necessarily tie to your app but it is something that you might version later and change and it's stuff you don't want to change the source of so when you actually use bootstrap you don't want to modify it directly it's a cardinal sin I think of using a framework like that so instead you include it and then just override things as you need so lets include an assets folder by default a convention here is to have an assets folder to kind of mock your other assets folder so I'm going to make an assets folder I'm gonna make a Java scripts oh it's actually it's not CSS it should be style sheets okay so let's include the bootstrap main one there the one just dot CSS for now I'll just copy it coming C paste it in to style sheets and JavaScript I'll do the same with the dist Jas generic one we probably need more than that for this to work but I'm just including this for now great okay so the caveat here is it's not quite ready to go we need to actually configure eight our apps to know about those files in the innocence of the asset pipeline so to do that you can go to this folder called config in your assets directory and there's going to be a manifest js4 der so in here this folder links these things and it does these things that I said that look like comments and they basically are comments but they're actually doing things so this is linking the tree which is basically linking everything in the images folder right now this is linking the directory of everything in the java scripts folder and then this is doing the same with the style sheets anything that's dot CSS right now you can change this too dots scss if you want I'm going to just use CSS for now and it should pick that up you might want to change this to s CSS but I'm not sure you need to I'll have to double check that for you guys but the magic here is you used to have to do this you'd have to go to your config initializers and then assets and you would actually add things to this application convey ash that's pre-compile configuration so what that would do normally is you can add each file that you add to your directories and require and say your routes CSS file like this this is another way to require a file including that here would be how that would work so here's an example they use for admin and in CSS so hopefully that makes sense right now we don't need to do that since we have this built in manifest this does our job for us but you do each time need to include the file here so I've actually included bootstrap dot CSS and then bootstrap jeaious so in my day job we separate these out so they're just like either they're alphabetical order and then you group the j/s and the CSS just kind of how we do it it's not a big deal if it's not but it makes it a little easier to find later so let me actually remove those from right now and then see if our app I'm running the rails server at the moment I'm going to kill it whenever we started and I am on five to two right now so chances are rails 6 is right around the corners this might be just a dated video to start with but it's still worth knowing so I'm going to go back to the finder or browser there's Jugal localhost okay so we need an actual I don't have any route or anything set up so let me do that just to give us some something to work with so I'll go and just create a controller let me do that real quick so I'll do rails generate I'll just do G controller home and index so the controller names home and the index is the action that'll just create a get route in our route route config I could show you that so right here so where am I going routes so we just have a generic get request here that points to home dot index which in our controllers is right here that was all generated just now you saw in that generation 2 in version 5 to 2 of rails coffee script is the default for JavaScript you can just simply rename that to Jas if you're gonna use it but you can also run a new app and say skip coffee and it will do it with vanilla JavaScript which is what I prefer on an any new app this also gets generated and it depends on if you want to include controller specific CSS in your app you can actually turn this off if you want to it's actually on the docks on the rails I think I already closed that on the guides but it's it's a very trivial thing to do you just basically create a new configuration and go to town so we're gonna set the root path now to I'm going to go back to config the RB or routes so back to the path here configuration path we'll just do a root 2 let's see home next we go I'll just follow the convention of single quotes there okay so you might have to restart your server I think mine's not even running so we need to run it cool so we have a home index great it's ugly but we're off the races okay so where this will bark right now this is what our layout looks like there's literally nothing to it but we want to include those files I added so I'm gonna say stylesheet link tag and then I'm going to call this bootstrap since we called that the file name in the vendor directory and I'll probably just copy this metadata here so this these are short hands for media to all and then for terrible links you can have a track to reload which opt maybe I'll get undo another video on turbo links so we'll do the actual same with the JavaScript oops there we go so now we have two sets this is our application specific stuff so stylesheets gets generated right here this is where that relates to see it generates fast by default there let me go ahead and rename not to sass for grins so SCSS it'll work the same way thanks to the sprockets Jim okay so that is pointing to this file this is pointing to this file and we'll get into more of the JavaScript here and then this is now pointing to the Venter so the app knows to look for assets in the assets folder well could be in a lib folder assets here if you want that's I think what what does that do that when you make your own amends to something but it's your stuff you're old you could put it here if it's completely something else from someone else you put it here so there's three places vender lib assets and then you're just basic assets most of the time I roll my own stuff so I'm in this folder most of the time but if I reach for a little library or something of that nature it's in this folder you will need to create the assets folder and then the same naming conventions as up here for rails to know to look for it so if I save this and then reload the page I think we should get yeah we should get an error so right now we can't make up one mainly because I can't spell but bootstrap well you guys are probably screaming okay so we still get the air it's not configured right now and that's kind of a bummer but we can go back down to our manifests we have it here now we can undo what I did right now we need to still pass the configuration through to that and initializer though and that's how we can hook into this so I'll go and do that now and that can look like this so this doesn't come by default unfortunately thought I'll show you how to do it initializers assets and then we'll uncomment this line and for now I'm just instead of this this kind of view I'm gonna go for an array with quotes so we'll just include manifest yes so this knows to look in the app assets directory for this file if you're wondering which is way right here if you recall cool I'll just keep those right right there okay so probably need to restart the app so I'll do that right on still getting this so assets okay so guys I messed up here and we actually need a link call to this so I made a type of I was thinking it was just easy to do so let's try this again restart the server and Chavez truth ok I think I spelt that wrong to my man JavaScript include tag is what this is and then we'll refresh I think I still spelter off Wow ok yeah there we go cool so if you look view source we get the all that stuff that you saw and maybe in the other files but you also see these new ones that I've added individually so bootstrap we have assets for and then the script tag as well bootstrap is a heavy library so I'm I'm very hesitant to ever use it but it's got some sweet things that it's just a solved problem like for dropdowns or something but rants over there so we've got the library in so what's next what could we do maybe I'll do I think there's a basic container class I can't remember most of these classes but we can get going there cool I know there's some utility classes but I'm gonna leave it because I feel like I'll butcher them to push that down a bit ok so we have that in our app that's great let me talk through the other way to include files so by default in your JS for instance say you create a new file let's create a new one just called let's just say log GS so right now our app doesn't know about that file there's I'll just do a console dot log I mean cool so there is that and then you can go ahead and tried to restart that and look at the page and it's not going to be there because obviously we didn't include it yet so you wouldn't want to really include it just like we did this because it's such a small file we want it to be part of our application j/s right so the SM pipeline helps with that and you can essentially just require it here so you could say require and then we'll say log so much like you would do es6 imports and exports so you can kind of get that that feel and vibe into this it's very cool in my opinion and that's why when I see some of this modern stuff I'm like wow it's like totally like it so if we look at our log maybe we have it now so we don't have jQuery so we need to include that so I'm going to be I'll include that too so for grins I'm going to just get the CD in on bootstrap site and I'll show you how to link to a CDN if you want to use that as well so let's do this one and we might as well get popper to G source so much you gotta include so let's get those script tags and while you could just include them as is and it would be fine it's best to use rails conventions here and use the helpers I think I might go back and recopy that so I get everything so this this is totally valid but I'm gonna go ahead and do it my way so let's do this and you actually probably want to include all of this before our application styles because we want it to cascade right so if you modify anything to do with bootstrap in an override you would get those changes to actually occur so I'm gonna ignore this integrity stuff but I am gonna include jQuery so another JavaScript include tag and instead of the name of the file you can literally just pass the path here and it'll do what you think so I think it's because it's a CD and I'm gonna just ignore the other things that we passed on the others but this needs to come first I remember so jQuery first and then say you want popper to leti we can do that it's the same convention here javascript include tag so these you don't have to declare since there are CDN it's just you literally included in the page and you're done problem with that is it doesn't get precompiled but that's okay if it already is so you can kind of be in the clear with that we tend to not rely on CD ends anymore it's just kind of a what-if scenario what if the CD and went down or something just didn't happen that should it gets hairy so but okay so we've got let me do a view source we've got Kojak jQuery and cool and popper and then also bootstrap which we moved up over top of our other assets and then you see all these other assets that get compiled inline in production this would be just this file right here that's the beauty of our configuration so more on that would actually happen in the config environments directory so you can per environment decide how your assets keep precompiled so production is going to have more settings precompile I think so I think by default it just just works which is the beauty of it all all these things all this like you can recompile your sass or your Jas depending on what you want that just happens when you do rake assets free compile so maybe for grins we can do that locally I might steal the script from the rails guides so acid free compiled so right here this line we need to actually this is will mimic pre compiling our assets in production so we can run that I'll do it a new tab and you need to be set with the instance of rails II in V as production for this to work you're on that some reason yarns installed but there we go see a bunch of stuff happen and then this lives in our assets public folder so if we go to that folder this is what actually gets served to your app once you do all this stuff so we see all this stuff in behind the scenes you see the fingerprints on them and everything they get gzip to which is awesome so it's really really useful really handy all this stuff goes to your site you can go into let's see rails I'll show you the CLI you can do some things here to remove those without having to delete each one if you go to the assets you can go to clean which will kind of keep the files but I think maybe change the fingerprints on them I could be wrong let's clobber should remove them so I'm going to try that one I don't really remember doing this much removes public assets okay so just like that we got rid of our public assets directory so normally on locally you would not worry about pre compiling your assets you don't need to but in production you'll want to pay attention to that make sure they are just for speed and caching and all those beautiful things you get out of it ok we talked about Java scripts including JavaScript images are an own their own bear to handle CSS works just like the JavaScript files like I showed you so the only difference is the syntax so you can include another file just like so the same is true with CSS here so you can include a whole nother stylesheet here if you want to or you can always do the OL at or it depends on what you want to do there require tree essentially says require every file in the style sheets directory require self requires itself so it will go and get all the other files and then itself and then make itself one file once the compilation occurs so that's how that works with the CSS by default you don't have to even include these files that's the cool thing so if it's in this directory it's going to compile down which is very cool so you might have an assets in say vendor that you want here for some reason you can actually require it or you can add import it definitely check out these comments there's a lot more on the guide app there's a lot well is there a lot to the asset pipeline so like I said this is a summarized version but hopefully it's making sense so here's where you declare any other new assets you've added which we talked about and then let's talk about images so in rails we can do just like do an image tag so this would be part of the asset pipeline to Rails has a helper built in called image tag it by default will look in assets images so you'd only need to pass the image name in that regard so let me go and find a crappy image alright I'll close this and we'll go back to my desktop and I'm gonna include that in my assets directory in the images folder alright so back in our app we can include that now you see the cat jpg over here all I need to do is say can touch JPEG and if you ever want to pass an alt tag which should if you want to pay attention to accessibility just say a cat black ok cool so with that in place we should be able to come back to the app we see a new image source appear look at the fingerprint on it too which is great and then back in the real app there's our cat which is a huge image but it works ok so on top of that you can actually get the asset path of something - so you can say asset path and this you wouldn't want the alt tag there but this should output and a URL to that image right there yeah assets well its image is huge maybe I'll set a width on this to like 300 cool so that's the assets path if you ever need that to hook into something random you can totally grab it that comes again with the asset pipeline then one more gotcha that I'll do here baby is like a background image let's just say like body background image in your CSS say you want to set typically each CSS you just write URL well we need asset pipeline to help us so you actually just do image URL instead and then again you don't need to pass anything else here except the file names so I'm gonna say cat jpg and it's gonna get it crazy we're gonna repeat we'll just leave it by default yeah let's see how that looks cats so eat so we got a cat and then a cat and we can get fancy maybe add a class here catch border I don't know boom so that has a little border now we could say a body as a color white this is a terrible design but I like it why not throw some padding there we go maybe a little more sweet so there's our fantastic awesome cat sight I hope this was helpful okay so that's the gist of asset pipeline my recommendation is to never write styles in here unless you absolutely have to in the application CSS file you certainly can you can just assume that files would get compiled down into this file though in the end like I said if you read the docs you get a little more out of this but you notice how I didn't include this and it's still rendered correctly which is great we aren't actually even including that file in the page as far as I know yeah we just have our app one right there what is coming okay so it's it's in development mode it's doing that if we were to do production if you go into production and push it live you'd see just one file up there which is pretty neat so I think that covers most of the asset pipelines stuff you can use CD ends and stuff if you check out the docs if you go to kind of the bottom there is yeah CD ends here and you can configure where the asset house would be if you want to go that route and then you can you know just serve it just like normal normal only the files would upload to your CD and of choice in newer versions of rails we have active storage too so that's a whole note whole new conundrum that's probably worth the video on its own so maybe I'll do that on next or upcoming active storage is kind of a framework for using your own configuration for images and assets built into the asset pipeline in or web Packer which is the new thing coming to rails 6 to where you can like add things to your models and then they were the Apple automatically knows what to do with the assets with the active storage you can actually configure CD ends even easier than you would on the asset pipeline which is great on top of that let's see you can customize the pipeline however you want but I think that's it guys so maybe I'll do something more about web Packer next that's kind of the precursor to asset pipeline a lot of people are heading that route on modern rails apps it's not replacing the asset pipeline by any means but it is allowing us to do modern JavaScript in a much easier manner without including a bunch of things that would basically wanna keep monkey patch to current rails framework so if you read this right away it makes it easier to use javascript processor with bundler so that's kind of great and they actually recommend just it's basically was built for JavaScript and not necessarily images or CSS but you can use it for that and a lot of my apps I do for CSS because I use tailwind which is a post CSS plugin that requires node so you can't quite use a asset pipeline with it easily anyway so I'll quit yeah can hopefully that was helpful if you have any questions leave them in the comments and happiness for them really would recommend going to this page here guys that Ruby on Rails that org slash is set underscore pipeline to HTML and you'll find a lot more information and Navion ways to configure your own stuff if you want to do something custom so with that I'll leave you until next time and thanks for watching peace hello rails is my new course on Ruby on Rails I'll teach you Ruby on Rails from the ground up visit hello rails Daioh for more information [Music] you [Music] you

Channel: Web-Crunch

Views: 6,441

Keywords: ruby on rails, asset pipeline, ruby on rails (software), rails 5 tutorial, rails 5.2 tutorial, rails 5.2.2, programming, web development, web design, learn ruby on rails from scratch, learn ruby on rails for beginners, learn ruby on rails by building projects, learn ruby programming for beginners, asset pipeline architectures, asset pipeline rails 5, asset pipeline in rails, rails tutorial 2018, rails tutorial for beginners, rails tutorial, ruby on rails web development

Id: kgEcdBGpr54

Length: 34min 29sec (2069 seconds)

Published: Sat Mar 09 2019