Partials not working with Express, express-handlebars

Question

Partials not working with Express, express-handlebars

769 Views Asked by Titan1315 At 11 April 2025 at 10:16

I was excpeting the partial to show up as the header and the partial code is this `

<header>
  <a href="/">Home</a>
  <ul>
    <li><a href="/upload">upload</a></li>
    <li><a href="/library">Library</a></li>
  </ul>

</header>

`

along with this I call the partial from my template and I call it here.

`

<body>
    
    {{> header}}
    
    {{{body}}}
    
    
  </body>

` My template works just fine and switching pages works fine to I just cant get the partial to work.

I have tried changing the file name, tried all diffrent file paths, printed the file path. (it was the right file path) I have also tried all the solutions I could find on here and took a look at the docs. I have double checked my code and file path with a 3 tutorials on youtube all of them are the same as what I have. None of these changed the output any help is greatly appreciated.

Original Q&A

There are 2 best solutions below

Fırat Taşkın On 10 November 2022 at 06:54

You need to fix your partials path /views/partial to views/partials

and i will share my hbs config u can use them it have some useful function

    // view engine setup
    app.engine(
        'hbs',
        hbs.engine({
            extname: 'hbs',
            defaultLayout: 'layout',
            layoutDir: path.join(__basedir, 'views/layouts'),
            partialsDir: path.join(__basedir, 'views/partials'),
            helpers: {
                section(name, options){
                    if (!this._sections) this._sections = {};
                    this._sections[name] = options.fn(this);
                    return null;
                },
                sidebarMenu(){
                    return sidebar();
                },
                iff(a, operator, b, opts){
                    let bool = false;
                    switch (operator){
                    case '===':
                        bool = a === b;
                        break;
                    case '!==':
                        bool = a !== b;
                        break;
                    case '>':
                        bool = a > b;
                        break;
                    case '>=':
                        bool = a >= b;
                        break;
                    case '<':
                        bool = a < b;
                        break;
                    case '<=':
                        bool = a <= b;
                        break;
                    default:
                        bool = a === b;
                        break;
                    }
                    if (bool){
                        return opts.fn(this);
                    }
                    if (typeof opts.inverse === 'function'){
                        return opts.inverse(this);
                    }
                    return this;
                }
            }
        })
    );

Sample Usage For if

{{#iff user.gender '==' 'male'}}checked{{/iff}}>

Sample Usage For section I am use this after body because i need use scripts after all page load (when i use layout)

{{{_sections.script}}}

and on my page i am adding this partial

{{#section 'script'}}
  <script>
   // i can use all  loaded packages now
  </script>
{{/section}}

**Titan1315** · Accepted Answer

for anyone who ever comes across this problem for me it was forgetting the extname: "hbs"

  "hbs",
  hbs.engine({
    defaultLayout: __dirname + "/views/layouts/index.hbs",
    layoutsDir: path.join(__dirname, "../views/layouts"),
    partialsDir: path.join(__dirname,  "/views/partials"),
    extname: "hbs"

  })
);

Partials not working with Express, express-handlebars

There are 2 best solutions below

Related Questions in NODE.JS

Related Questions in EXPRESS

Related Questions in HANDLEBARS.JS

Related Questions in EXPRESS-HANDLEBARS

Related Questions in GLITCH-FRAMEWORK

Trending Questions

Popular # Hahtags

Popular Questions