How To Use Gritter Notifications in Rails 6

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 gritter_sample_app. In your console, run:

$ 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 puma.rb file found in the config folder. You will find the part to update in line 13. I used port 3004

Start up your server using rails server or its alias rails s and visit the url( mine was localhost:3004) to confirm that the app is up and running.

Next, we need to get a controller with views. Either stop your server or open another terminal to run the command. Generate a Pages controller using the command below.

rails generate controller Pages home about

You don't have to generate the 2 actions. Just one is fine. Next update the route.rb file to add a root route to the home action.

// config/route.rb

root "pages#home"

Let's make some few html code changes and add some styles to the pages.scss file.

<!-- app/views/pages/home.html.erb -->

<div class="pages">
  <p>
    I am the home page. Once you visit the site, you will meet me first. You should see a flash message soon.
  </p>
</div>

And css

/* app/assets/stylesheets/pages.scss */

.pages {
  height: 100%;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;

  p {
    margin: 0;
    font-size: 3rem;
    width: 60%;
    text-align: center;
  }
}

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

# Gemfile.rb

gem "gritter", "1.2.0"

We need to update our webpack environment.js 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.

// config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Next, we update the application.js file to require jquery and gritter.

require("jquery")
require("gritter/js/jquery.gritter.js")

And that's about it for setup.

Add a notice to the app

In the home action of the pages_controller.rb file, let's add a flash message.

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 add_gritter helper method passing in our desired options.

<!-- app/views/pages/home.html.erb -->

<%= js add_gritter(flash[:notice], :title => "Sample gritter app", :sticky => true, :time => 1000) %>

Notice that I passed flash[:notice] so that our notice message will be displayed here.

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") %>

/* app/assets/stylesheets/application.css */

.custom_gritter {
  background-color: green;
  border-radius: 5px;
  text-align: center;
  border: 1px solid white;
}

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 ie-spacer.gif from the node_modules to app/assets/images folder and update your style sheet.

/* app/assets/stylesheets/application.css */

.gritter-item-wrapper {
  position: relative;
  margin: 0 0 10px 0;
  background: url(ie-spacer.gif);
}

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 github repository.

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