File hbs does not redeploy



  • I'm doing an application with backend Node.js and Handlebars. I'm having trouble rendering the file layout. Hbs, I've done some tests on the files server. j and Main. j and the routes are ok.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">
    
    &lt;title&gt;Realtime Twitter&lt;/title&gt;
    
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
    
    &lt;link href="/css/starter-template.css" rel="stylesheet"&gt;
    

    </head>

    <body>

    &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    
    &lt;div class="container"&gt;
    
      &lt;div class="starter-template"&gt;
        &lt;h1&gt;Bootstrap starter template&lt;/h1&gt;
        &lt;p class="lead"&gt;Use this document as a way to quickly start any new project.&lt;br&gt; All you get is this text and a mostly barebones HTML document.&lt;/p&gt;
      &lt;/div&gt;
    
    &lt;/div&gt;&lt;!-- /.container --&gt;
    
    
    &lt;!-- Bootstrap core JavaScript
    ================================================== --&gt;
    &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    

    </body>
    </html>

    My complete project in https://github.com/lobothiagodev/NodejsWorkstation/tree/master/twitter .

    Dependencies

    "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "express-handlebars": "^3.0.0",
    "hbs": "^4.0.1",
    "mongoose": "^4.13.7",
    "morgan": "^1.9.0"
    }



  • Your problem is found in the line below in your file serves.js:

    app.engine('.hbs', express({ defaultLayout: 'layout', extname: '.hbs' }));
    

    Second http://expressjs.com/pt-br/guide/using-template-engines.html , when setating the configuration view engine you must inform as parameter a Model mechanism what in case you are not doing, because you are informing yourself Express. Just change express For expressHbs as in the code below.

    app.engine('.hbs', expressHbs({defaultLayout: 'layout',extname: '.hbs'}));
    

    Reference

    • http://expressjs.com/pt-br/guide/using-template-engines.html



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2