How to use a dependency when rendering a handlebars page?

L

lyrion2020-03-23 06:03:02

Node.js

lyrion, 2020-03-23 06:03:02

Good afternoon, I just recently started to get acquainted with the backend, so don't throw slippers) I

use the Express + Handlebars bundle. There is a certain page which I, for display, accordingly render. This page has my own script in which I would like to use one of the dependencies declared in index.js.

Now it looks like this and it doesn't work:
index.js

const express   = require('express');
const hbs       = require('express-handlebars');
const anime = require('animejs');
....
app.engine('hbs', hbs({
    defaultLayout: 'main',
    extname: 'hbs',
    layoutsDir: path.join(__dirname,'views/layouts')
}));

app.set('view engine', '.hbs');

app.get('/', (req,res) => {
    res.render('loginform',{
        csspath: path.join(__dirname, 'styles', 'styles.css'),
    })
});

loginform.hbs

<body>
   бла-бла, какой-то html
   <script>
      let current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: 0,
                duration: 700,
                easing: 'easeOutQuart'
            })
   </script>
</body>

Accordingly, I get an error "anime is not defined" .
Of course, I can specify this script as a module and include this particular dependency via import, but this is clearly not optimal.
Please tell me which method to use or at least in which direction to dig.
Thanks in advance ;-)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

syxme, 2020-03-23
@lyrion

The matter is that you try to connect functions of server part with the front.
const anime = require('animejs') will only be available in your program (index.js)
You need to do something like this:
First, specify a folder with static assets
app.use(express.static('public'));
Move your animejs.js script to public folder
Add to loginform.hbs

<head>
<script src="/animejs.js" ></script>
</head>