Using Gritter in Rails 6
Tags: rails, rail6, gritter
Published: 2020-07-07 06:06:38

---
title: Using Gritter in Rails 6
published: true
description: A simple guide to using gritter in Rails 6
tags: #rails #rail6 #gritter
// cover_image: https://unsplash.com/photos/Bj0SAWTQTN0
---

# Introduction

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

```ruby
// config/route.rb

root "pages#home"
```

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

```html
<!-- 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
```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
```css
/* app/assets/stylesheets/application.css */

html, body {
  margin: 0;
  height: 100%;
}
```
And we should have this beautiful webpage.

![Landing page](https://dev-to-uploads.s3.amazonaws.com/i/0zz2dpf82brpbd5n98mo.png)

### 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`

```ruby
# 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. 

```javascript
// 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

```javascript
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.

```ruby
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. 
 
```erb
<!-- 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.

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

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

```css
/* 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

![Web page with gritter flash message with custom style](https://dev-to-uploads.s3.amazonaws.com/i/7zzk4gknui64wq5xnxn1.png)

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.

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

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

![Web page with gritter flash message with default style](https://dev-to-uploads.s3.amazonaws.com/i/mmcowacc8ozhsxus24xo.png)

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](https://github.com/Nkemjiks/gritter_sample_app).

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](https://github.com/RobinBrouwer/gritter)
* [Ruby gem link to gritter](https://rubygems.org/gems/gritter)
* [Npm link to gritter package](https://www.npmjs.com/package/gritter)
* [Github link to gritter npm package](https://github.com/jboesch/Gritter)
* [How to make a div full page height with css](https://www.w3schools.com/howto/howto_css_div_full_height.asp)
* [Add jquery to your rails 6 app](https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker)
* [jquery gritter plugin article](https://www.jqueryscript.net/other/Classic-Growl-like-Notification-Plugin-For-jQuery-Gritter.html)