Restructuring the views folder using partials

Now we will make a major change to the structure of directories in the views folder: we will add an important Embedded JavaScript (EJS) resource for the creation of reusable files in our templates.

They are known as partial files and will be included in our application using the <% = include %> tag.

Tip

You can find more information about EJS on the official project page at: http://ejs.co/

Inside the views folder, we will create two more folders, called partials and pages:

1. The pages folder will be as follows at this point:
2. Now let's move the files that were in the views folder to the pages folder.
3. Create a pages folder inside the views folder.
4. Create a partials folder inside the views folder.
   • server/
   • pages/
   • index.ejs
   • error.ejs
   • partials/
5. Now we need to create the files that will be included in all templates. Note that we have just two templates: index.js and error.js.
6. Create a file called stylesheet.ejs and add the following code:

         <!-- CSS Files --> 
         <link rel='stylesheet' href='https://cdnjs.cloudflare.com/
          ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
         <link rel='stylesheet' href='/stylesheets/style.css' />

   Tip

   We will use the latest version of the Twitter Bootstrap UI framework, which at the time this book is being written is in version 4.0.0-alpha.

7. We are using a Content Delivery Network (CDN) for CSS and JS files.
8. Create a file called javascript.ejs and add the following code to it:

         <!-- JS Scripts -->
         <script src='https://cdnjs.cloudflare.com/ajax/libs
           /jquery/2.2.1/jquery.min.js'></script>
         <script src='https://cdnjs.cloudflare.com/ajax/libs/
          twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js'></script>
         </body>
         </html>

9. Then create a file called header.ejs and add the following code:

         <!-- Fixed navbar --> 
         <div class="pos-f-t"> 
             <div class="collapse" id="navbar-header"> 
                 <div class="container bg-inverse p-a-1"> 
                    <h3>Collapsed content</h3> 
                     <p>Toggle able via the navbar brand.</p> 
                 </div> 
             </div> 
             <nav class="navbar navbar-light navbar-static-top"> 
                  <div class="container"> 
                     <button class="navbar-toggler hidden-sm-up" type=
                       "button"data-toggle="collapse" data-target=
                         "#exCollapsingNavbar2"> 
                         Menu 
                     </button> 
                    <div class="collapse navbar-toggleable-xs"
                      id="exCollapsingNavbar2"> 
                         <a class="navbar-brand" href="/">MVC App</a> 
                         <ul class="nav navbar-nav navbar-right"> 
                             <li class="nav-item"> 
                                 <a class="nav-link" href="/login">
                                   Sign in
                                 </a>
                             </li> 
                             <li class="nav-item"> 
                                 <a class="nav-link" href="/signup">
                                   Sign up
                                 </a> 
                              </li> 
                              <li class="nav-item"> 
                                 <a class="nav-link" href="/profile">
                                    Profile</a> 
                              </li> 
                        
                             <li class="nav-item"> 
                                 <a class="nav-link" href="/comments">
                                   Comments</a> 
                             </li> 
                         </ul> 
                     </div> 
                 </div> 
             </nav> 
         </div> 
         <!-- Fixed navbar --> 
   

10. Create a file called footer.ejs and add this code:

          <footer class="footer"> 
              <div class="container"> 
                  <span>&copy 2016. Node-Express-MVC-App</span> 
              </div> 
          </footer> 
    

11. Let's adjust the path for the view templates in our app.js file; add the following lines of code:

          // view engine setup 
          app.set('views', path.join(__dirname, 'server/views/pages')); 
          app.set('view engine', 'ejs'); 
    

    Tip

    Note that we only added the pages folder path that already existed.

12. Now we will replace the code in pages/index.ejs with the following code:

          <!DOCTYPE html>
          <html>
          <head>
            <title><%= title %></title>
             <% include ../partials/stylesheet %>
          </head> 
          <body>
              <% include ../partials/header %>
              <div class="container">
                <div class="page-header m-t-1">
                  <h1><%= title %></h1>
                </div> 
                <p class="lead">Welcome to <%= title %></p>
              </div>
              <% include ../partials/footer %>
              <% include ../partials/javascript %>
           </body>
           </html>

13. Let's do the same for the error view file at pages/error.ejs:

          <!DOCTYPE html> 
          <html> 
          <head> 
               <title>Wohp's Error</title> 
               <% include ../partials/stylesheet %> 
          </head> 
          <body> 
               <% include ../partials/header %> 
     
              <div class="container"> 
                  <div class="page-header m-t-1"> 
                      <h1>Sorry: <%= message %></h1> 
                      <h2><%= error.status %></h2> 
                      <pre><%= error.stack %></pre> 
                  </div> 
     
              </div> 
               <% include ../partials/footer %> 
               <% include ../partials/javascript %> 
          </body> 
          </html> 
    

We currently have the following structure in our server folder:

• server/
• pages/
• index.ejs
• error.ejs
• partials/
• footer.ejs
• header.ejs
• javascript.ejs
• stylesheet.ejs2