Node.js 6.x Blueprints

Table of Contents

Node.js 6.x Blueprints

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Building a Twitter-Like Application Using the MVC Design Pattern

Installing Node.js

Installing Yeoman

Installing Express generator

Building the baseline

Adding changes to the package.json file

Running the application

Changing the application's structure

Changing the default behavior to start the application

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

Checking the error messages

Summary

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

Removing the default routes 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 associations between Band and User models

Creating the database on MySql

Using db migrations to insert data 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

Inserting a new Band

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

Summary

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

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

What we are building

Creating the baseline applications

Changing the application structure

Adding Node modules to deal with images and the Cloudinary cloud service

Creating the book controller

Creating the book model file

Adding a CSS framework to the application

Refactoring the views folder

Creating the .env.js file

Creating and configuring a Cloudinary account

How Cloudinary works

Running the application

Uploading and showing images

Checking the MongoDb picture collection

Creating folders in the Cloudinary dashboard

URL transformation rendering

Adding a direct link to the original image

Summary

5. Creating a Store Locator Application with MongoDB Geospatial Query

What we are building

Creating the baseline application

Refactoring the default structure

Creating partial views for footer and head

Setting Swig template to use HTML extension

Creating partial files

Creating applications template files

Using the Geolocation HTML5 API

Creating the application controller

Creating models

Creating the views template

Adding locations to MongoDB

Understanding Geospatial indexes on MongoDB

Creating 2dsphere indexes in MongoDB

Checking the Geolocation application

Ordering points by distance

Summary

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

What we are building

Creating the baseline structure

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

Inserting records using endpoint

Retrieving records using endpoint

Adding database relations

Dealing with LoopBack boot files

Consuming the API

Adding HTML content to client side

Adding Bootstrap framework and React library

Creating React components

Creating new feedbacks

Simple checking endpoints

Disable remote LoopBack endpoints

Summary

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

Adding some CSS

Adding live reload plugin

Checking the application folder structure

Creating the Socket.io events

Adding socket.io behavior on the client side

Starting the chat application

Summary

8. Creating a Blog with the Keystone CMS

What we are building

Installing Keystone framework

Creating the scaffold application

Fixing the lint error and admin object name

Running the Keystone  blog

Anatomy of the Keystone engine

Changing the default bootstrap theme

Modifying the KeystoneJS core template path

Building our own theme

Changing the stylesheet

Adding the Gallery script

Extending the keystone.js core

Inserting content using control panel

Summary

9. Building a Frontend Process with Node.js and NPM

What we are building

Creating the baseline application

Adding a Datasource to the project

Creating application models

Adding relationships between application models

Setting up a static site

Refactoring the application folder

Creating the images folder

Creating the libraries folder

Creating the scripts folder

Creating the SASS folder

Installing Bower

Installing application dependencies

Create the scss folder structure

Refactoring the client folder

Adding the application views

Installing AngularJS files

Creating the AngularJS application

Using Loopback's AngularJS SDK

Adding content to the application

Creating the Building tasks

Installing the dependencies

Creating the copy task

Creating the SASS task

Creating the linting task

Creating the image optimization task

Creating the concatenate task

Creating the build task

Using tasks with individual commands

Deploying to Heroku Cloud

Creating a Heroku application

Creating a deploy.sh file

Summary

10. Creating and Deploying Using Continuous Integration and Docker

What we are building

What Continuous Integration means

Creating the baseline application

Adding the root files

Creating the config folder and files

Creating the controllers folder and files

Adding modules and authentication middleware

Adding login GET and POST methods

Adding signup GET and POST methods

Adding account GET and UPDATE methods

Adding account DELETE method

Creating the model folder and files

Creating the public folder and files

Creating a custom stylesheet

Creating the fonts folder and adding font files

Creating the JavaScript folder and files

Creating the views folder and files

Adding the layouts folder and file

Adding the pages folder and files

Adding the partial folder and files

Creating the test folder and test file

Running the application

Creating a GitHub or Bitbucket free account

Creating a GitHub free account

Creating a Heroku free account

Creating a MongoLab free sandbox account

Creating a user and password for the database

Getting the string connection

Initializing a git repository and pushing to GitHub

Creating a Heroku application using Heroku Dashboard

Linking the Heroku application to your git repository

Adding environment variables to Heroku

Creating a Codeship free account

Adding environment variables to Codeship

Creating setup and test commands in the Codeship project configuration

Creating the pipeline for deployment on Heroku

Adding the Heroku API key to Codeship

Checking the test and deploy steps on the Codeship dashboard

Installing Docker and setting up the application

Checking the Docker version

Creating a Docker file

Creating a Docker image

Preparing and running the Docker image

Uploading the project image to your Docker hub account

Summary

Node.js 6.x Blueprints

Node.js 6.x Blueprints

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2016

Production reference: 1220816

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham 

B3 2PB, UK.

ISBN 978-1-78588-843-4

www.packtpub.com

Credits

About the Author

Fernando Monteiro is a full-stack engineer, speaker, and open source contributor. He has built and made some of his personal projects open source, such as Responsive Boilerplate, Frontend Boilerplate, Angm-Generator, and TrelloMetrics, written in AngularJS, Node.js, Less, and SASS.

With around 16 years of experience in information technology, his current focus is on web and mobile JavaScript applications. He has a strong understanding and experience with all phases of the software engineering life cycle, including source control, design, build/release, and automated testing.

He has worked as a manager of e-commerce, and a UX designer for various companies and products, including mobile applications.

When not programming, Fernando enjoys riding Harley Davidson bikes, making his own beer, and watching movies with his family.

You can find him on LinkedIn at https://br.linkedin.com/in/fernando-monteiro-69881b28/en.

The following are his previous books with Packt Publishing:

Instant HTML5 Responsive Table Design How-to in April 2013 :

http://www.amazon.com/Instant-HTML5-Responsive-Table-Design/dp/1849697264/ref=sr_1_3?s=books&ie=UTF8&qid=1454389499&sr=1-3&keywords=Fernando+Monteiro.

Learning Single Page Web Application Development in December 2014:

http://www.amazon.com/Learning-Single-Page-Application-Development/dp/1783552093/ref=sr_1_6?s=books&ie=UTF8&qid=1454389499&sr=1-6&keywords=Fernando+Monteiro.

AngularJS Directives Cookbook in November 2015 :

http://www.amazon.com/AngularJS-Directives-Cookbook-Fernando-Monteiro/dp/1784395897/ref=sr_1_1?s=books&ie=UTF8&qid=1454389499&sr=1-1&keywords=Fernando+Monteiro.

I would like to say thank you to all my family, who supported me in this journey–especially my mother, Paschoalina Patrizzi – for their strength and perseverance in life. And to all of the Packt Publishing crew who helped me with one more book.

About the Reviewer

Magesh Kuppanis a freelance consultant and trainer on web technologies with over 17 years of experience. Everything about technology excites him.

I am grateful to my parents, without whom I would not be what I am today. I am also thankful to my wife for she has been instrumental in all my efforts. Thanks to my little son who brings bliss to my life.

www.PacktPub.com

eBooks, discount offers, and more

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Preface

Web applications with Node.js are increasingly popular and accessible to all developers. Today, with the growing evolution of Node.js, we can see numerous companies using this technology for the development of their applications. Among them, we can mention Netflix, Paypal, and many others who use Node.js in production environments.

The hosting companies also made a breakthrough by supporting Node.js on their platforms. Plus, many building tools, such as task runners, generators and dependence managers, emerged using the Node.js engine, such as Grunt, Gulp, Bower, and more.

Throughout the book, we will show you how to build and deploy Node.js applications from scratch by using all the resources available on the Node.js ecosystem and exploring cloud services for testing, image manipulation, and deployment.

Dealing with all these tools and getting the best out of them all is a very interesting and motivating task.

We will also introduce the concept of Docker containers and continuous integration using different tools and services.

Over the course of our book, we will see how to get the best out of this development method using the latest and greatest technologies to build ten applications from start to end.

Enjoy!

What this book covers

Throughout this book, we'll explore different ways to build Node.js Applications and understand what elements make up a basic blog page using MVC design patterns. We will learn how to deal with different types of view templates such as EJS and SWIG and more complex stuff using command-line tools to deploy and run applications.

We will cover fundamental concepts of the Restful API architecture and client-side communication using jQuery, React.js and Angular.js.

Although some points are advanced, you'll be prepared to understand the core concepts of Node.js applications, and how to deal with different types of database's such as MongoDB, MySQL, and the Express and Loopback frameworks.

Chapter 1 , Building a Twitter-Like Application Using MVC Design Patterns, shows the main concepts of the MVC pattern applied to Node.js applications using the Express framework, mongoose ODM middleware, and MongoDB database. We see how to deal with user sessions and authentication using Passport middleware.

Chapter 2 , Building a Basic Website Using MySQL Database, is a real dive into a Node.js application using a relational database. We see how to use the Sequelize (ORM)  middleware with Mysql database, how to create database relationships, and how to use migration files.

Chapter 3 , Building a Multimedia Application, teaches you how to deal with file storage and upload multimedia files such as images and videos. We also see how to save filenames on MongoDB and how to retrieve the files and show them on user interface. Then we learn how to deal with write and read using the Node.js streams API.

Chapter 4 , Don't Take a Photograph, Make It – An App for Photographers, covers an application to upload, store, and manipulate images using the Cloudnary cloud services, and interacting with MongoDB. Also, we will see how to implement the Materialize.css framework for the user interface, and introduce the use of dot files to load configuration variable.

Chapter 5 , Creating a Store Locator Application with MongoDB Geospatial Query, explains the core concepts of geospatial data and geolocation using MongoDB, and one of the most useful features to support GEOJSON data format, the 2dspheres indexes. You will understand how to integrate Google Maps API with a Node.js application.

Chapter 6 , Building a Customer Feedback App with Restful API and Loopback.io, explores the loopback.io framework to build a Restful API. We will see the fundamentals of the Loopback CLI in order to create an entire application using the command line. You'll learn how to deal with the relationship between models using MongoDB and how to use React.js on the client side to communicate with the API.

Chapter 7 , Building a Real-Time Chat Application with Socket.io, shows the fundamentals of Socket.io events to build a chat application using Express and jQuery for the user interface. It covers the basic concept of task managers and how to use Gulp and livereload plugin.

Chapter 8 , Creating a Blog with Keystone CMS, discusses the use of a CMS made entirely with Node.js, called Keystone. It's a deep dive into the Keystone application structure and how to extend the framework in order to create new models and views. Also, we will see how to customize and create new Keystone themes.

Chapter 9 , Building a Frontend Process with Node.js and NPM, is especially interesting because we will create a Restful application using the loopback.io framework and AngularJS for the user interface. Also, we will use different building tools to concatenate, minify, and optimize images using the command line and Node Package Manager (NPM). And we will see how to use the Heroku toolbelt CLI to create and deploy the application.

Chapter 10 , Creating and Deploying Using Continuous Integration and Docker, explores the continuous delivery development process with Node.js applications. You will learn how to integrate tools such as Github, Codeship, and Heroku into your development environment to deal with unit tests and automated deployment. This chpater also teaches you how to set up environment variables to protect your database credentials and how to create a full application using the concept of Docker containers.

What you need for this book

All the examples in the book use open source solutions and can be downloaded for free from the links provided in each chapter.

The book's examples use many Node.js modules and some JavaScript libraries, such as jQuery, React.js, and AngularJS. The most current versions when writing this book are Node.js 5.6 and 6.1.

In chapter 1, Building a Twitter-Like Application Using the MVC Design Pattern, you can follow the step-by-step guide to install Node and Node Package Manager (NPM).

You can use your preferred HTML editor.

A modern browser will be very helpful too. We've used  Chrome, but feel free to use your preference. We recommend one of these: Safari, Firefox, Chrome, IE, or Opera, all in their latest versions.

Who this book is for

You must have basic to intermediate knowledge of JavaScript, HTML, and CSS to follow the examples in the book, but slightly more advanced knowledge in web development/Restful APIs and Node.js modules/middleware may be required in some chapters. Do not worry about it; with the examples, we will detail all of the code and give you a lot of links to interesting stuff.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows:

Before we proceed, let's change the welcome message from: routes/index.js file to the following highlighted code.

A block of code is set as follows:

/* GET home page. */

router.get('/', function(req, res, next) {

    res.render('index', { title: 'Express from server folder' });

});

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

/* GET home page. */

router.get('/', function(req, res, next) {

res.render('index', { title: 'Express from server folder' });

});

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: clicking on the Next button moves you to the next screen.

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.

Hover the mouse pointer on the SUPPORT tab at the top.

Click on Code Downloads & Errata.

Enter the name of the book in the Search box.

Select the book for which you're looking to download the code files.

Choose from the drop-down menu where you purchased this book from.

Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows

Zipeg / iZip / UnRarX for Mac

7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Node.JS-6.x-Blueprints. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.

Chapter 1.  Building a Twitter-Like Application Using the MVC Design Pattern

The Model View Controller (MVC) design pattern was very popular in the eighties in the software industry. This pattern helped so many engineers and companies to build better software for a while and is still useful nowadays with the rise of Node.js and some Node frameworks as Express.js (more information about Express.js and its API can be found at http://expressjs.com/).

Note

As the Express.js website says, it is "Fast, unopinionated, minimalist web framework for Node.js."

Express.js is the most popular Node framework and many companies across the globe have adopted it. So in our first application, let's see how to apply the MVC pattern to create an application using only JavaScript at the backend.

In this chapter, we will cover these topics:

Installing the Node and Express framework

MVC design pattern

Dealing with Yeoman generator

How to use Express generator

How to deal with Express template engine

User authentication

MongoDB connection with Mongoose Schema

Installing Node.js

First off, we need to install the most up-to-date Node.js version. At the time of writing this book, Node.js's latest update is v6.3.0. You can go to the Node.js website at https://nodejs.org/en/ and choose your platform. For this book, we are using Mac OS X, but the examples can be followed on any platform.

To check the Node and Node Package Manager (NPM) version, open your terminal/shell and type these:

node -v

npm -v

The book uses Node version 6.3.0 and NPM version 3.10.3

Installing Yeoman

Throughout this book, we will use some tools that accelerate our development process. One of them is called Yeoman (more information can be found at http://yeoman.io/), a powerful web application generator.

Now let's install the generator. Open your terminal/shell and type the following code:

npm install -g yo

Installing Express generator

For our first application, let's use the official Express generator. The generator helps us in creating the initial code of our application and we can modify it to fit into our application.

Simply type the following command in your terminal or shell:

npm install -g express

Note that the -g flag means installing globally on your machine so that you can use it on any project.

Express is a powerful micro framework for Node.js; with it, it's possible to build web applications with ease.

Building the baseline

The project that will start now