Alpha preview: Rails 7 w/ esbuild + Tailwind CSS

so rail 7 is shaping up really nicely we're going to have a alpha release out pretty soon in the next few weeks i hope and what's really exciting about this update in terms of the javascript integration that i've been showing a bunch of alpha previews from is that just in the last few weeks it's really come together for that alternate path as i've said the default in rails 7 is going to be the new approach of using import maps where you're not even required to use any form of node have any node installed or have any of that machinery on your machine but of course if you want to do jsx or if you want to do other forms of transpiled javascript you're probably still going to need a bundler or transpirer and that's totally fine rail7 is going to ship with a much better way of doing that than what we've had with webpacker it's going to be much simpler in the sense that the integration between rails and this javascript bundler and transpiler is very thin it is essentially a handoff where we rely entirely on the javascript ecosystem setup to do the initial build just like you would in any other project that's purely javascript based and then that build is getting handed off to rails via the asset pipeline through a builds directory in the asset path so that creates this very easy handoff where you can refer to these build outputs in your rails application and have everything work as though you were still using sprockets except of course that your javascript and as we'll see soon here your css can be built this way so i wanted to take a opportunity to show off what we have now it is two new gems one called js bundling dash rails and the other one called css bundling dash rails which is something new so let me show you how that works in an application that is going to use es built and tailwind through a node setup where both are being bundled at the same time with a rails application this new application is being generated off rails main all of the machinery needed to make this work is in rails main right now this is the main branch that will be cutting new gems from alpha gems very soon so what we're going to start here is a new application and as you can see i have two attributes to that beyond the dev to make it work with the github checkout of rails main that is dash j and you can see i'm passing es build here as the option that'll set up the new rail skeleton to use es build to compile the javascript in that setup the other choices that we have through the js bundling dash rails gem is rollup and webpack so you can pick one of those three bundlers to bundle your javascript i really like es build it is very quick it has great defaults it has defaults for both jsx and for typescript so for a lot of applications you won't even need to do much if any configuration at all and then we also have dash dash css and that is the interface to the css bundling dash rails gem which also have three options there is tailwind for a default configuration of tailwind with jit compilation a basic post css setup with all the new css standards that are coming and also a setup for using dart sass so you can pick one of those three setups and have your rail skeleton pre-configured with them we're going to start with these two options es build and tailwind and as you can see now when i run my rails new command there's sort of a lot more going on it looks more like the webpacker build setup as as we used to have it versus the import map default which is a lot slimmer but this is the work to set everything up when you want to use node and you want to use these tools that are available only through that ecosystem so let's jump in here to our new application and i'm just going to create a controller that's called a demo and we're going to do a show action system we have a place to play with both tailwind and es build so let's uh start something else that is a new part of this setup which is bin dev the thing with these tools to bundle both tailwind css and using es build is that they each require a watch process so now you would have to have three different processes you'd have to start your rail server you'd have to start your css building uh bundling and you'd have to start your javascript bundling so with bin dev that uses this setup with a proc file we can start all three of them at the same time so as you can see we're starting uh tailwind css we're starting es build and we're starting the rail server with this setup um and let's jump to a browser and see that we're actually running um yup this is actually on the port for a thousand for now i'm gonna change that back to port 3000 when i fix up the gems for this but as you can see we have this base setup and if we go to demo show not demos but demos last show you can see we have this file we can put something into and the first thing we're going to put into that is the setup for tailwind or rather the um [Music] not the setup but the source we want to use where tailwind is going to compile a applications css file that uses just the classes that we're using in this tailwind example and i'm just grabbing one of the tailwind ui examples that's free off the site pasting that in here and let's go back here and see we're actually going to put it in the index file which is up the show file that we just set up i'm going to paste this over and here we go now if we jump back to the console you'll see that a rebuilding step has been done here by the css process if you look back and see what that has made in terms of the output we can go into assets bills and then look at the css and here you'll see the 800 lines of tailwind css that we need to generate in order to use that component that i just pasted in right here so let's have a look at that component and check that everything actually works and it does a nice stock tailwind component that works with the jit setup where the jit compilation step makes sure that we are only shipping the classes from the very large tailwind library of classes that we're using in the application so that's a great first step and you can see another change here let's just try to see if we delete some of these classes and we save and then we jump back to the terminal you'll see that once again the css has been rebuilt so this is how you work with tailwind you just start using the tailwind classes and as you start using more and more of them your application css will grow not a issue um you can actually also do a full configuration of this tailwind setup which is one of these advantages with the full node based setup is that you get to specify tailwind exactly how you want it so if you're doing customizations to it this is a great setup there is also a tailed wind config file that you can set up and specify here you can see were the paths that are being used to purge the production css are being taken from these are the paths that are being watched system will make any changes it'll be examined and see which class names are being used so that's tailwind it's a very basic installation you'd go to tailwind's site and you'd figure out whatever configuration you want the whole point of these gems is not to recreate webpacker or we try to set up everything in a sophisticated way for you these are just very basic setups and then you can follow any tutorial on the web for how to use these frameworks further but now let's have a look at es build with es build as i said it's a great new javascript bundler that's super duper fast and it ships with some great defaults in such a way actually that we're not even using a config file right now by default that may change in the future but we don't actually need to to just get started with with react so let's um install the libraries that we need for react we're just going to use yarn here and we're going to add react and react dom and actually as we add those things and jump back you'll see that the javascript process here has picked up two changes to node modules and is ready to use those things without us even having to restart the server that's pretty neat so let's set up our first react component here as you can see this is the default setup that uses stimulus and turbo out of the gate but we are going to create a new components directory and we're gonna use that same example we've been using several times in these videos which is the clock jsx example straight off the react.js website you see we're importing react and we're importing react dom and then we're going to render this into a div with an id of clock so first let's import that component that we just set up uh it's going to be the clock component and then we're going to give it a space up here where we import the clock component and again if we jump back to the console we'll see that the css has changed or has recompiled because we made a save to that html file it was looking for any new classes we didn't add any so the build is done and then also the js setup has done another build okay fine let's jump into the browser again and see that voila here we have our component and as you'll notice here of course we have tailwind down below and then we have our react component up above but we can also mix and match those things of course such that we can use some tailwind let's just do for example font extra bolt we'll use that in our react component class equals font extra bold again if we jump back we'll see that the es build has rebuilt our clock and then let's jump over to our browser and see that we're getting the component rendered here with tailwind styles applied to it so this is just a very basic uh showing of using these two things together it's uh pretty easy to get going if you accept the fact that you're going to have a full node setup this is a great combination as i said it is these two gems js bundling for rails that does the setup where you have es build you have rollup js you have webpack in their very basic forms and you can use any of them and you can even switch back and forth between them the conventions this all rely on is the fact that we're going to use a shared standardized entry point you can reconfigure this entity point in your configs or script setups and they are all going to by default compile into this builds directory that is mounted through the asset pipeline and now we can refer to it as though it was any other output from the asset pipeline the same thing with css build as you see the readme file is almost a copy and paste what we have right now is tailwind post css and dart sass it works in exactly the same way and if we have a look here at actually our package a json file you can see what's going on so we have these build scripts there's a build script for eos build there's a build script for css and those things are called by the proc file using forman with the bin slash dev setup so that we can run these three processes at the same time oh this is where we want to put 3000 if we want to use the conventional uh port for this i'm going to fix that in the gym and that is the setup as you can see es bill didn't have a configuration you're gonna have a configuration if you use rollup or if you use webpack but there's very little to it you can change this as you see fit you can add your dependencies as you see fit but we start with so little there are no none of these dependencies that are inside of rails itself and by you bind you to certain versions of these dependencies you can update them as you see fit this is a very standardized integration with the javascript ecosystem and i think it works a whole lot better than trying to wrap it now that we have the default with import maps for rail 7 a setup where you don't even need any node setup at all in fact the dash dash css tailwind configuration for the skeleton also works with the import map setup it uses the tailwind css rails gem that does all the tailwind purging through ruby actually so you don't even need node at all for that either that's a great option as well but this is it this is where we are right now i hope to have alpha versions of rail 7 out shortly but if you take a look at these gems you can actually use them today if you're starting a new application or you have an existing application on rail 6 you can use the js bundling dash rails and the css bundling dash rails gems to set it up just like i showed in this video and if you haven't already check out this write-up i did about rail 7 and all the three great answers that we have to javascript in 2021 i think this is a really solid path that will satisfy pretty much anyone trying to do rails with javascript in a better way than we've ever done it before so i hope you enjoyed this and see in the next one

Channel: David Heinemeier Hansson

Views: 13,046

Rating: 4.9728355 out of 5

Keywords:

Id: JsNtLiph87Y

Length: 15min 26sec (926 seconds)

Published: Wed Sep 08 2021