Building a Twitter-Like Application Using the MVC Design Pattern

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:

The pages folder will be as follows at this point:
Now let's move the files that were in the views folder to the pages folder.
Create a pages folder inside the views folder.
Create a partials folder inside the views folder.
- server/
- pages/
- index.ejs
- error.ejs
- partials/
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.

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.

We are using a Content Delivery Network (CDN) for CSS and JS files.

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>

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 -->

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>

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.

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>

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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Node.js 6.x Blueprints.

By : Fernando Monteiro

Node.js 6.x Blueprints.

By: Fernando Monteiro

Overview of this book

Restructuring the views folder using partials

Tip

Tip

Tip

Node.js 6.x Blueprints.

By : Fernando Monteiro

Node.js 6.x Blueprints.

By: Fernando Monteiro

Overview of this book

Restructuring the views folder using partials

Tip

Tip

Tip

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access