Using Webpack with Ruby on Rails

[Music] what's up guys this is another video about Ruby on Rails and a previous video I did a video about the asset pipeline I wanted to get in more depth about webpack and the new integration that is in within at least rails version 5 2 and up I think by default you can have it go ahead and install but you can install it on versions of rails as far back as 412 I believe so by itself web Packer is its own Jim we can go ahead and check it out rails 6 on the horizon very soon horizon will ship with this by default which you can flag to not install if you don't want to so why web pack why all these things think of it as a way to integrate modern JavaScript into your project almost effortlessly setting up web pack if you've ever done that is kind of a daunting task and this is going the rails way which is non configuration so it's convention over configuration I've used web pack in some of my builds all those things in some previous tutorials and stuff like that to mostly hook into JavaScript but also use the tailwind CSS framework which is a post CSS plug-in so you need something more modern to actually drive that kind of CSS framework and what pack is the answer to that in this case you could use different tools of course but for rails this makes more sense so inside initial 5.0 styled project you won't have web Packer by default so you actually have to install the gym and configure it to go ahead and get set up if it's rails 6 on the horizon like I said you won't need to do any of that it will just install when you hit rails new so for the sake of the video I'm gonna actually install it by hand at first and then we'll install rails 6 Jim like the beta release I think is beta 3 right now and then we'll just install an app and then I'll show you just by example so an existing app you can go ahead and pass on available versions 5 2 and up you Pass webpack and it will add it at least initialize it to your basic app and then we can run these things by default so this will go ahead and fetch the latest web Packer Jim and then we'll run a rake task that will install web Packer and get yarn to go on to the stack as well it creates a new folder called JavaScript in our directory and that's its intention initially it's you can compile just your JavaScript in this folder but I can contain other things like CSS or images as well if you want to use that in your web pack workflow the asset pipeline is separate from this but you can combine them in terms of compilation at when you launch the apps or deploy it should I say that assets recompile if you've ever seen that task that kind of ties into this so you wouldn't even really need to make changes to your deploy process at the beautiful thing of the web Packer Jim just kind of does that for you so without further ado let's kind of get stuff rolling and I'll give you a high level of what web Packer is how you could use it the features if you could see on the github repo here pretty pretty great you can use front-end frameworks if you want compile your assets with web pack instead of asset pipeline which is kind of the old rails way that still works and it's still great but it has very convention driven techniques and I think what pack the web Packer gem is kind of more common purpose I guess you could say so we'll get Babel out of the box code splitting if you want that style sheets if you want that images and fonts if you want that post CSS is great I use that for tailoring often and then I'm couple bunch of other little things that we need to so let's go ahead and just create a new app I'm gonna use I think rails 5 to 2 yeah so to start so we'll say rails new on my sites directory and I'll say web pack pack a 5 just to kind of give it that rails 5 version I am gonna pass webpack as a flag here and we'll see what happens so a typical new rails app goes and fetches all the gems we need I think I installed a new version of Ruby recently so this might take a little longer it's gonna install some gems we're definitely need for this version of rails so hang tight so passing the web pack flag actually initializes the web Packer install if you wanted to add that manually you could certainly could this essentially adds that web Packer gym to your gem file runs the bundle exec rails web Packer install script and then goes and fetches all the dependencies with yarn so we can say web pack 5 I think yes so we've got an app here I'm going to use PS code I've kind of been on the code train lately and like you just check out our gem file I'm on the latest version of Ruby rails is 5 2 2 still which i think is the basic non-beta released so far and let's see we've got web Packer by default so already that's in our project we don't have to actually do anything by default you get es6 compatible javascript in your flat and your files it goes ahead and adds the include tag in your project to so what actually does not so these this is the this is the asset pipeline version of those web pack files we'll still need to add it to our project and you can include it just like so so we'll say JavaScript pack tag the key word here is pack so web pack that's the difference in this plugin this gem over anything else so the main thing you'll need to focus on is any new javascript or css you'll have the pack naming convention and then you can include those things in your app just as you would any kind of rails asset as well so like asset pack path or acid packed paths to CSS something like that or you can even chunk your JavaScript too which is kind of cool if you want to break things up at load time here we could just do like a console log let's just do like Const web Packer we'll just do this isn't a very good example by any means but I just wanted to do some es6 and just run it and we'll see on rail server this should compile a type server rails server and once this loads will actually you need to go render the page real quick so we've got that I actually need probably something to scaffold first so let's just say rails generate post title and you say scaffold - so scaffold post title string we could just leave that all content is text there we go just scaffold that so we'll have that resource in our app it creates a ton of stuff we don't need but it is kind of useful in the sense of just getting some stuff rolling you notice it doesn't add anything to the JavaScript directory by default though I predict that might change later as new versions of rails come out so we get this CoffeeScript file instead which is per controller which isn't really what I want but we can go ahead and just roll with it for now so we'll say that down I need to change my routes to post let's go to find that where we have configure outs resources posts route to post index and sometimes you need to restart the server but I think I'll just run the server boot that up we go to the index it should update we have to migrate first Rails to be migrating one more boot after that rolls in reload and if you pay attention to this bit here you'll see it compiling which is the whole beautiful thing that happens automatically when you install that Jim so you only have to really run like a reload script or anything though you could if you wanted so to find that you can go into quit this and go into you'll have a bin directory in your app inside it is actually a rake task or a task that will run what pack dev server or web pack to compile your assets down dev server is kind of a live hot really hot reloading take on it so been web pack dev server will just sit there and we're on that and we'll listen to 3035 looks like I have an error what am i doing const i think i spelt it wrong oh you guys are probably screaming why that's even capitalized i don't even know but let's go and take that down you save and that stuff should render again so compile that successfully now so that's all on the fly that's pretty sweet so we'll go on and say rails server once more we'll get it compiled and then check our console we should be able to see that little welcome message so this creates maps it creates as Manifest creates compiled assets with actually fingerprints on them so it's it's just kind of a cool cached way of rendering your assets in your in your app on top of say the asset pipeline if you want to use it so there we go we see the console dot log I can change that too and Andi save it and it should update just after your little refresh there there we go pretty cool stuff so nothing too crazy but just think of the options here if you want to say install view or react in your app you totally totally could it comes with ports of that you can install it from the command line just like you would anything else either from the start or just after the fact so you can run like save you or well know exactly install angular let's try every react just for grins so I'll say I'll copy that kill the server run the script it'll go fetch dependencies typically with yarn add some JSX stuff to our dependency packs and we are in so I'll go and serve that up Chloe let's go check out our repo now or our actual project and we get some react code so we got David here maybe I'll change that to Annie just cause we get the hell out name react and then we'll get props from that so it's restarts compiled that those react is huge and we need to actually include hello react in our app so let's just do that for grins as well stop super PAC tag hello react oops react we save it there we go hello react to be sing and either why is that oh okay name can change that if there's known there I think he'll go to handy or not just do hello there we go yeah so there we go simple stuff kind of complicated setup if you wanted to really extend this and go crazy with what pack you totally could there is configuration files in your app by convention of web pack you can include plugins if you need more node based stuff you can modify different web pack dev server settings here include different assets say you include fonts or something or images different type of extensions you want to compile on save or serving you could totally go ahead and do that so a few things elsewhere added but that were just more or less configuration based stuff that you don't necessarily need to worry about but it's just stuff that you could modify if you want to later down the line there should be a post CSS file in here too now and Babel config if you want to update those so we use Babel in all environments and inside that you can kind of change the presets you want to use there's the default one I think the preset environment and since we're using reacts this gets appended when you install that and update it and typically I'll include like tailwind here because it's a post CSS so you'd require it and install with yarn require it and then require the plug-in itself so then you could use tailwind which would actually live in the JavaScript directory in that case which I've done in the past my course will feature that too so if you've interested in taking that you'll see that happen and how its installed and configured so okay 5-2 to version of rails maybe I'll install rails six right now so we can say let's see I had old-school we could see a pre-release all the pre-release versions bypassing this line so Jim lists rails - - remote - pre-release - e they're gonna kind of a remote gem repository of each version of rails that's in the wild which is pretty impressive there's a lot all the way back to two three eight which is not but now we're on beta 3 of 6 and pretty soon I'm guessing maybe in a month or two rails 6 will come out and we'll have a lot of cool new stuff web Packer being the default new JavaScript compiler so let me install rails and you can pass just pre-release if you don't really like if I can spell release so this should install a beta version yeah beta 3 the latest beta version comes in that and then I'll try to go ahead and create a new rails app based around that and after this installs cool so we can say rails version so this will say since we're in this project there we go so outside of the scope of your project you can do rails version and get that latest gem so let's create a new one rails new let's see what PAC 6 and I don't have to pass anything here so let's just go ahead and create that you'll notice yarn and everything runs by default wood packer just right there with Braille six we get a few new things there's a there's a blog post about it and the repo is open source so you can check it out but it's essentially adding action text action mailbox stuff I'll probably cover in the future nothing too crazy but there's some general improvements so definitely like like being able to switch to it's high up a database you want on the fly instead of having to do it manually or what's another one parallel testing which is pretty neat it's better performance in the sense so let's go ahead and go into that file impact six and I'll just open this in code too and realistically this is just kind of what we had already so we've got our channels which I didn't really need channels there but you notice they live there now instead of in the assets directory so action cable comes by default in this bit and JavaScript vanilla JavaScript is the new default too so you don't see any CoffeeScript or JavaScript in this directory which is asset pipeline old Schoology approach so now everything lives in there just javascript directory or pack tags here by default it'll look like this - and then interview you'll see it's just updated to include that pack tag by default - so we don't even have to worry about getting rid of old scripts that were already in our app in the asset pipeline chances are you're upgrading your app though so you might have to do some work just to make things sync up correctly but all-in-all guys that's pretty much it web Packer is a great tool I really recommend it on just getting your java scripts down and in order you can write really modern stuff and get away with it so that's the perk of using it to me but I also use tailwind quite a bit too so I really enjoyed that I think it quaint can't quite live with the asset pipeline so instead we serve it with this using post CSS and JavaScript so hopefully that was helpful I know this isn't a build by any means of using something with JavaScript in this video but installing webpack is pretty trivial so you could install it to your project today I think excluding projects before 4:12 or something like that so you should be able to go ahead install it manually if you want you just add this gem to your gem file run this installation especially if your before version 5 you'd run rake instead of rails and your you would be off to the races so definitely check out the repo if you have any questions about webpack or anything let me know webpack in itself honestly I'm not very great configuring an actual web pack javascript config but using this gem makes life so much easier so definitely check it out alright guys 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 dot IO for more information [Music] you

Channel: Web-Crunch

Views: 9,293

Keywords: ruby on rails tutorial, web development, ruby on rails, webpack, webpack rails, webpacker, rails 6, rails 5, ruby, rails, webpack tutorial, webpack 4 tutorial, ruby on rails beta, webpacker gem, webpacker rails, webpacker tutorial, webpacker tutorial rails, rails webpacker tutorial, rails webpacker react, webpack 2, react rails tutorial, react js, rails app

Id: yhO3PCxP5hs

Length: 20min 22sec (1222 seconds)

Published: Mon Apr 01 2019