Book Image

MEAN Cookbook

By : Nicholas McClay
Book Image

MEAN Cookbook

By: Nicholas 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.

Related Content you might be interested in

Current Title:

Small book image
MEAN Cookbook
Nicholas McClay
Sep, 2017 | 450 pages
Small book image
Beginning Server-Side Application Development with Angular
Bram Borggreve
Apr, 2018 | 110 pages
Small book image
TypeScript 2.x for Angular Developers
Chris Nwamba
Dec, 2017 | 240 pages
Small book image
Web Development with Angular and Bootstrap
Aki Iskandar | Sridhar Rao Chivukula
Aug, 2019 | 492 pages
Table of Contents (13 chapters)
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
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
Whats new in Angular 4
Whats new in Angular 4
Angular 4 Improvements and New Features
Angular 4 Deprecations and API Changes

Using Bootstrap Responsive layouts

One of the best reasons to use a CSS framework such as Bootstrap is to more easily support responsive layouts in our web application. Using Bootstrap's layout classes and breakpoints, we can easily add responsive design to our Angular application.

Getting ready

Bootstrap 4 supports a modern flex-box-based responsive grid system. To use the grid system, we will need to declare a container that will contain the grid, rows for each line of elements we will lay out in the container, and columns for each item in the row:

>

We can compose any combination of column widths together that we want as long as the total within the row adds up to 12 or fewer. Otherwise our column content will...

Previous Section
End of Section 10
Next Section