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

Adding templates for login, sign-up, and profile

Now we have a solid basis to move forward with the project. At this time, we will add some template files for login, sign-up, and profile screens.

The expected result for these pages will be as shown in the following screenshot:

Sign-up screen

Profile screen

Now let's create the login template. Create a new file called login.ejs in the views folder and place the following code:

      <!DOCTYPE html> 
      <html> 
      <head> 
          <title><%= title %></title> 
          <% include ../partials/stylesheet %> 
      </head> 
      <body> 
        <% include ../partials/header %> 
   
        <div class="container"> 
            <% if (message.length > 0) { %> 
                <div class="alert alert-warning alert-dismissible
                   fade in" role="alert"> 
                  <button type="button" class="close" data-dismiss=
                     "alert" aria-label="Close"> 
                    <span aria-hidden="true">&times;</span> 
                  </button> 
                  <strong>Ohps!</strong> <%= message %>. 
                </div> 
             <% } %> 
            <form class="form-signin" action="/login" method="post"> 
            <h2 class="form-signin-heading">Welcome sign in</h2> 
            <label for="inputEmail" class="sr-only">Email address</label> 
            <input type="email" id="email" name="email" class="form-
              control" placeholder="Email address" required=""> 
            <label for="inputPassword" class="sr-only">Password</label> 
            <input type="password" id="password" name="password"
             class="form-control" placeholder="Password" required=""> 
            <button class="btn btn-lg btn-primary btn-block" 
               type="submit">Sign in</button> 
            <br> 
            <p>Don't have an account? <a href="/signup">Signup</a> 
               ,it's free.</p> 
          </form> 
        </div> 
 
        <% include ../partials/footer %> 
        <% include ../partials/javascript %> 
      </body> 
      </html>

Add the login route to routes/index.js after the index route:
```
      /* GET login page. */ 
      router.get('/login', function(req, res, next) { 
          res.render('login', { title: 'Login Page', message:
           req.flash('loginMessage') }); 
       }); 
```
Note
In the template, we are making use of the connect-flash middleware to display error messages. Later, we will show how to install this component; don't worry right now.
Let's add the signup template to the views/pages folder.

Create a new file in views/pages and save as signup.ejs; then add the following code:

      <!DOCTYPE html>
      <html>
      <head>
        <title><%= title %></title>
        <% include ../partials/stylesheet %>
      </head>
      <body>
        <% include ../partials/header %>
        <div class="container">
          <% if (message.length > 0) { %>
             <div class="alert alert-warning" role="alert">
               <strong>Warning!</strong> <%= message %>.
             </div>
           <% } %>
           <form class="form-signin" action="/signup" method="post">
             <h2 class="form-signin-heading">Please signup</h2>
             <label for="inputName" class="sr-only">Name address</label>
             <input type="text" id="name" name="name" class="form-control"
              placeholder="Name" required="">
             <label for="inputEmail" class="sr-only">Email address</label>
             <input type="email" id="email" name="email" class=
               "form-control" placeholder="Email address" required="">
             <label for="inputPassword" class="sr-only">Password</label>
             <input type="password" id="password" name="password" 
               class="form-control" placeholder="Password" required="">
             <button class="btn btn-lg btn-primary btn-block" 
               type="submit">Sign in</button> 
              <br> 
              <p>Don't have an account? <a href="/signup">Signup</a>
                  ,it's free.</p>
            </form>
          </div>
          <% include ../partials/footer %>
          <% include ../partials/javascript %>
        </body>
        </html>

Now we need to add the route for the sign-up view. Open routes/index.js and add the following code right after login route:

      /* GET Signup */ 
      router.get('/signup', function(req, res) { 
          res.render('signup', { title: 'Signup Page', 
             message:req.flash('signupMessage') }); 
      });

Next, we will add the template to the profile page and the route to this page. Create a file called profile.ejs inside the view/pages folder and add this code:

      <!DOCTYPE html> 
      <html> 
      <head> 
          <title><%= title %></title> 
          <% include ../partials/stylesheet %> 
      </head> 
      <body> 
          <% include ../partials/header %> 
          <div class="container"> 
            <h1><%= title %></h1> 
            <div class="datails"> 
              <div class="card text-xs-center"> 
                  <br> 
                <img class="card-img-top" src="<%= avatar %>" 
                  alt="Card image cap"> 
                  <div class="card-block"> 
                    <h4 class="card-title">User Details</h4> 
                    <p class="card-text"> 
                        <strong>Name</strong>: <%= user.local.name %><br> 
                        <strong>Email</strong>: <%= user.local.email %> 
                    </p> 
                    <a href="/logout" class="btn btn-default">Logout</a> 
                  </div> 
              </div> 
            </div> 
         </div> 
        <% include ../partials/footer %> 
        <% include ../partials/javascript %> 
      </body> 
      </html>

Now we need to add the route for the profile view; open routes/index.js and add the following code right after the signup route:

      /* GET Profile page. */ 
      router.get('/profile',  function(req, res, next) {
          res.render('profile', { title: 'Profile Page', user : req.user,
          avatar: gravatar.url(req.user.email ,  {s: '100', r: 'x', d:
           'retro'}, true) });
      });

Tip

We are using another middleware called gravatar; later, we will show how to install it.

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

Adding templates for login, sign-up, and profile

Note

Tip