Node.js 6.x Blueprints

Node.js 6.x Blueprints

By : Fernando Monteiro

Buy this Book

Node.js 6.x Blueprints

By: Fernando Monteiro

Buy this Book

Overview of this book

Node.js is the most popular framework to create server-side applications today. Be it web, desktop, or mobile, Node.js comes to your rescue to create stunning real-time applications. Node.js 6.x Blueprints will teach you to build these types of projects in an easy-to-understand manner. The key to any Node.js project is a strong foundation on the concepts that will be a part of every project. The book will first teach you the MVC design pattern while developing a Twitter-like application using Express.js. In the next chapters, you will learn to create a website and applications such as streaming, photography, and a store locator using MongoDB, MySQL, and Firebase. Once you’re warmed up, we’ll move on to more complex projects such as a consumer feedback app, a real-time chat app, and a blog using Node.js with frameworks such as loopback.io and socket.io. Finally, we’ll explore front-end build processes, Docker, and continuous delivery. By the end of book, you will be comfortable working with Node.js applications and will know the best tools and frameworks to build highly scalable desktop and cloud applications.

Node.js 6.x Blueprints

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

Free Chapter

Building a Twitter-Like Application Using the MVC Design Pattern

Installing Node.js

Installing Express generator

Building the baseline

Changing the application's structure

Restructuring the views folder using partials

Adding templates for login, sign-up, and profile

Installing additional middleware

Refactoring the app.js file with the new middleware

Adding config and passport files

Creating a models folder and adding a user schema

Protecting routes

Creating the controllers folder

Running the application and adding comments

Summary

Build a Basic Website Using MySQL Database

What we are building

Creating the baseline applications

Installing the Swig template engine

Refactoring the views folder

Creating a controllers folder

Adding partials files for head and footer

Installing and configuring Sequelize-cli

Editing the config.js file with database credentials

Creating a User scheme

Creating Band schema

Creating the database on MySql

Checking database tables

Creating the application controllers

Creating the application templates/views

Adding style to the application

Adding routes and a controller to the application

Adding database content

Creating a Bands form

Main difference between ODM (mongoose) and ORM (sequelize)

Summary

Building a Multimedia Application

What we are building?

Starting with package.json

Adding baseline configuration files

Adding server folders

Configuring the app.js file

Creating the config.js file

Creating the controller's files

Creating model files

Creating view files

Creating the public folder content

Inserting images in the application using the upload form

Inserting video files into the application using the upload form

Important notes about image and video upload

Summary

Dont Take a Photograph, Make It – An App for Photographers

What we are building

Creating the baseline applications

Creating the book controller

Adding a CSS framework to the application

Refactoring the views folder

Creating the .env.js file

How Cloudinary works

Running the application

Creating folders in the Cloudinary dashboard

URL transformation rendering

Summary

Creating a Store Locator Application with MongoDB Geospatial Query

What we are building

Creating the baseline application

Using the Geolocation HTML5 API

Creating the application controller

Creating models

Creating the views template

Adding locations to MongoDB

Understanding Geospatial indexes on MongoDB

Checking the Geolocation application

Ordering points by distance

Summary

Building a Customer Feedback App with a Restful API and Loopback.io

What we are building

Creating models with command line

Editing models after creation with command line

Creating a datasource through the command line

Connecting models to datasources

Using the API Explorer

Adding database relations

Dealing with LoopBack boot files

Consuming the API

Creating React components

Creating new feedbacks

Summary

Building a Real–Time Chat Application with Socket.io

What we are building

Starting with a package.json file

Adding configuration files

Adding task manager files

Creating the app.js file

Creating the route file

Creating the application views

Installing frontend components with Bower

Creating the Socket.io events

Starting the chat application

Summary

Creating a Blog with the Keystone CMS

What we are building

Installing Keystone framework

Creating the scaffold application

Running the Keystone blog

Anatomy of the Keystone engine

Changing the default bootstrap theme

Modifying the KeystoneJS core template path

Adding the Gallery script

Extending the keystone.js core

Inserting content using control panel

Summary

Building a Frontend Process with Node.js and NPM

What we are building

Creating the baseline application

Refactoring the application folder

Refactoring the client folder

Creating the AngularJS application

Adding content to the application

Creating the Building tasks

Using tasks with individual commands

Deploying to Heroku Cloud

Summary

Creating and Deploying Using Continuous Integration and Docker

What we are building

What Continuous Integration means

Creating the baseline application

Running the application

Creating a GitHub or Bitbucket free account

Creating a Heroku free account

Creating a MongoLab free sandbox account

Initializing a git repository and pushing to GitHub

Creating a Heroku application using Heroku Dashboard

Creating a Codeship free account

Installing Docker and setting up the application

Summary

Customer Reviews

5 star

4 star

3 star

2 star

1 star

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

Node.js 6.x Blueprints

By : Fernando Monteiro

Node.js 6.x Blueprints

By: Fernando Monteiro

Overview of this book

Related Content you might be interested in

Current Title:

Node.js 6.x Blueprints

Restructuring the views folder using partials

Tip

Tip

Tip