Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

MEAN Cookbook

By : McClay

3 (1)

MEAN Cookbook

3 (1)

By: McClay

Overview of this book

The MEAN Stack is a framework for web application development using JavaScript-based technologies; MongoDB, Express, Angular, and Node.js. If you want to expand your understanding of using JavaScript to produce a fully functional standalone web application, including the web server, user interface, and database, then this book can help guide you through that transition. This book begins by configuring the frontend of the MEAN stack web application using the Angular JavaScript framework. We then implement common user interface enhancements before moving on to configuring the server layer of our MEAN stack web application using Express for our backend APIs. You will learn to configure the database layer of your MEAN stack web application using MongoDB and the Mongoose framework, including modeling relationships between documents. You will explore advanced topics such as optimizing your web application using WebPack as well as the use of automated testing with the Mocha and Chai frameworks. By the end of the book, you should have acquired a level of proficiency that allows you to confidently build a full production-ready and scalable MEAN stack application.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Free Chapter

Working with Angular 4

Working with Angular 4

Introduction

Upgrading to Angular 4 using NPM

Generating a new Angular project using Angular-CLI

Configuring Angular-CLI project settings

Working with generators in Angular-CLI

Ejecting Angular-CLI from your project

Generating new routes in Angular-CLI

Defining a home page in your Angular routes

Handling 404 errors in an Angular project

Creating nesting routes in Angular

Creating sibling routes in Angular

Programmatic page redirection in Angular

Route preloading with Angular modules

Running tests in Angular-CLI

Enhancing Your User Interface

Enhancing Your User Interface

Introduction

Configuring Sass in Angular

Working with Angular component styles

Using Sass variables for style reusability

Using Sass nesting for better style specificity

Using Sass partials for style organization

Working with Bootstrap in Sass

Customizing Bootstrap for Angular

Using Bootstrap Responsive layouts

Working with Bootstrap components in Angular

Working with Font-Awesome icons in Angular

Internationalization with Angular i18n

Setting your language with Angular i18n

How to Localize dates in Angular

Working with Data

Working with Data

Introduction

Working with actions and events in Angular

Working with form input and models in Angular

Validating data with Angular form properties

Creating services for data in Angular

Using promises to create asynchronous services in Angular

Retrieving API data using HTTP services in Angular

Querying API sources using HTTP services in Angular

Creating Concurrent API requests in Angular

Handling API errors and invalid responses in Angular

HTTP service optimization through client-side caching

Using Express Web Server

Using Express Web Server

Introduction

Creating a new Express project with express-generator

Working with routes in Express

Serving an Angular web application with Express

Working with headers in Express

Working with cookies in Express

Creating Express middleware for routes

Logging traffic and activity with Morgan

Running your Express web server with Forever

Securing your Express web server

REST APIs and Authentication

REST APIs and Authentication

Introduction

Building REST APIs with Express

Configuring JSON API in Express

Creating a user authentication API in Express

Building a login page with Angular

Using JWT authentication with Express and Angular

Cloud Service Integrations

Cloud Service Integrations

Introduction

Uploading large multi-part files with Express

Uploading images to Cloudinary from Express

Securing image downloads from Cloudinary

Resizing images and transformations with Cloudinary

Working with Stripe payment processor in Express

Accepting credit card payments in Angular with Stripe

MongoDB and Mongoose

MongoDB and Mongoose

Introduction

How to set up and create a MongoDB database

Connecting to MongoDB through Mongoose

Working with data model in MongoDB and Mongoose

Querying for data using Mongoose query selectors

Relationships

Relationships

Introduction

Working with data validations and virtuals in Mongoose

Creating sub-documents in Mongoose models

Using pre-save hooks and custom methods in Mongoose Models

Creating embedded documents in MongoDB with objectId

Creating relational documents in MongoDB with population

Build Systems and Optimizations

Build Systems and Optimizations

Introduction

Using ES6 and Typescript with Express.js and Node.js

Configuring WebPack for use in Node.js applications

Optimizing asset delivery with gzip compression in Express

Optimizing images for delivery with WebPack

Optimizing Font-Awesome with custom font generation

Debugging

Debugging

Introduction

Debugging Node.js using the debug module

Debugging Node.js using node-inspector in Google Chrome

Debugging Node.js using JetBrain's WebStorm IDE

Production error tracking and debugging with Sentry.io

Automated Testing

Automated Testing

Introduction

Creating unit tests for Node.js using the Mocha testing library

Creating integration tests for Express REST APIs

Integrating an ESLint test suite into your Mocha tests

Cross-browser and device testing with BrowserSync

Whats new in Angular 4

Whats new in Angular 4

Angular 4 Improvements and New Features

Angular 4 Deprecations and API Changes

Customer Reviews

3 (1)

5 star

0

4 star

0

3 star

100%

2 star

0

1 star

0

Ejecting Angular-CLI from your project

While the convention-oriented approach of Angular-CLI can be a positive thing for many developers, sometimes, you may find the need to manually take back control of your build process and project configuration. Luckily, there is an easy way to convert an Angular-CLI project to a generic project using the eject command.

Getting ready

Let's take back control of our Angular application's build process from Angular-CLI. We may need this to do a variety of tasks, including customizing WebPack builds or just getting more granular control of our local web server runs. Ironically, we will use Angular-CLI to remove our application from Angular-CLI's control.

How to do it...

Perform the following steps to remove Angular-CLI from your project:

First, you must remove your start script from your package.json file, as it will be overwritten in this process.
Then, run the ng eject command:

==========================================================================
Ejection was successful.

To run your builds, you now need to do the following commands:
 - "npm run build" to build.
 - "npm run test" to run unit tests.
 - "npm start" to serve the app using webpack-dev-server.
 - "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

==========================================================================
Some packages were added. Please run "npm install".

How it works...

Your project has been fully converted over to a standard Angular project, with a fully defined build toolchain ready in a new webpack.config.js file. Note that this conversion is a one-way process, and should only be done if you are ready to take full control of your application's build process.

The build process that remains is actually a standard WebPack based build. We will discuss WebPack builds and how to customize them for your application more in Chapter 9, Build Systems and Optimizations.

Search

Your notes and bookmarks