Fr

ee

This book will show you how to create your own e-commerce
application by taking you step by step through the parallel
processes of learning and building, using the MEAN stack.
You will also learn to develop a production-ready, high-quality
e-commerce site from scratch and gain the knowledge to
add your own features to the e-commerce site.
This book initially introduces the MEAN stack, which is
followed by a step-by-step approach to building a store
with AngularJS, setting up a database with MongoDB,
creating a REST API, and wiring up AngularJS. You will
learn to manage user authentication and authorization,
check multiple payment platforms, add product search and
navigation, deploy a production-ready e-commerce site,
and finally add your own high-quality feature to the site.
By the end of the book, you will be able to build and use your
own e-commerce app in the real world and will also be able
to add your own new features to it.

What you will learn from this book

Employ AngularJS to build responsive
UI components
Get to grips with AngularJS testing tools such
as Jasmine, Karma runner, and Protractor
Implement multiple authentication strategies
such as OAuth, JsonWebToken, and Sessions
Enhance website usability with social logins
such as Facebook, Twitter, and Google
Create integrations with payment platforms
such as PayPal
Apply full-text search functionality in MongoDB

Who this book is written for

Build a flexible categorization system to

organize your products

This book is for a web or full stack JavaScript developer

who wants to get a headstart on developing an e-commerce
application with MEAN. A basic knowledge of the MEAN
stack is highly recommended.

Secure your app by creating SSL certificates

and run payment platforms in a live
environment

community experience distilled

P U B L I S H I N G

Adrian Mejia

$ 34.99 US
22.99 UK

Building an E-Commerce Application with MEAN

Building an E-Commerce
Application with MEAN

pl

C o m m u n i t y

E x p e r i e n c e

D i s t i l l e d

Building an E-Commerce
Application with MEAN
Develop an end-to-end, real-time e-commerce application using
the MEAN stack

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

Sa
m

Adrian Mejia

In this package, you will find:

The author biography

A preview chapter from the book, Chapter 1 'Getting Started with the
MEAN Stack'
A synopsis of the books content
More information on Building an E-Commerce Application with MEAN

About the Author

Adrian Mejia is a software engineer, full stack web developer, writer, and blogger.
He has worked for more than 6 years in the fields of web development and software
engineering. He has worked on a variety of projects and platforms, ranging from
start-ups to enterprises and from embedded systems to web and e-commerce
applications.
Adrian loves contributing to open source web-related projects and blogging at

http://adrianmejia.com/. He started his blog as a reminder to himself of how

to solve certain software- and programming-related problems. Later, Adrian noticed

that many people found it useful as well, and his blog now gets around 75,000
pageviews every month.
He holds a master's degree in software engineering from Rochester Institute of
Technology (RIT) in Rochester, New York. Adrian has worked at ADTRAN,
Inc. as a software engineer since 2012.

Preface
E-commerce platforms are widely available these days. However, it is common to
invest a significant amount of time in learning to use a specific tool and realize later
that it does not fit your unique e-commerce needs. So, the greatest advantage of
building your own application with an agile framework is that you can quickly meet
your immediate and future needs with a system that you fully understand.
The MEAN stack (MongoDB, ExpressJS, AngularJS, and NodeJS) is a killer JavaScript
full stack combination. It provides agile development without compromising on
performance and scalability. It is ideal to build responsive applications with a large
user base, such as e-commerce applications.
This book will teach you how to create your own e-commerce application using
the MEAN stack. It will take you step by step through the process of learning and
building parallelly. Using this guide, you will be able to show a product catalog,
add products to shopping carts, and perform checkouts. It will cover product
categorization, search, scalable deployment, server setups, and other features.
At the end of this book, you will have a complete e-commerce application that is
fully tested, scalable, and alive. Additional topics on how to scale the application,
server deployment, and security will also be discussed.

What this book covers

Chapter 1, Getting Started with the MEAN Stack, is an introductory chapter presenting
a list of the main features of an e-commerce application. It also covers the basics
of each of the MEAN componentsMongoDB, ExpressJS, AngularJS, and
NodeJSand explains how to install them.
Chapter 2, Building an Amazing Store Frontend with AngularJS, is a jumpstart on
AngularJS. It goes over the file organization used throughout the project and
the layout of the first version of the application.

Preface

Chapter 3, Building a Flexible Database with MongoDB, focuses on MongoDB. It covers

how to set up models with Mongoose and CRUD operations and review our code
base for the server side.
Chapter 4, Creating a RESTful API with NodeJS and ExpressJS, gets the reader
familiarized with REST and APIs. It covers the basics of ExpressJS routing and
implements the product API as an example.
Chapter 5, Wiring AngularJS with ExpressJS REST API, builds upon all the concepts
learned in previous chapters and puts them to work together. It covers the basics of
testing APIs and end-to-end testing.
Chapter 6, Managing User Authentication and Authorization, explains the difference
between authorization and authentication. It implements a user login with an e-mail
ID and password as well as social logins with Facebook, Twitter, and Google+.
Chapter 7, Checking Out Products and Accepting Payment, is a complete, hands-on
chapter. It deals with the creation of shopping carts, orders, and API calls. It also
takes a look at how to receive payments using PayPal.
Chapter 8, Adding Search and Navigation, is about improving the UI/UX by adding
navigation menus, categories, and a search bar.
Chapter 9, Deploying a Production-ready e-Commerce App, is all about making the
application suitable for a production environment. It deals with the setup of a server
and scalable architectures. It also explains step by step how to deploy the server to
cloud servers as well as multiserver environments.
Chapter 10, Adding Your Own Features with High Quality, is a closing chapter
explaining how to continue extending and scaling the application. It also covers the
process of automating deployments so that new features can be introduced to the
application effortlessly and with zero downtime.

Getting Started with the

MEAN Stack
In order to build a powerful and interactive e-commerce application, business logic
has to move closer to the users, also known as thick clients. JavaScript is well-suited
for this job since it is the native language of the web. Any browser on any device
can support it without any plugins. Furthermore, we can dramatically increase the
interactivity and speed of a web application using JavaScript and HTML5. Instead
of rendering the whole web page every time the user clicks something (as with the
traditional server side languages), we can use asynchronous calls to quickly fetch
data from the server and render only what's required.
The MEAN stack (MongoDB, ExpressJS, AngularJS, and NodeJS), as you might
already know, is a JavaScript full stack web development framework. Using only one
main programming language from the client side all the way back to the server and
the database has many advantages, as we are going to discuss later.
Some companies like Wallmart, Groupon, Netflix, and PayPal have moved from
traditional enterprise web frameworks (like Java's Spring MVC and Ruby on Rails)
to NodeJS and thick JavaScript clients. This improved not just their productivity but
also their performance! They have reported an increase in the requests per second as
well as a decrease in their development time.
I hope you are as excited as I am to build an e-commerce app using state-of-theart technology like the MEAN stack with the help of this book. By the end of
this book, you will not only know more about MEAN e-commerce apps but also
about following the best practices. You will get familiar with concepts like Agile
methodologies, sprint/iterations, continuous integration, Test Driven Development
(TDD), and production deployment.

[1]

Getting Started with the MEAN Stack

We are going to cover some ground in this first chapter, and then deepen our
knowledge on each of the MEAN stack components. The topics that will be
covered in this chapter are as follows:

Installing the MEAN components

Understanding the project structure

Previewing the final app built-in this book

Understanding the requirements for e-commerce applications

Introducing the MEAN stack

MEAN is more than an acronym; it offers the following advantages over its
traditional alternatives such as LAMP (Linux, Apache, MySQL, and PHP) and other
solution stacks:

Asynchronous programming (evented non-blocking I/O) which is translated

into high throughput and scalability

One single programming language across the whole project which is

translated into fast paced development and is easy to learn

Vibrant community. NPM packages have grown faster than any other
programming language community yet

Excellent for JSON APIs, Single- Page Applications (SPAs), and soft realtime applications

As for any other solution, there are some disadvantages as well, but they can be
mitigated as follows:

CPU/thread-intensive apps: Applications that have to deal with heavy CPU

usage and low I/O are not very well suited for NodeJS. Some examples
of such applications are video encoding and artificial intelligence, which
are probably better handled in C/C++. NodeJS supports C++ add-ons, so
seamless integrations are an option.

In general, this is how SPAs (and the MEAN stack) work: when a client request is
received from the user's browser, it hits the ExpressJS web server first. ExpressJS
runs on top of the NodeJS platform, and it connects to the MongoDB database as
needed. Finally, the client's request is answered with an AngularJS application. From
that point on, all subsequent requests are made behind the scenes through AJAX to
the ExpressJS API. AngularJS takes care of rendering any new data instantly and
avoiding unnecessary full-page refreshes.

[2]

Chapter 1

Figure 1: MEAN stack components

Now, let's go through each component individually.

NodeJS
NodeJS is a platform that allows running of the JavaScript code outside of the
browser. It's built on top of Google Chrome's V8 JavaScript runtime environment.
Thanks to its non-blocking I/O and event-driven model, it is very fast and uses each
CPU cycle optimally.
The JavaScript event-loop is sometimes confusing for developers who are new to
JavaScript. In many popular languages (Java, Ruby, Python), each thread executes
only one line of code at a time (everything else is blocked). However, JavaScript was
conceived to be responsive at all times, so it makes heavy use of callbacks and the
event-loop. The event-loop is an internal loop that executes all the code, and does not
wait for anything in particular. The callbacks are called when a process is done. For
instance, for blocking the I/O, a database query will make the thread sit and wait for
the result. On the other hand, in JavaScript, it will continue executing the successive
lines of code. When the database result is ready, it will be handled by the callback.
Thus, non-blocking I/O.
NodeJS will be our server-side platform, and we will need it to run our web server,
ExpressJS.
[3]

Getting Started with the MEAN Stack

ExpressJS
ExpressJS is a web framework for NodeJS. It is a very transparent webserver that
not only allows us to build web applications but also to expose RESTful JSON APIs.
Express is very modular, so we can process/modify any requests using something
called middleware. There are middlewares to provide authentication, handling
cookies, logging, error handling and other such functions.

MongoDB
MongoDB is an open source document-oriented database, one of the most popular
in the NoSQL database world. It favors a JSON-like document structure rather
than the more traditional table-based structures found in relational databases. Its
query language is very powerful and expressive. Later in this book, we are going to
compare the equivalent SQL queries to MongoDB queries.
MongoDB stores all the users' data, products, orders, and anything that needs to be
persistent in the e-commerce application.

AngularJS
AngularJS is an open source JavaScript MVC framework (it might also be referred
to as MV* or MVW[Whatever]). This framework enhances the HTML markups with
new directives, properties, and tags, and always keeps the views and models in sync.
AngularJS facilitates the creation of data-driven and Single-Page Applications (SPAs).

Installing the MEAN component

All right. Enough theory, let's get our hands dirty and execute some command lines.

Installing NodeJS
The node community has been very busy lately and has created more packages for
it than any other existing platform. Not just packages but the core development too
has been forked (for example, ioJS) and merged back to the main line. Since we are
aiming for production, we are going with the current stable version v0.12. We are
going to use NVM (Node Version Manager) to switch easily between versions when
newer versions become stable.

[4]

Chapter 1

If you are a Windows user, you can see the instruction on the NVM site
at https://github.com/creationix/nvm.

For most *nix users, this is how you install NVM:

$ curl https://raw.githubusercontent.com/creationix/nvm/v0.24.1/install.
sh | bash
$ source ~/.nvm/nvm.sh
$ nvm install 0.12
$ nvm use 0.12

The NodeJS installation comes with the NPM (Node Package Manager). You can
verify if node and npm were installed correctly by checking the versions, as follows:
$ node -v
# v0.12.7

$ npm -v
# 2.11.3

In case you have multiple versions of NodeJS, you might want to

set v0.12 as the default. So when you open a new terminal and it has
the right version, use the nvm alias default 0.12 command
to do so.

Installing ExpressJS
You can download Express using npm by typing the following in your terminal:
npm install -g [email protected]

Note that we are downloading a specific version using @4.13.3; the -g argument
means that we are installing the package globally.

[5]

Getting Started with the MEAN Stack

Installing MongoDB
If you are using a Mac, I'd recommend installing brew first:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/
master/install)"

Then you can install MongoDB:

brew update && brew install mongodb 3.0.2

Ubuntu:
sudo apt-get -y install mongodb=3.0.2

For other operating systems, follow the instructions given at the official
site at https://www.mongodb.org/downloads.

Installing AngularJS tools

You don't need to install the AngularJS tools like the other components so far.
We can just download the Angular JavaScript files from its website at https://
angularjs.org and source it in our HTML. The other option is to source it directly
from a Content Delivery Network (CDN). However, if you notice, every time you
start a new web app, you have to execute the same steps over and over again, for
example, type HTML5 doctype, copy initial code, create the directory structure, and
so on. All this boilerplate can be automated using a tool called Yeoman. There are
many generators in the Yeoman repository. They can scaffold most of the JavaScript
frameworks out there: AngularJS, BackboneJS, and the like; if it doesn't exist, you
can also create your own. The best ones that suit our needs are angular-fullstack
and meanjs. We are going to use the first one since it provides out-of-the-box
functionality that is closer to our needs. Let's go ahead and install it:
# Install all the tools
$ npm install -g [email protected]

# Make a new directory 'meanshop'

$ mkdir meanshop && cd $_

# Execute the AngularJS scaffold

$ yo angular-fullstack meanshop

[6]

Chapter 1

You will see a lot of things going on when you run the commands.
But don't worry, we are going to explain all the magic in the next few
chapters. For now, play along and get everything installed.

The command line has some kind of wizard that asks you about your preferences.
The following are the ones that we are going to use throughout the examples in
this book:
# Client

? What would you like to write scripts with? JavaScript + Babel

? What would you like to write markup with? HTML
? What would you like to write stylesheets with? Sass
? What Angular router would you like to use? uiRouter
? Would you like to include Bootstrap? Yes
? Would you like to include UI Bootstrap? Yes

# Server

? What would you like to use for data modeling? Mongoose (MongoDB)
? Would you scaffold out an authentication boilerplate? Yes
? Would you like to include additional oAuth strategies? Google,
Facebook, Twitter
? Would you like to use socket.io? Yes

# Project

? What would you like to write tests with? Mocha + Chai + Sinon
? What would you like to write Chai assertions with? Expect

[7]

Getting Started with the MEAN Stack

It takes a while, because it installs a number of packages for you. Take a look into
package.json and bower.json. Bower is another package manager like npm but for
the frontend libraries. After the installation is complete, you can run the example app
with these commands:
# Build
$ grunt

# Preview the app in development mode

$ grunt serve

# Preview the app in production mode

$ grunt serve:dist

You can preview the scaffolded app at: http://localhost:9000.

If you get errors, remember that you need to have mongod running.

The AngularJS debugger

Most of the modern browsers provide debugging tools for JavaScript. There's a
Google Chrome plugin called Batarang, which is a web inspector extension. I'd
recommend getting it installed since it adds more context and useful information
and hints:

Example of the output of Batarang AngularJS extension for Chrome's web inspector.

You can find more information about Batarang at https://github.

com/angular/angularjs-batarang.
[8]

Chapter 1

Understanding the project structure

Applications built with the angular-fullstack generator have many files and
directories. Some code goes into the client, some executes in the backend, and
another portion is just needed for development, such as the tests suites. It's important
to understand the layout to keep the code organized.
Yeoman generators are time savers. They are created and maintained by the
community following the current best practices. It creates many directories and a lot
of boilerplate code to get you started. It might be a bit overwhelming at first to see
the number of (possibly) unknown files there. Do not panic, we are going to cover
them here and in the next few chapters.
Review the directory structure that was created. There are three main directories:

client, e2e, and server:

The client folder contains the AngularJS files and assets

The server directory contains the NodeJS files, which handle ExpressJS
and MongoDB

Finally, the e2e files contain the AngularJS end-to-end tests

The file structure

The following is an overview of the file structure of this project:
meanshop
client

app

- App specific components

assets

- Custom assets: fonts, images, etc

components - Non-app specific/reusable components

e2e

- Protractor end to end tests

server
api

- Apps server API

auth

- Authentication handlers

components - App-wide/reusable components

config

- App configuration

local.env.js - Environment variables

environment

views

- Node environment configuration

- Server rendered views
[9]

Getting Started with the MEAN Stack

Zooming into clients/app, we will find that each folder has the name of the
component (main page, products page), and that inside each folder are all the files
related to that component. For instance, if we look inside main, we will find the
AngularJS files, CSS (scss), and HTML:
meanshop/client/app/main
main.js

- Routes

main.controller.js

- Controller

main.controller.spec.js - Test
main.html

- View

main.scss

- Styles

Similarly, for our back-end, we have folders named after the components with all the
related files inside. We will find NodeJS files, ExpressJS routes, SocketIO events, and
mocha tests:
meanshop/server/api/thing
index.js

- Routes

thing.controller.js

- Controller

thing.model.js

- Database model

thing.socket.js

- Socket events

thing.spec.js

- Test

Components
There are a number of tools used in this project that you might be already familiar
with. If that's not the case, read the brief description given, and when needed. we
will describe it more thoroughly.

Testing
AngularJS comes with a default test runner called Karma, and we are going to
leverage its default choices:

Karma: This is the JavaScript unit test runner.

Jasmine: This is the BDD framework for testing the JavaScript code, which is
executed with Karma.

Protractor: This is used for end-to-end tests with AngularJS. This is the
highest level of testing, which runs in the browser and simulates user
interactions with the app.

[ 10 ]

Chapter 1

Tools
The following are some tools/libraries that we are going to use for increasing our
productivity:

GruntJS: This tool serves to automate repetitive tasks such as CSS/JS

minification, compilation, unit testing, and JS linting.

Yeoman (yo): This is a CLI tool for scaffolding web projects. It automates
the creation of directories and files through generators, and also provides
command lines for common tasks.

Travis CI: This is a Continuous Integration (CI) tool that runs your tests
suite every time you commit to the repository.

EditorConfig: This is an IDE plugin, which loads the configuration from a

file, .editorconfig. For example, you can set indent_size = 2, indents
with spaces or tabs, and so on. It's a time saver and maintains consistency
across multiple IDEs/teams.

SocketIO: This is a library that enables real-time bidirectional

communication between the server and the client.

Bootstrap: This is a frontend framework for web development. We are going

to use it for building the theme throughout this project.

AngularJS full-stack: This is the generator for Yeoman that will provide
useful command lines to quickly generate server/client code and deploy to
Heroku or OpenShift.

BabelJS: This is the js-tojs compiler that allows the use of features from
the next generation JavaScript (ECMAScript 6) instantly, without waiting for
browser support.

Git: This is a distributed code versioning control system.

Package managers
AngularJS comes with package managers for third-party backend and frontend
modules:

NPM: This is the default package manager for NodeJS.

Bower: This is the frontend package manager that can be used to handle
versions and dependencies of the libraries and assets used in a web project.
The file bower.json contains the packages and versions to install, and the
file .bowerrc contains the path for the location where those packages need
to be installed. The default directory is ./bower_components.

[ 11 ]

Getting Started with the MEAN Stack

Bower packages
If you have followed the exact steps for scaffolding our app, you will have the
following frontend components installed:

angular

angular-cookies

angular-mocks

angular-resource

angular-sanitize

angular-scenario

angular-ui-router

angular-socket-io

angular-bootstrap

bootstrap

es5-shim

font-awesome

json3

jquery

lodash

In the next chapter, we will dive deeper into AngularJS and our file structure. The
second part of this chapter is about the functionality of our final app.

Previewing the final e-commerce app

Let's take a break from the terminal. In any project, before starting coding, we need
to spend some time planning and visualizing what we are aiming for. That's exactly
what we are going to do: draw some wireframes that walk us through the app. Our
e-commerce appMEANshopwill have three main sections:

Homepage

Marketplace

Backoffice

[ 12 ]

Chapter 1

Homepage
The homepage will contain the featured products, navigation, menus, and some
basic information, as you can see in the following image:

Figure 2: Wireframe of the homepage

[ 13 ]

Getting Started with the MEAN Stack

Marketplace
This section will show all the products, categories, and search results:

Figure 3: Wireframe of the products page

[ 14 ]

Chapter 1

Backoffice
You need to be a registered user for accessing the back office section.

Figure 4: Wireframe of the login page

[ 15 ]

Getting Started with the MEAN Stack

After you log in, the app will present you with different options depending on your
role. If you are the seller, you can create new products, as shown in the following
image:

Figure 5: Wireframe of the Product creation page

If you are an admin, you can do everything that a seller does (create products), and
you can manage all the users and delete/edit products.

[ 16 ]

Chapter 1

Understanding the requirements for

e-commerce applications
There's no better way to learn new concepts and technologies than developing
something useful with it. This is why we are building a realtime e-commerce
application from scratch. However, there are many kinds of e-commerce apps.
In the next section, we are going to delimit what we are going to do.

Minimum Viable Product for an e-commerce

site
Even the largest applications that we see today started small and built their way
up. The Minimum Viable Product (MVP) is the strict minimum that an application
needs to work. In the e-commerce example, it will be the following:

Add products with their title, price, description, photo, and quantity

Guest checkout page for products

One payment integration (for example, PayPal)

This is the minimum requirement for getting an e-commerce site working. We

are going to start with these, but by no means will we stop there. We will keep
adding features as we go, and build a framework that will allow us to extend the
functionality along with high quality.

Defining the requirements

We are going to capture our requirements for the e-commerce application with user
stories. A user story is a brief description of a feature told from the perspective of a
user, where he expresses his desire and benefit in the following format:
As a <role>, I want <desire> [so that <benefit>]
User stories and many other concepts were introduced with the
Agile Manifesto. Learn more about this concept at https://
en.wikipedia.org/wiki/Agile_software_development.

[ 17 ]

Getting Started with the MEAN Stack

The following are the features, captured as user stories, that we are planning to
develop through this book:

As a seller, I want to create products.

As a user, I want to see all the published products and their details when I
click on them.

As a user, I want to search for a product so that I can find what I'm looking
for quickly.

As a user, I want to have a category navigation menu so that I can narrow

down the search results.

As a user, I want to have realtime information so that I can know

immediately if a product just got sold out or became available.

As a user, I want to check out products as a guest user so that I can quickly
purchase an item without registering.

As a user, I want to create an account so that I can save my shipping

addresses, see my purchase history, and sell products.

As an admin, I want to manage user roles so that I can create new admins,
sellers, and remove seller permissions.

As an admin, I want to manage all the products so that I can ban them if they
are not appropriate.

As an admin, I want to see a summary of the activities and order statuses.

All these stories might seem verbose, but they are useful for capturing the
requirements in a consistent way. They are also handy for developing test cases.
Learn more about user stories at https://en.wikipedia.org/
wiki/User_story.

The technical requirements about deployment, scalability, and performance will be

discussed in the final chapters.

[ 18 ]

Chapter 1

Summary
In this chapter, we discussed the reasons for using the MEAN stack to build our
e-commerce application, and got it installed. This is not just some kind of trend
which some companies are migrating to. It gives a tremendous performance boost
to the apps, and eases the learning curve using one main language for both, the
frontend and the backend. We also described the file structure that we are going to
use for organizing the code. Finally, we explored the features that the final app will
have, and the way it's going to look and behave. In the next series of chapters, we are
going to work with each piece of the MEAN stack individually. Later, we will start
integrating all the components and make them work together. The next chapter will
cover the most visible part: building the marketplace with AngularJS.

[ 19 ]

Get more information Building an E-Commerce Application with MEAN

Where to buy this book

You can buy Building an E-Commerce Application with MEAN from the
Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: