I'm trying to install toastr by using webpacker in Rails

Question

I'm trying to install toastr by using webpacker in Rails

Now, I'm using toastr by gem 'toastr-rails' But replace it by using yarn add toastr

How I do setting app/javascript/packs/application.js?

This is application.js in my application

app/japascript/packs/application.js
import "jquery"
global.$ = require("jquery")

// JS-----
// install by yarn
import 'modaal/dist/js/modaal'
import 'flatpickr/dist/flatpickr'
require("jquery-ui-bundle")

// CSS ------
// install by yarn
import 'flatpickr/dist/flatpickr.min.css';
import 'font-awesome/css/font-awesome.min.css';
import 'jquery/dist/jquery';

import 'stylesheets/application';
import 'javascripts/application';
require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);


$("#login-button").click(function(event){
     event.preventDefault();

    $('form').fadeOut(500);
    $('.wrapper').addClass('form-success');
});


console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

config/initializers/asset.rb Do I have to add something in the asset.rb?

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your 
assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths <<             
Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css     
)

Answer 1

to use toastr in rails app with webpacker:

• install toastr with yarn: yarn add toastr
• load lib in your application.js:

import toastr from 'toastr';

toastr.options = {
    "closeButton": true
    .... add options here ...
};

global.toastr = toastr;

• create helper method (for example in your application_helper.rb file):

    def custom_bootstrap_flash
      flash_messages = []

      flash.each do |type, message|
        type = 'success' if type == 'notice'
        type = 'error'   if type == 'alert'

        text = "toastr.#{type}('#{message}');"
        flash_messages << text.html_safe if message
      end
      flash_messages = flash_messages.join('\n')

      "<script>$(document).ready(function() { #{ flash_messages } });</script>".html_safe
    end

• use it on the bottom of your layout file (app/views/layouts/application.html.erb):

<%= custom_bootstrap_flash %>

Answer 2

This advice assumes you have a node_modules folder at the root of your rails application.

If you installed toastr with the command...

yarn add toastr

Then yarn will automatically generate a node_modules folder in your application root. This folder gets created the first time you add a dependency with yarn add.

Its possible that you already have this node_modules folder and you just cant see it. This is because by default rails adds this folder to .gitignore which makes it invisible in some file systems.

You can check to see if you have a node_modules folder by temporarily removing node_modules line inside your .gitignore file then refreshing your file tree.

You should be able to see the node_modules folder at this time. Add node_modules back to your .gitignore after you've confirmed that this folder exists in your project.

Once this is done then open your config/initializers/assets.rb file and add the following lines

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.js']
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.css']

Then add the following require statement to your application.js file

//= require toastr/build/toastr.min

And assuming your using .scss extensions on your css files then you should add the following to your application.scss file

@import 'toastr/build/toastr.min'; 

This works in my environment.

Note that toastr requires jquery be loaded before it is loaded.

As such you should make sure that you include the jquery script before your <%= javascript_include_tag 'application' %> tag inside your application.html.erb layout.