How to use toastr package inside AdonisJS? (Or any other external npm module?)

My AdonisJS version is: 4.1.

Hi. I am going to use toastr npm package from https://github.com/CodeSeven/toastr to deliver flash messages to view as “Toastr” windows. I created start/hooks.js file to initialize it:

'use strict'

const { hooks } = require('@adonisjs/ignitor')
hooks.after.providersBooted(() => {
  addToastrPackage()
})

const addToastrPackage = function() {
  const toastr = require('toastr')
  const View = use('View')
  View.global('toastr', toastr)
}

and View file to show toastr:

@loggedIn
{{ toastr.success('User has been successfully logged in', 'ApplicationJS') }}
</div>
@endloggedIn

and I got error:

Seems to me, that I should additionally add jQuert to start/hooks.js, but I am not sure. If you will be so kind to help me with this. Thank you Guys!

P.S. Please let me say, that I installed toastr package with npm i toastr and I see in in node_modules/.

1 Like

Hello and welcome to the forums!

Toastr seems to be frontend only library. Since it’s front and AdonisJS is backend, you don’t really need it to initialize in backend.
There’s guide how to set up frontend packages with AdonisJS:
https://adonisjs.com/recipes/4.1/frontend-assets

You can do the SCSS part too, but sounds like you’r after the Scripts part :yum:

1 Like

Hi. Indeed, it is a fronted part. But how to initialize this package to be ready to use on frontend side as JS function to open simple toastr message?

Import it in your main entrypoint. Like you would do with regular .html and .js
.js part is still the same, .html is just renamed to .edge

Basically import it in your .edge
<script src="myscript.js"></script>

And then use it in Edge files like you’d use it in good-ol’ HTML :slight_smile:

1 Like

Thanks. It works. Is there any other method to do it in more elegant way, similar like in backend?

You can create one base layout .edge file and do all imports / initializations in there
But I think that’s about as clean as you can get