Hello everyone, how has it been working with the challenges of COVID-19? Today, I will be sharing how I got gritter to work with Rails 6. According to the github Readme; Gritter is a small growl-like notification plugin that you can use to display your flash notifications. I discovered gritter while going through a tutorial that was using it but I ran into a problem. The tutorial was using Rails 5 but I was using Rails 6. Due to the changes in Rails 6 using webpacker, the gem wasn't working as described in the Readme. I had to figure out a way to make it work and I am going to be sharing that with you. Setting up a sample app to test it Create the gritter_sample_app We are going to be setting up a sample app so I can walk you through what I did. First we need to create a new rails app called . In your console, run: gritter_sample_app $ rails new gritter_sample_app Note: If you like me already have another app running on port 3000 which is the default port for a rails app, you can simply change it in the file found in the config folder. You will find the part to update in line 13. I used port 3004 puma.rb Start up your server using or its alias and visit the url( mine was localhost:3004) to confirm that the app is up and running. rails server rails s Next, we need to get a controller with views. Either stop your server or open another terminal to run the command. Generate a controller using the command below. Pages rails controller Pages home about generate You don't have to generate the 2 actions. Just one is fine. Next update the file to add a root route to the home action. route.rb / .rb root / config/route "pages#home" Let's make some few html code changes and add some styles to the file. pages.scss I am the home page. Once you visit the site, you will meet me first. You should see a flash message soon. <!-- app/views/pages/home.html.erb --> < = > div class "pages" < > p </ > p </ > div And css { : ; : black; : flex; : center; : center; : column; : white; p { : ; : ; : ; : center; } } /* app/assets/stylesheets/pages.scss */ .pages height 100% background-color display align-items justify-content flex-direction color margin 0 font-size 3rem width 60% text-align Let's also make some updates to the `application.css` file , { : ; : ; } /* app/assets/stylesheets/application.css */ html body margin 0 height 100% And we should have this beautiful webpage. Add necessary packages First, we need to install jquery and gritter using yarn. yarn add jquery gritter Next, we add the gritter gem and run bundle install gem , # Gemfile.rb "gritter" "1.2.0" We need to update our webpack file to make jQuery accessible across the app. Add this after line 1. You don't need to delete any other code in the file. environment.js webpack = ( ) environment.plugins.prepend( , webpack.ProvidePlugin({ : , : }) ) // config/webpack/environment.js const require 'webpack' 'Provide' new $ 'jquery/src/jquery' jQuery 'jquery/src/jquery' Next, we update the file to require jquery and gritter. application.js ( ) ( ) require "jquery" require "gritter/js/jquery.gritter.js" And that's about it for setup. Add a notice to the app In the action of the file, let's add a flash message. home pages_controller.rb flash.now[ ] = :notice "I am a sample flash message for the home page" According to the gritter READMe file, all we need to add now is helper method passing in our desired options. add_gritter <%= %> <!-- app/views/pages/home.html.erb --> js add_gritter(flash[ ], => , => , => ) :notice :title "Sample gritter app" :sticky true :time 1000 Notice that I passed so that our notice message will be displayed here. flash[:notice] The next problem I ran into was the styling. Due to the change in asset management with Rails 6, the gritter background style couldn't be accessed. Thanks to the gritter classname option, I was able to add a custom style. <%= %> <!-- app/views/pages/home.html.erb --> js add_gritter(flash[ ], => , => , => , => ) :notice :title "Sample gritter app" :sticky true :time 1000 :class_name "custom_gritter" { : green; : ; : center; : solid white; } /* app/assets/stylesheets/application.css */ .custom_gritter background-color border-radius 5px text-align border 1px And you should have something like this But if you still want the background styling, all you have to do is to copy the style over, copy the needed file from the node_modules to folder and update your style sheet. ie-spacer.gif app/assets/images { : relative; : ; : (ie-spacer.gif); } /* app/assets/stylesheets/application.css */ .gritter-item-wrapper position margin 0 0 10px 0 background url And that concludes this post. You can also try to follow this steps if you need help using some javascript packages in Rails 6. Here is a link to the repository. github I want to hear your thoughts. Please share them in the comments section below. And if you have other gems that you are finding hard to use in Rails 6, let me know about them in the comment section so I can write about them. Resources Github link to gritter gem Ruby gem link to gritter Npm link to gritter package Github link to gritter npm package How to make a div full page height with css Add jquery to your rails 6 app jquery gritter plugin article
