Webpacker with Rails 6.1 to import stylesheets, Javascript, and images!👨🏾‍💻Lets Code!

in this video i'm going to show you how to include javascript and css in your rails 6.1 application using the now included webpacker tool webpacker is a ruby wrapper for the popular javascript bundling tool webpack this program takes all the front-end dependencies of your application such as javascript libraries and style sheet files and compiles them into a compacted format for efficient delivery in your production application in older versions of rails the best practice was to use a rail specific feature called the asset pipeline which performed many of the same functions to use the asset pipeline in rails version 3 or 4 you would put your style sheets javascript files and images in the app slash assets folder under their respective subfolders there would be a main file named application.css or application.js with a special requires statement syntax for including all other related dependency files including those that call in third party libraries third-party libraries like font awesome or twitter bootstrap would typically be packaged into their own ruby gems or just unzipped into a reachable folder in your application and included by a required statement in this way but as webpack became more of a standard tool for use in front-end frameworks like react and view the rails maintainers have responded by adding this webpack integration as web packer in rails version 5.1 the asset pipeline also became renamed to sprockets and is now an independent ruby gem one of the advantages of webpacker is that it's compatible with the popular javascript package managers like npm and yarn so installing and upgrading front-end dependencies can be more automated as you'll see so i'm going to start this off by installing the latest version of rails which at this time is version 6.1 and then i'm going to start a new project called onlyquag which is going to be a little fan site for my dog named queequag now that the project is initialized we're going to make a simple controller named home with a single view to render named index in the gem file i'm going to add slim so that we can use our slim templates and then i'm going to create a very simple index page in slim making use of a few very basic html tags and then we add that to the routes file now i'm going to try to start the rail server so that we could take a look at our initial landing page and it won't run because webpacker is not installed please run rails webpack or install it says so let's go ahead and do that and it tells me that webpacker cannot install because my node is not the correct version so this goes to show you that webpacker is not only a feature of the latest rails but it's a dependency now along with node by the way i totally missed the error about this that came up earlier when we were initializing our project which came up right after the first run of bundle install luckily i've got nodes set up on my local system installed through the node version manager nvm so i'm going to go ahead and set to the correct version right now the long term stable release at 14.15.0 and we're going to do this by making a mvmrc file echoing that version number into the file followed by the nvm use command now when i try to run rails webpack or install again i get a different error yarn is also a dependency that needs to be installed so i'll install yarn now by running npm install yarn dash global so now when we run webpack or install it works as expected and we can run the rail server something interesting to note here is that as a rail 6.1 it seems that the rail server command runs both the puma rail server and webpacker in previous iterations of rails you'd need to run webpacker as a separate process in a different terminal window using the command bin slash webpack dev server otherwise your style sheets and javascripts wouldn't be compiled and served in development let's take a look at that web page now when i loaded up in the web browser we can see the basic text with some very plain formatting this is where webpacker is going to come in and help us spice this up i want to add the twitter bootstrap styling system a dependency we can import into the project using webpacker and these node package managers so we're going to go ahead and do that by running yarn add bootstrap which will fetch the latest version of bootstrap 4.5.3 that gets stored in a special folder in our project named node modules and wonder what like and subscribe means anyway if we look in the application layout template you can see a style stylesheet link tag and a javascript path tag the command ending in the link tag is for use with the old way of compiling these things through the sprockets rails asset pipeline but we're not using that today they don't seem to have fully deprecated this feature yet but we want to use webpacker instead the pack tag refers to files that you're going to be including from webpacker so let's go ahead and change the style sheet link tag to a stylesheet pack tag because we want to build our css using webpacker and not the asset pipeline and then i'm going to build a stylesheet by making a file named style slash application.scss and put a simple color change in there where h1 turns to red and then i'm going to import that into our application.js file yes we're importing styles into our js setup file and as you can see here the color of that heading text has changed to red so our styles are propagating through webpacker now next we want to get all the twitter bootstrap styling libraries loaded into our project and that can be done by importing bootstrap's main scss file into our application.scss file the tilde syntax and our path name tells webpacker to search the node modules folder for the file that we want to import now when the page reloads we can see the twitter bootstrap styling has changed the text font there's a few features of bootstrap that make use of javascript and you need to include some additional dependencies for them to work one that comes to mind are the dismissable alert buttons when i click the x on the alert box it disappears so to enable this functionality you need to import bootstrap's javascript library dependency and this also makes use of some third-party libraries in javascript jquery and popper js which we'll install using yarn and also import so let's start working on this by writing the html code for the dismissible alert box into our view template then we're going to download the jquery dependencies into our node modules using yarn by the way i made a mistake when i was initially doing this in that i couldn't get the name of the popper js library correct when i was listing it in my yard install command something that was really confusing was that the popper js project recently renamed their node package name to at popper js core which is misleading if you're trying to use it with bootstrap because bootstrap version 4.5 uses a somewhat older version which goes by the package name popper.js i was silly in that i overlooked this unmet pure dependency warning message that displayed when i installed bootstrap originally it told me exactly the needed name and version number right there that would have saved me some time but eventually i figured it out and got the name correct so we got that resolved and here's what the import statements look like in my application.js file and now let's give this a try in the browser there you go the dismissable alert button now works so far i've showed you how to integrate stylesheet and javascript assets into your project now the third important thing i want to demonstrate is adding image access to your build in my app slash javascript folder i've created an images subfolder where i have a picture that i'm going to put on the website you can reference an image file in webpacker by using the image pack tag command in your view template but this feature has a weird quirk first you have to import the images directory into your project using require.context in your application.js file and then any file path you reference using image pack tag must be preceded with the word media in the path so here you can see my require context statement and here in my template is my reference to that image preceded by media so there we reload the web page and we can see our picture of the quick wag the final topic i want to cover is production deployment now the specifics on how you run this step are going to vary depending on your production server setup and the deploy tools that you're using but the step that will run is going to be the same you need to run the rake task rake assets pre-compile which will prompt webpacker to build all your style sheets and javascripts into a compressed single file format for efficient delivery in a production setting your web server should not be running webpack dev server instead it's going to be serving the static assets that webpacker builds let's do a little demonstration of that so i'm going to set my environment to production and render rate task which by the way rake assets pre-compile runs both webpacker and the sprockets asset pipeline if you're still using it so it's going to compile all of the assets from both systems and the outputs are going to be placed in the public folder of your rails application which is served by the rail server as static files so when we look here we can see that the assets built under public each file has a funky looking code after the name and that's the shaw hash which is used to help prevent any client web browsers from accidentally caching an outdated version of the file now i'm going to run the rail server in production mode i'm going to set the rail serv static files environment variable here so that it knows to serve the static assets in the public folder and now we can try loading the web page again and it loads nice and quickly that concludes my tutorial on using webpacker with rails version 6.1 i hope you found it helpful please hit the like button and subscribe to my channel to keep me making content like this see you in the next video

Channel: Winston Kotzan

Views: 4,819

Keywords: rails, react, webpacker

Id: NZMYRZ2Q7l8

Length: 11min 59sec (719 seconds)

Published: Wed Dec 16 2020