MEAN Cookbook: The meanest set of MEAN stack solutions around

Description

Key FeaturesArchitect a fully functional stand-alone web application, including the web server, database, and front-end web applicationImprove the performance and maintainability of your MEAN stack application with tips for configuration and optimizationHighlights MEAN Stack best practices when working with your applicationBook Description 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. What you will learnBootstrap a new MEAN stack web application using Node.js and ExpressBuild a single-page application (SPA) with Angular and Angular-CLIImprove browser performance by optimizing your web application resources using WebpackModel complex JSON object relationships in MongoDB using MongooseDebug all the layers of a MEAN stack application, including working with source mapsBuild Restful APIs using Express.js and JSON Web Token (JWT) for user authenticationUse automated testing to improve the reliability and quality of your MEAN stack applicationAbout the Author Nicholas McClay is a software developer and designer with over a decade of JavaScript experience in both corporate and startup technology companies. He is an avid Node.js and JavaScript enthusiast and the founder of the greater Pittsburgh region’s Node.js and Angular meetups. A self-described user experience developer, he balances using both design and development disciplines to solve problems. He is a graduate of the Art Institute of Pittsburgh, where he acquired a bachelor's of science degree in Game Art and Design, a passion that springboarded him into a career of interactive experience design. His previous work experience includes Autodesk, where he worked on next-generation integrated cloud services. His current role is as the UX Lead of Wombat Security Technologies, where he helps bridge the gap between the customers' user experience and the underlying technology and product decisions that deliver it. He enjoys video games, tinkering and creating things, and lives with his loving wife, son, and daughter in Pittsburgh, Pennsylvania. Table of ContentsWorking with Angular 4Enhancing your User InterfaceWorking with DataUsing Express Web ServerREST APIs & AuthenticationAdvanced functionalityMongoDB & MongooseRelationshipsResource Pipelines & OptimizationsDebugging and OptimizationAutomated Testing Cover Title Page Copyright Credits About the Author Acknowledgement About the Reviewer www.PacktPub.com Customer Feedback Table of Contents Preface chapter 1: Working with Angular 4 Introduction Upgrading to Angular 4 using NPM Getting ready How to do it... How it works... There’s more… Taking advantage of optional dependencies Peer dependency warnings after upgrade Generating a new Angular project using Angular-CLI Getting ready How to do it... How it works... There's more... Tips for resolving port collision Configuring Angular-CLI project settings How to do it... Working with generators in Angular-CLI How to do it... How it works... There's more... Ejecting Angular-CLI from your project Getting ready How to do it... How it works... Generating new routes in Angular-CLI Getting ready How to do it... How its works... Defining a home page in your Angular routes How to do it... How it works... There's more... Handling 404 errors in an Angular project How to do it... How it works... Creating nesting routes in Angular Getting ready How to do it... How it works... Creating sibling routes in Angular How to do it... How it works... There's more... Programmatic page redirection in Angular How to do it... How it works... Route preloading with Angular modules Getting ready How to do it... How it works... Running tests in Angular-CLI How to do it... How it works... Chapter 2: Enhancing Your User Interface Introduction Configuring Sass in Angular Getting ready How to do it... How it works... There's more... Working with Angular component styles How to do it... How it works... Using Sass variables for style reusability How to do it... How it works... There's more... Using Sass nesting for better style specificity Getting ready How to do it... How it works... There's more... Using Sass partials for style organization Getting ready How to do it... How it works... There's more... Working with Bootstrap in Sass How to do it... How it works... There's more... Customizing Bootstrap for Angular Getting ready How to do it... How it works... There's more... Using Bootstrap Responsive layouts Getting ready How to do it... How it works... There's more... Working with Bootstrap components in Angular Getting ready How to do it... How it works... There's more... Working with Font-Awesome icons in Angular Getting ready How to do it... How it works... There's more... Internationalization with Angular i18n Getting ready How to do it... How it works... There's more... Setting your language with Angular i18n Getting ready How to do it... How it works... There's more... How to Localize dates in Angular How to do it... How it works... There's more... Chapter 3: Working with Data Introduction Working with actions and events in Angular Getting ready How to do it... How it works... There's more... Working with form input and models in Angular Getting Ready How to do it... How it works... There's more... Validating data with Angular form properties Getting Ready How to do it... How it works... There's more... Creating services for data in Angular Getting ready How to do it... How it works... There's more... Using promises to create asynchronous services in Angular Getting ready How to do it... How it works... There's more... Retrieving API data using HTTP services in Angular Getting ready How to do it... How it works... There's more... Querying API sources using HTTP services in Angular Getting ready How to do it... How it works... There's more... Creating Concurrent API requests in Angular Getting ready How to do it... How it works... Handling API errors and invalid responses in Angular Getting ready How to do it... HTTP service optimization through client-side caching Getting Ready How to do it... How it works... Chapter 4: Using Express Web Server Introduction Creating a new Express project with express-generator Getting ready How to do it... How it works... There's more... Working with routes in Express Getting ready How to do it... How it works... There's more... Serving an Angular web application with Express Getting ready How to do it... How it works... There's more... Working with headers in Express Getting ready How to do it... How it works... There's more... Working with cookies in Express Getting ready How to do it... How it works... There's more... Creating Express middleware for routes Getting ready How to do it... How it works... There's more... Logging traffic and activity with Morgan Getting Ready How to do it... How it works... There's more... Running your Express web server with Forever Getting ready How to do it... How it works... There's more... Securing your Express web server Getting ready How to do it... How it works... Chapter 5: REST APIs and Authentication Introduction Building REST APIs with Express Getting ready How to do it... How it works... There's more... Configuring JSON API in Express Getting ready How to do it... How it works... There's more... Creating a user authentication API in Express Getting ready How to do it... How it works... There's more... Building a login page with Angular Getting ready How to do it... How it works... There's more... Using JWT authentication with Express and Angular Getting ready How to do it... How it works... Chapter 6: Cloud Service Integrations Introduction Uploading large multi-part files with Express Getting ready How to do it... How it works... There's more... Uploading images to Cloudinary from Express Getting ready How to do it... How it works... There's more... Securing image downloads from Cloudinary Getting ready How to do it... How it works... There's more... Resizing images and transformations with Cloudinary Getting ready How to do it... How it works... There's more... Working with Stripe payment processor in Express Getting ready How to do it... How it works... Accepting credit card payments in Angular with Stripe Getting ready How to do it... How it works... Chapter 7: MongoDB and Mongoose Introduction How to set up and create a MongoDB database Getting ready How to do it... How it works... Mongo shell commands There's more... Connecting to MongoDB through Mongoose Getting ready How to do it... How it works... There's more... Working with data model in MongoDB and Mongoose How to do it... How it works... Mongoose Model API Mongoose Document API There's more... Querying for data using Mongoose query selectors How to do it... How it works... Mongoose Query API There's more... Chapter 8: Relationships Introduction Working with data validations and virtuals in Mongoose Getting ready How to do it... How it works... SchemaTypes API There's more... Creating sub-documents in Mongoose models Getting ready How to do it... How it works... Using pre-save hooks and custom methods in Mongoose Models Getting ready How to do it... How it works... Creating embedded documents in MongoDB with objectId Getting ready How to do it... How it works... Creating relational documents in MongoDB with population Getting ready How to do it... How it works... There's more... Document API Chapter 9: Build Systems and Optimizations Introduction Using ES6 and Typescript with Express.js and Node.js Getting ready How to do it... How it works... There's more... Configuring WebPack for use in Node.js applications Getting ready How to do it... How it works... There's more... Optimizing asset delivery with gzip compression in Express Getting ready How to do it... How it works... There's more... Optimizing images for delivery with WebPack Getting ready How to do it... How it works... There's more... Optimizing Font-Awesome with custom font generation Getting ready How to do it... How it works... There's more... Chapter 10: Debugging Introduction Debugging Node.js using the debug module Getting ready How to do it... How it works... There's more... Debugging Node.js using node-inspector in Google Chrome Getting ready How to do it... How it works... There's more... Debugging Node.js using JetBrain's WebStorm IDE Getting ready How to do it... How it works... Production error tracking and debugging with Sentry.io Getting ready How to do it... How it works... There's more... Chapter 11: Automated Testing Introduction Creating unit tests for Node.js using the Mocha testing library Getting ready How to do it... How it works... There's more... Creating integration tests for Express REST APIs Getting ready How to do it... How it works... There's more... Integrating an ESLint test suite into your Mocha tests Getting ready How to do it... How it works... There's more... Cross-browser and device testing with BrowserSync Getting ready How to do it... How it works... There's more... Appendix: Whats new in Angular 4 Angular 4 Improvements and New Features Packaging and Modules A newly optimized view engine Added TypeScript 2.2 support ngIf directive added support for else statements Support for assigning local variables New email form input validator directive Source maps for generated templates Angular 4 Deprecations and API Changes Template tags and attributes have been deprecated Animations are now an optional library ngFor class is deprecated Renderer class is deprecated Component lifecycle hooks are now interfaces Index