Using Webpack in Rails with the Webpacker gem

[Music] what's up guys this episode we are talking about the new rails web Packer gem web pack if you aren't familiar with it is kind of like an asset pipeline that's built in a pure JavaScript so the JavaScript community tends to use that a lot to be for their build pipelines for building out view or react or angular applications like that it will go ahead and let you write in es6 syntax and then you can take that compile it down to the JavaScript that your browser can understand and then it allows you to you know build out all your modules install NPM packages and everything like that and it will handle all that stuff for you so rails is adding support for web pack and you will effectively have two asset pipelines now you'll have the asset pipeline where you'll still write your style sheets put your images all that jazz and you'll also write your app like front-ends in JavaScript in the web pack section if you want to go ahead and do that now you've always been able to do this in the asset pipeline but it doesn't give you a good experience when you're building that stuff so what pack is actually going to allow you to do hot module reloading and all kinds of other things as well as it bakes and support for Babel so that you can write things like es6 now keep in mind that this gem is actually for rails 4.2 and up but officially they're only supporting rails 5.1 and higher so if you're using rails for 2 or 5.0 you can definitely still use this and it works great but there is a chance a small chance that they might end up doing something that makes it incompatible with those versions so keep that in mind as we go I would wait definitely until the first official release of this before you go and put it into production but let's take a look at how we can set all this up in a rails 5.1 rc1 app right now and just give you an idea of how it all works and how you put your apps together using a front-end JavaScript framework like view Jas so we're going to use view Jas it's my personal favorite out of all of them for many reasons but we're going to go build a small example with that and then I'm going to follow up with a second video showing you how we can make vgs actually turbolinks compatible which is pretty neat so with web Packer you're going to need of course web pack installed which actually is easily done for you you need to make sure that you have no Jes installed on your machine as well as the JavaScript package manager called yarn so this is more recently come out as kind of a replacement for the NPM command so yarn is what we'll use to add view Jas or any other node modules to your rails web pack setup so that is going to be all we really mean so it mentions that here in the prerequisites make sure you install node and yarn this also applies to production you're going to need yarn in production as well so that when you pre compile your assets web pack you can go ahead and install those yarn or those packages with yarn and then compile those assets for production so one of the nice things that this gem does is that it provides you wink tags that are very similar to the asset pipeline tags which means that when you pre compile your assets when you deploy all of that is going to work all very very similar to the way that your JavaScript works and they ask that pipeline so we know I have to learn a whole lot to use the web Packer setup we just have to do a couple little basic setup things and we are good to go so let's dive into an application and see how all this works so I've created this simple application it's a really really basic rails app with one scaffold for a model called pages and they have a title and that is simply it all we're really caring about is having some pages to navigate between so that we can make sure that our Java Script is working so that is a really basic application and if you are adding web Packer to your application you can jump into the gem file drop down to the bottom and add web Packer and you're going to want to do this from the github repository rails web Packer from now or for now because that is going to install the latest version but because it hasn't officially been really released yet the latest code is always going to be up on github and give you the most stable and the best features until they release that first version in which case you can switch over to using that published one so we'll install this and run a bundle to install that make sure that you have note and yarn installed around this time so once that is done we can run it once clear and then we'll run rails web Packer : install so this is how you would install web Packer and any older rails app there's also a - - web pack option that you can use to have it installed by default in any new rails app as well but we're just going to install it manually in this example so rails web Packer install is going to create an apt JavaScript directory so not app assets Java scripts this is app JavaScript and that you can see right here this is effectively the location where all of your web pack JavaScript is going to live so all of your front-end JavaScript is going to live inside of this now for your react code or your view code or angular or whatever and keep in mind that this is all now requiring us to run a separate process to monitor all of those files so normally when you do a request in rails you will have rails load and then it hits those assets and then the assets hype line pre compiles them so that your browser can use them in development well we now have to run web pack separately so we have the web pack dev server which is the one I would recommend but you can also run the web pack watcher in development and have to run that side by side with your rails app so what we can do is after this is installed all the packages which it creates a bunch of config files and installed this bin stubs and then it installs yarn add web pack and all this stuff to your rails app and it installs all of those and you can go back and run your rails server and in another tab you're going to need to run that bin web pack dev servers so that that can serve up the web pack JavaScript files and it's going to come from localhost 8080 so you want to make sure is that nothing else is running on 8080 and your rails app can run on the standard 3000 so you'll still go back to your browser and load up localhost 3000 but in this case we don't have any of that JavaScript loaded so one one thing when you get to setup is that you get a config web pack folder you don't really mean to modify any of these configs but if you want to look at all of that stuff you can go ahead and do that but the key here is that we now have this app javascript packs folder with application jeaious and there which is different than the application j/s and the asset pipeline so the comments up here show you that there's a new javascript pack tag rather than the javascript include tag that we are typically used to this is slightly different and links to that port 8080 version that comes from web pack in production it will actually just link to the file so we need to put this in our layout if we want to use any of our JavaScript from web pack so we have to mention these files separately than the ones that we want to do with the asset pipeline so you're going to keep both of those still and you can load all of the JavaScript like the ujf stuff from rails if you want it and you'll keep that with your JavaScript include tag but your web pack stuff will be separate using the JavaScript pack tag so if we save this this is going to load that application yes and our app and if we refresh this page we get hello world from web Packer so this works and is now including that and it's coming from that localhost:8080 that separate servers that we have right here this is running and serving up that javascript file and inside of here we can do whatever we want so we can create and reference modules and anything that we would typically do with node modules or JavaScript modules we can create let's say let's make an app javascript go rails module so we'll do that and let's split this window and say app JavaScript go rails index J s and here we can export default and let's just say go rails is true and we'll export that so that we could require it or import it in our other JavaScript files so we can say import go rails we can give this whatever name you want from go rails and this is going to reference that javascript go rails directory and it's automatically going to run or load up that index J s so we're effectively assigning a local variable here called are called go rails that imports that stuff that it exports which is going to be this go rails is true and so we could in console dot log go rails here and if we save that we can go back into the browser and we'll see that there's object go rails is true so we have imported code from that other file and loaded that into our application yes and something to note here is that if you comment this out and you say hello from go rails and hit stay is you don't have to do anything and you can go back to your browser and it's already caught that change recompile the JavaScript and it's actually reloaded it in your browser which is really nice because if you were doing development of heavy JavaScript stuff you need to be reloading that pretty regularly so you can get those new changes I'm sure you're familiar with that process of hitting refresh constantly this takes that away from you and does that automatically so that you don't have to worry about it so it's pretty nice and convenient when you're building out your front ends like that when you want to make sure that you make changes whenever you save those files so this is pretty cool allows you to then go build out your modules inside the app JavaScript folder organize it however you want and then you can do your importing and everything between those modules just like you would with including modules and Ruby or referencing other classes and things so this is all self-contained inside of that app JavaScript folder and you can add other dependencies that you want using yarn and one thing I didn't point out was that you now have a package JSON this is pretty much the same thing as your gem file you reference the packages that you depend upon and their versions and then when yarn is run it will install all of these so then you can add packages to this list once yarn is run and then it will update the yarn lock which is of course pretty much the same thing as the gem file dot lock it locks down those versions that you have run and then it makes sure that when you compile this for production you end up getting the exact same version so you don't get anything unexpected when you deploy to production and maybe accidentally got to newer versions so this takes care of your JavaScript dependencies pretty much the same way that the bundler library does that for your Ruby dependencies so that is really nice as well now I know I mentioned I was going to install the UJS here well one thing that we can do is we can use rails web Packer : installed : view to install an example view application so it's very very simple but we can install that in our rails app by running this command there's also an option for react and for angular that will give you a very very basic example that gives you you know place to start and think about how you want to organize your front end the view one also comes with this really cool so if we go into the view stuff there's hello view gif and app top view which is actually a single file component so this single file contains the template as well as the JavaScript for that component and then it also includes some scope styles for it as well which is really nifty because this is going to be a single file that includes all of the things that are related to that component so it's fully modular and you're not putting your template in one place and you're not putting your template inside of your JavaScript for the component and you're also not putting your styles in a totally different place or anything like that so it's all organized nicely inside of this and separated into their different sections here so this hello view j/s is actually what requires view so one of the things that it did when we ran that command was that it actually did yarn add view view loader view template compiler and that actually goes and it tells yarn to add that to your local package packages JSON so now our package is JSON has view view loader view template compiler and that is added to that so you can either use yarn to add dependencies or you can use this file directly and edit it and then run yarn to install those so it's usually easier to run yarn ad and it will go ahead and do that for you so we now have this hello view J's which is the actual location that we want to insert into the browser so if we were to go back to our layout application HTML ERP rather than doing our application J s we could do how view as the include and this is going to and include that and then compile it and then run that in the browser so if we hit refresh we're going to get an this time because that hello view jazz isn't in the manifest JSON so inside that manifest a JSON it says which files are available in this case we actually needed to restart the web pack dev server because when you use those helpers they actually change the config web pack loaders so that means to be restarted so that it picks up that config change and then if we refresh this page we get hello view at the bottom and you can see that you were running a view in development mode and everything is working so we now have a view app but unfortunately if we navigate to another page it does not include view and you can see that it disappeared because turbulance had cached that version and didn't rerun it so one of those things that we could do is change the event listener - oops - turbolinks loaded the same thing as we do with all of our other Java scripts this simply inserts a element at the very end of the body and then tells view to initialize on that element so this is pretty straightforward how that works but of course if we want that to run on every page we need to run that when turbolinks loads so if we hit show turbolinks runs the load event triggers view to render here if we hit back that all works except the browser back button actually does weird things so it's going to do something kind of unexpected and the reason for this is because that turbolinks is actually caching the final HTML on the page because we are dynamically rendering stuff with UJS that is not actually the HTML that rails would have given us which we really want to cache this is actually rails + VJ s is HTML and we don't want turbolinks to actually catch that so we have built a turbo or a view Jay s mixin that will make it turbolinks compatible which I will talk about in the next so so what Packer is a pretty straightforward implementation with rails it gives you a lot of nice integrations that are familiar so that javascript pack tag in our layout is very familiar to what we are normally doing we do now have to run that additional process here in the terminal so things like Foreman where you can set it up to say well we need a web process we need a web pack process we may need a sidekick process and it can manage and run all of those and then shut them all down when you want to stop doing development that can be very useful when you're using something like web pack now with your application because you have to manage rails web pack sidekick maybe some other things like elastic search I don't know it depends on your application but if you add that it now adds an additional process which can be conveniently managed by formid will talk about Foreman in the future but if you want to learn anything more about web hacker their readme is really good it goes into a lot of the configuration stuff as well and talks a little bit about well if you wanted to include maybe some sass styles inside of one of your JavaScript modules here you can also use the stylesheet pack tag and it talks about how you can use require instead of the import like I did and you just need to learn a lot more about how the modern JavaScript stack works if you want to dive into a lot more of this deeply so this readme is still work in progress but one thing I want to mention before we go is that the deployment process is actually no different than what you're normally used to so that's really nice so this gem is actually designed so that when it sees that the asset precompile command runs it's actually going to insert web Packer compile right afterwards automatically so the only change on your server is that you're going to need node and yarn installed you probably already had node installed so that you could compile the asset pipeline and so yarn is the only real dependency that you would need to install this time so that is really nice and gives you webpack with very little changes to the way that your normal workflow works so that is great you can also link the sprocket assets as well so if you had any images in the asset pipeline that you want to link to inside of your web pack stuff you can go ahead and use er D as the extension in your JavaScript file inside of the web pack folder and you are good to go so there's instructions here for react angular typescript or angular with typescript I mean and view jazz as well probably some more being added feel free to add more it's a poor request this is still in active development so things are bound to change but for the most part the way that you interacts with this gem is probably going to stay exactly the same they're just going to be back building out little extra additional features and customizable things so that is a quick introduction to web Packer we're going to be using it more in the future I'm going to follow up this episode with an episode on that javascript mix in for view jazz to make it turbolinks compatible I'll explain more about what the real problem with it is and how we fix it but for the most part it's a very very simple solution and works really nicely and we've got a node module that you can use and we'll show you how to use that and that episode as well so until then I will talk to you later peace [Music]

Channel: GoRails

Views: 22,015

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases

Id: Szs1DwEMhPg

Length: 21min 19sec (1279 seconds)

Published: Mon Apr 10 2017