How to use ESBuild with JS Bundling in Rails

[Music] hey guys this episode we're going to be talking about js bundling rails and how to use es build to bundle your javascript ultra fast in rails now so js bundling is kind of a interesting middle ground between the asset pipeline which can't really do a lot of modern javascript and webpacker which is kind of a ruby wrapper around webpack that obscures the javascript config for you but it's always changing webpack is always changing so then webpacker is also always changing and i found that hard to keep up with and things have broken several times and it's been kind of complicated and i always wish there was a middle ground between the two and js bundling is exactly that what this does is basically set scripts in your package json and rails just says hey run whatever tool you need just output the files to the asset pipelines builds directory and then rails will serve them up using the asset pipeline just like they always have so we're going to use kind of the best of both worlds where we get to use our modern javascript tooling but we can also use the asset pipeline to integrate that cleanly with very little changes in fact the js bundling rails library is actually super simple there is a rake task that enhances the assets pre-compile to run that build command i mentioned before and the rest of this is just templates for yes build roll up or webpack to help you get started and set up so this works with rails 6.0 and up if you're on rails 7 like i am here you can actually say j es build to specify the js bundling library that you would want and then you can also do the css bundling and say we want to use bootstrap so let's go create this application and while that is running i want to show you es build which is actually an extremely extremely fast bundler for javascript it's that fast because it doesn't support a lot of complex features like chunking that can make your build tool slower and a lot more complex so es build intentionally is lightweight and very fast and sticks to those uh you know rules as they add and decide on new features so yes build is what the phoenix framework is actually using by default which i think is a really great option for rails as well so we're going to dive into this and how to set it up it's a little bit different than a webpacker because it's more minimal and we're also going to talk about a library made called es build rails to help make things a little bit easier to import in es build for your rails apps so let's take a look at our brand new rails application with js bundling set up the first thing that i want to point out is where the command is running from the js bundling build command basically the script section of your package json is going to have a build script that you can define however you like it's got a default here that runs es build compiles any of the files in app javascript it bundles them and outputs them to app assets builds same thing goes for the build css you can use sas you can use post css you can use tailwind it doesn't really matter what these commands do or run it just needs to run something and output the files to the app assets builds folder so under app assets the config is now changed to include the builds folder and everything inside of it with the link tree here and that is where those files will be dumped out and basically we don't save those to get we let the commands compile there and send those over so then our style sheets and our javascript files inside of the app assets directory are just used for source code so they're not actually compiled by the asset pipeline or anything and they're basically ignored by the asset pipeline so this is something that might feel a little bit weird but that's exactly how it needs to be set up so you don't end up with two application js's or two application.css so under app javascript we now have application.js this is where our javascript file is defined we can add more to that and we can add other files at the top level we don't put it under packs or entry points or anything like that it's just at the top of app javascript and then when we do an import for our files we have to use relative paths here so we need to say dot slash at the beginning or dot dot slash to go upper directory and that's how it kind of depends or it tells the difference between local files and node modules when it's trying to import so here in our controllers it's going to import index.js which is then going to import application.js and then finally it's going to register our controllers one by one now one of the frustrating parts about es build is that out of the box you have to register each one of these stimulus controllers manually which gets to be very tiring because you have to write a line or two lines in here for every single controller you define it's not like webpacker where you can just import an entire directory by using require context there's not really a function like that in es build so rails now comes with this bin rails stimulus manifest update um that will rewrite this file for you automatically to include the new um controllers using ruby but that is also not my favorite solution because it's easy to forget to run that command and then you don't have your new controllers so what i have written is this yes build rails plugin which uses the glob functionality in node to actually allow you to import a directory in all of its nested children you can also use this for importing all of your controllers from your stimulus controllers directory and then register them one by one automatically so this is a nice improvement over that so that we can kind of have that same require context functionality that we did in webpack so this gives you a nice uh you know balance between the two so in order to use this we're going to need to do a few things we're going to need to go into our app and we're going to run yarn add es build rails and that's going to add this package and then we can add a file called es build config.js and we'll paste in this config which basically is going to take the builds and output them to app assets builds um it's going to compile the javascript from the app assets or app javascript folder and then it will use the es build rails plug-in here to allow us to replace this registration here with our example from the readme so we can say we'll just import all of the controllers matching that pattern and then register them with our stimulus application so that's going to be a great improvement here for our javascript and we can have all that working now the other thing that i want to mention is that we have to now run the build commands automatically during development which means we need to run those separate from the rail server because it's not built in like the webpacker integration was so we need to run the rails server the yarn build and the yarn build css commands and rails has now introduced a procfile.dev to your app so that you can run this and have those running all at the same time and it's also introduced bin dev to reuse foreman um and you could change this to overmind or any other tool that you would want but basically this is going to use foramen to start that procfile.dev for you out of the box so you'll now instead of running bin rail server um you're going to run bin dev to actually start forming or you could of course run this format command directly if you wanted now if we hop back to our esbuildconfig.js file this is not going to be detected automatically by es build so we actually need to change our script here and say node esbuild.config.js basically have node run that script for us in order to uh load yes build and everything so that when we run yarn build in our directory it will actually execute yes build for us now with that executed our builds directory is now going to include the application.js which is going to be the bundled version of all of the stuff that es build imported so everything here is the output of that it's a big old file with everything that we included and now the rails application.js file can be imported in your layouts so application html.erb is going to have your javascript include tag instead of a pac tag because we're not using webpacker and notably the js bundling and css bundling are going to defer these scripts by default so if your javascript is needing to run before your page loads then remove the defer is true but this is generally a good option to have you just might need to update your javascript so that it works with this so with that said there um really isn't a whole lot that we have to do here so we can go and say rails generate controller we'll call it main we'll give it an action of index and we can then go to our routes and then say root main index and then we can boot our rails application so we're going to run bin dev now in order to uh basically set all those up and it's going to output our application css and our javascript file to the builds directory and when we go to localhost 3000 we're going to see that we get main index here with bootstrap styling so it's actually applied bootstrap here we have all of those utilities and everything from bootstrap and we can use the buttons and all of that so if we go into the main index.html.erb we can add a div here with the data controller equals hello and we'll close this div and the hello controller should be mounted to this and change the text in the div to hello world so we can run this and we should see that the javascript is executed and we're good to go and then by having that watch command in there we have the ability to edit our javascript it's going to automatically trigger or recompile but it's not going to trigger a reload on the page that's one of the features you don't get from webpacker using js bundling it's not going to automatically reload the page for you but if we do refresh our page the javascript's already been recompiled in uh 0.2 seconds or whatever and voila we now have the latest javascript so um this isn't as full featured as a webpacker was with the bin dev server and all that but um i believe you can pretty much set this up to do something like that if you wanted to um so yeah this is going to automatically watch um that is a flag that we have here in the es build config you can add more things in here to specify the target so if you want to have different um es versions that you want to target maybe for older browsers or something like that you can define the other options in here you can define how to treat pngs if you want to convert them into data uris to be embedded in your javascript you can do all kinds of cool things like that as well um so that is kind of the high level js bundling the es build rails command allows us to import all of our you know application our action cable channels using a simple import like this if you've got a lot of javascript to set up things like bootstrap modals and tooltips and whatever you can import a directory in your app javascript and it will go ahead and take care of all that stuff for you so this is a really nice plug-in to use with es build in rails there's a lot of good docks on this it's very straightforward to use and it's very very fast so if we run in a new terminal r yarn build this is going to run in a very very quick amount of time especially compared to our webpacker compiles that at least for me for some of my apps it was taking like a minute in production or something and i've seen people take 10 minutes or more to compile their large applications on a deploy so it's pretty awesome to see how fast this is and how nice it is to use modern javascript tooling like yes build with rails so that's kind of it for this episode there's not a ton to it it's mostly all handled by the package json build script so you can define whatever command you want in here rails is going to take it run it and then expect that the output was dumped in the app assets builds folder and it's going to go from there so that's it for this episode in the next one we're going to talk about the build css so that we can use css bundling with the tailwind jit using the actual tailwind cli officially instead of having to go through webpacker and all that setup we can use the official tooling from tailwind we can also use bootstrap here through sas and you can set up post css directly there's a lot of options for your css and it really is a great option too for it for that so that's what we'll be talking about in the next episode and i will talk to you then peace [Music]

Channel: GoRails

Views: 2,640

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, Rails 6, Action Text, Active Support, Action Mailbox, Webpacker, Active Storage, Active Record, rails testing, ruby on rails testing, ruby testing, devise, rails devise

Id: qOptalp8zUY

Length: 15min 7sec (907 seconds)

Published: Mon Oct 04 2021