Mastering MEAN Stack Build full stack applications using MongoDB, Express.js, Angular, and Node.js (English Edition) (Pinakin Ashok Chaubal)（Z-Library）

📄 File Format: PDF

💾 File Size: 15.5 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

 i

📄 Page 3

 i Mastering MEAN Stack Build full stack applications using MongoDB, Express.js, Angular, and Node.js Pinakin Ashok Chaubal www.bpbonline.com

📄 Page 4

ii  Copyright © 2023 BPB Online 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, nor BPB Online or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. BPB Online has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, BPB Online cannot guarantee the accuracy of this information. First published: 2023 Published by BPB Online WeWork 119 Marylebone Road London NW1 5PU UK | UAE | INDIA | SINGAPORE ISBN 978-93-55510-525 www.bpbonline.com

📄 Page 5

 iii Dedicated to My wife Manasi My sons Arnav & Yash & My parents who supported me throughout the journey of this book

📄 Page 6

iv  About the Author Pinakin Chaubal is a PMP, ISTQB Foundation, and HP0-M47 QTP11 certified IT professional with over 23 years in Performance testing with LoadRunner & JMeter. He has worked in the fields of Software Testing & Quality Automation for various projects with demonstrative success in applying test methodologies & QA processes, software defect tracking, and new deployment environments & automation with automated test tools & frameworks across multi-national companies. He has also gained global onsite exposure of 6 years in the USA and 8 months in Hong Kong & China.

📄 Page 7

 v About the Reviewer Mohd Monis is an accomplished full-stack developer currently working as a technical lead, bringing over 8 years of invaluable industry experience. His expertise primarily lies in frontend development, where he excels in analyzing and synthesizing complex business problems. He actively engages in fruitful conversations about emerging technology trends with his peers. Additionally, he has recently developed a keen interest in creating design mockups.

📄 Page 8

vi  Acknowledgement I want to express my deepest gratitude to my family and friends for their unwavering support and encouragement throughout this book's writing, especially my wife Manasi. I am also grateful to BPB Publications for their guidance and expertise in bringing this book to fruition. It was a long journey of revising this book, with valuable participation and collaboration of reviewers, technical experts, and editors. I would also like to acknowledge the valuable contributions of my colleagues and co-workers during many years working in the tech industry, who have taught me so much and provided valuable feedback on my work. Finally, I would like to thank all the readers who have taken an interest in my book and for their support in making it a reality. Your encouragement has been invaluable.

📄 Page 9

 vii Preface Building full stack applications is a complex task that requires a comprehensive understanding of the latest technologies and programming languages. MongoDB, Express, Angular and Node.js are powerful tools that have become increasingly popular in the field of enterprise development. This book is designed to provide a comprehensive guide to building enterprise applications using the MEAN stack. It covers a wide range of topics, including the basics of MongoDB, Angular and advanced concepts such as object-oriented programming, and the use of the Node.JS for building robust and scalable applications. Throughout the book, you will learn to buld a MEAN stack for a blog site. The reader is taken step by step through the learning journey. The reader gets to know various concepts in application development and deployment. This book is intended for developers who are new to building full stack applications. It is also helpful for experienced developers who want to expand their knowledge of these technologies and improve their skills in building robust and reliable applications. With this book, you will gain the knowledge and skills to become a proficient developer in the field of full-stack development using the MEAN stack. I hope you will find this book informative and helpful. Chapter 1: Fundamentals of Full Stack Development and the MEAN Stack - This chapter will focus on the concept of full stack development, it’s importance and how the MEAN stack is a quick way to develop such applications. We will understand why the MEAN stack is so irresistible for developers. We will also see a glimpse of the application that we will be developing. Understand how the MEAN stack helps in fast, efficient and scalable development. We will understand the difference between the traditional multi-threaded web server and the single- threaded Node web server, learn what blocking/non-blocking code is, and understand the Express framework. We move on to MongoDB as the database for our stack and eventually we look at the Angular frontend framework which will be used in designing the face of our application. We will look at what TypeScript is and also look at the use of Bootstrap. We will be introducing Git as our version control system. We will take a look at AWS as our hosting service. We will then take a look at how the different MEAN components interact with each other. We will

📄 Page 10

viii  get introduced to Docker and Kubernetes and understand their role in deploying MEAN applications.. Chapter 2: Architectural Design of Our Sample Application - This chapter will focus on the various design considerations for a MEAN stack. We will explore various options available. We will start with a basic architecture and then move on to the desired Microservices architecture in which we can have separate docker containers for the Posts service, Comments service, the Express and Node. js framework and the database. This way our system will be fault tolerant and resilient. Chapter 3: Installing the Components - In this chapter, we will be looking at the Node.js and Angular needed for our MEAN project. We will be installing all these on Windows, although the installation remains largely the same for any operating system. We will create the project folder and initialize it. We will install Angular CLI and then create a new Angular project within the parent folder. We will then install Angular material inside the Angular project folder. We will also look at the generated Angular project and package.json file. We will then check the installed dependencies in node_modules folder. Eventually, we will take a look at the generated app folder and the various files within it. Chapter 4: Creation of the Frontend Using Angular - In this chapter, we will be building our frontend. This will be a bare-bones frontend which will be integrated with MongoDB and the server framework later. We will start with a bird’s eye view of how angular works by customizing the current Angular application. Chapter 5: Addition of Node.js and Ideas for Integration- This chapter will explore the backend server part of our MEAN framework which comprises of Node.js [Open-source, cross-platform backend JavaScript runtime environment that runs on V8 engine built for Chrome] Express JS [Backend web-application framework for Node.js]. We will start with the basics of building backend logic using Express and Node.js. In this process, we will make use of Postman[API platform for building and using APIs.] Postman simplifies the API lifecycle and streamlines collaboration so that better APIs can be created faster. We will also see two main HTTP verbs for building the backend code which is GET and POST. Chapter 6: Handling Authorization - With this chapter, we start the development of the first piece of our framework which is the Authorization piece. We will be making use of Typescript throughout this book for the development of the backend part of our code. This chapter will incorporate certain best practices for the

📄 Page 11

 ix development of code. We will be using Google Cloud environment for developing the application, since many times due to creation of many Kubernetes pods, older systems may crash. One can only create a single node cluster on a local desktop or laptop. We can create a multi node cluster when we develop on Google Cloud. We will be creating a docker container for our Auth service and will also make use of Google cloud shell as our Integrated Development Environment. Chapter 7: Creating the Posts Service and NATS Streaming Integration - In this chapter, we start with the introduction to the common module. As a part of the common module, we create a folder called common and move the Authentication related logic to this folder. We will create an NPM module of the common module. This common module can be included in all services of our project. We then move to the development of the Posts service. This is followed by an introduction to the NATS streaming server, and we create a simple Publisher and Listener which have a simple NATS implementation. We will see how to publish messages and listen to messages. The NATS Streaming code will be moved to the common module. We create a Posts service and integrate it with the NATS streaming server. We then test our integration with Postman Chapter 8: Introducing Automated Testing - Here, we will be looking at how to incorporate automated testing in our framework using Supertest. Supertest is a library which will test all our APIs without the need to bring up a Kubernetes cluster. The Supertest library can be used by itself or with Mocha. In this book, we will focus on Supertest with the JEST framework. Chapter 9: Integrating the Comments Service - In this chapter, we will look at the concepts behind building and integrating the comments service. Concepts such as sub-documents and references with regard to MongoDB will be introduced. We will see the pros and cons of using sub-documents and learn the advantages of references. Chapter 10: Creating the Comments Service - In this chapter, we will look at the creation of the comments service and see how we can use Supertest to run automated tests to test our comments service. Chapter 11: Implementing the Frontend - This chapter will wrap up things by implementing the front end. We will look at how to go about creating the frontend with Angular. We will also learn about the various pieces of an Angular application like components and services. We will see what the app component is and how to plug in the various components in the app component.

📄 Page 12

x  Code Bundle and Coloured Images Please follow the link to download the Code Bundle and the Coloured Images of the book: https://rebrand.ly/tdi84xj The code bundle for the book is also hosted on GitHub at https://github.com/bpbpublications/Mastering-MEAN-Stack. In case there's an update to the code, it will be updated on the existing GitHub repository. We have code bundles from our rich catalogue of books and videos available at https://github.com/bpbpublications. Check them out! Errata We take immense pride in our work at BPB Publications and follow best practices to ensure the accuracy of our content to provide with an indulging reading experience to our subscribers. Our readers are our mirrors, and we use their inputs to reflect and improve upon human errors, if any, that may have occurred during the publishing processes involved. To let us maintain the quality and help us reach out to any readers who might be having difficulties due to any unforeseen errors, please write to us at : errata@bpbonline.com Your support, suggestions and feedbacks are highly appreciated by the BPB Publications’ Family. Did you know that BPB offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.bpbonline.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at : business@bpbonline.com for more details. At www.bpbonline.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 BPB books and eBooks.

📄 Page 13

 xi Piracy If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at business@bpbonline.com with a link to the material. If you are interested in becoming an author If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit www.bpbonline.com. We have worked with thousands of developers and tech professionals, just like you, to help them share their insights with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea. Reviews Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions. We at BPB can understand what you think about our products, and our authors can see your feedback on their book. Thank you! For more information about BPB, please visit www.bpbonline.com. Join our book's Discord space Join the book's Discord Workspace for Latest updates, Offers, Tech happenings around the world, New Release and Sessions with the Authors: https://discord.bpbonline.com

📄 Page 14

xii  Table of Contents 1. Fundamentals of Full Stack Development and the MEAN Stack ..................... 1 Structure .................................................................................................................. 2 Objectives ................................................................................................................ 2 What is full stack development? ......................................................................... 2 Frontend ............................................................................................................. 3 Backend .............................................................................................................. 4 Database ............................................................................................................. 4 Introduction to the MEAN stack ......................................................................... 5 Our sample application ........................................................................................ 5 Introduction to Node.js ......................................................................................... 6 Introduction to Express.js ..................................................................................... 6 Introduction to MongoDB .................................................................................... 7 Introduction to Angular ........................................................................................ 7 Introduction to TypeScript and Bootstrap.......................................................... 8 Introduction to TypeScript ................................................................................ 8 Introduction to Bootstrap .................................................................................. 8 Introduction to Git as a version control system ................................................ 9 Interaction between components of the MEAN stack .................................... 10 Introduction to Docker and Kubernetes as deployment tools ...................... 10 Conclusion ............................................................................................................ 11 Questions .............................................................................................................. 11 2. Architectural Design of Our Sample Application .............................................. 13 Structure ................................................................................................................ 13 Objectives .............................................................................................................. 14 What are single-page applications? .................................................................. 14 Advantages of SPA ........................................................................................... 15 Disadvantages of SPA ...................................................................................... 15

📄 Page 15

 xiii What are multi-page applications? ................................................................... 15 Advantages of multi-page applications ........................................................... 16 Disadvantages of multi-page applications ....................................................... 16 Single-page v/s multi-page applications ......................................................... 16 Common MEAN stack architecture .................................................................. 16 Going with the event-driven approach ............................................................ 17 Best practices for designing an API................................................................... 18 Working with the singleton pattern .................................................................. 18 Working with the Observer pattern .................................................................. 19 Designing a flexible architecture ....................................................................... 19 Differences between the architecture of an application in the dev and prod environment ................................................................................ 20 Conclusion ............................................................................................................ 20 Questions .............................................................................................................. 20 3. Installing the Components ..................................................................................... 21 Structure ................................................................................................................ 21 Objectives .............................................................................................................. 22 Installing the Node.js runtime ......................................................................... 22 Installing the Node.js on Windows ................................................................. 22 Installing the Node.js runtime on macOS ....................................................... 23 Installing the Node.js runtime on Linux ......................................................... 24 Creating the project folder .................................................................................. 24 Installing the Angular-CLI ................................................................................. 26 Creating a new Angular project ......................................................................... 26 Installing Angular Material ................................................................................ 27 Verifying that Angular works ............................................................................ 28 Exploring the project structure .......................................................................... 29 Scanning the package: json file .......................................................................... 30 The node_modules folder ................................................................................... 31 Looking at the app folder ................................................................................... 32

📄 Page 16

xiv  Starting an Angular application ........................................................................ 33 Conclusion ............................................................................................................ 35 Questions .............................................................................................................. 35 4. Creation of the Frontend Using Angular .............................................................. 37 Structure ................................................................................................................ 37 Objectives .............................................................................................................. 38 Understanding the folder structure .................................................................. 38 Working with components ................................................................................. 39 General component structure of an Angular app ............................................ 40 Component structure for our application ........................................................ 41 Creation of Nav Bar component ........................................................................ 42 Looking at the nav-bar.component.ts ............................................................... 43 Looking at the nav-bar.component.html .......................................................... 44 Routing in Angular .............................................................................................. 45 Routing module ............................................................................................... 45 Few Routing directives ....................................................................................... 46 The RouterLink directive ................................................................................. 47 The RouterLinkActive directive ....................................................................... 47 The RouterLinkActiveOptions directive .......................................................... 47 Implementing the Home page .......................................................................... 47 Looking at the Home component’s TypeScript code ........................................ 48 Looking at the Home component’s HTML code .............................................. 48 Implementing the Register page ....................................................................... 51 Looking at the Register component’s TypeScript code ..................................... 51 Looking at the Register component’s template code ........................................ 52 Getting input from the user................................................................................ 54 Angular Material ................................................................................................. 54 Conclusion ............................................................................................................ 55 Questions .............................................................................................................. 55

📄 Page 17

 xv 5. Addition of Node.js and Ideas for Integration .................................................... 57 Structure ................................................................................................................ 57 Objectives .............................................................................................................. 58 Understanding an API ........................................................................................ 58 Verbs used in building REST APIs .................................................................... 58 Creating the posts and comments projects ..................................................... 59 Creating the posts project ................................................................................ 59 Creating the comments project ........................................................................ 61 Testing of the services ...................................................................................... 62 Testing the posts service ................................................................................... 62 Testing the comments service........................................................................... 64 Ideas of connecting with frontend .................................................................... 65 Conclusion ............................................................................................................ 66 Questions .............................................................................................................. 66 6. Handling Authorization........................................................................................... 67 Structure ................................................................................................................ 67 Objectives .............................................................................................................. 68 Introducing the authentication service ............................................................. 69 Introduction to Google Cloud ............................................................................ 69 What is a Kubernetes cluster? ......................................................................... 69 Creating a Google Cloud account .................................................................... 70 Creating a new project ..................................................................................... 71 Setting up a Kubernetes cluster ....................................................................... 72 Creating an auth docker build ........................................................................... 75 Creating a .dockerignore file .............................................................................. 77 Creating an authentication deployment ........................................................... 77 Key elements of a deployment .......................................................................... 78 Key elements of a service .................................................................................. 79 Introducing MongoDB and creating an auth Mongo deployment .............. 80

📄 Page 18

xvi  Building a user model ......................................................................................... 81 Creating index.ts.............................................................................................. 84 Creating an Ingress service yaml ....................................................................... 86 Creating an Ingress load balancer ..................................................................... 87 Creating a Kubernetes Secret ............................................................................. 89 Using Skaffold for build automation ................................................................ 90 Introduction to middleware ............................................................................... 91 Introduction to cookies and JSON web tokens ............................................... 92 Password encryption ........................................................................................... 92 Error handling using express-validator ........................................................... 93 Understanding an error-handler ..................................................................... 94 Understanding the current-user ...................................................................... 95 Understanding validate-request.ts .................................................................. 96 Understanding require-auth.ts ........................................................................ 97 Creating an abstract class for custom error handling ..................................... 98 Creating subclasses for validation .................................................................... 98 Understanding request-validation-err.ts ......................................................... 98 Understanding database-connection-err.ts ...................................................... 99 Understanding bad-request-err.ts .................................................................. 100 Understanding not-found-err.ts .................................................................... 101 Understanding no-auth-err.ts........................................................................ 101 Separating the logic for routes ......................................................................... 102 Creating Signup, Signin and CurrentUser routes ......................................... 102 Signup route .................................................................................................. 102 Signin route ................................................................................................... 105 CurrentUser route ......................................................................................... 107 Signout route ................................................................................................. 107 Testing the application using Postman ........................................................... 108 Conclusion ...........................................................................................................111

📄 Page 19

 xvii Questions .............................................................................................................111 7. Creating the Posts Service and NATS Streaming Integration ........................ 113 Structure .............................................................................................................. 113 Objectives ............................................................................................................ 114 Introducing the common module ................................................................... 115 Creating a GIT repository for the common module ..................................... 116 Publishing the common module to NPM ...................................................... 116 Installing required packages in the common module .................................. 117 Making changes to package.json and tsconfig .............................................. 118 Making changes to package.json .................................................................... 119 Changes to tsconfig ........................................................................................ 119 Moving the authentication logic in the common module ........................... 120 Installing the common module in the auth folder ........................................ 121 Standard process for new services .................................................................. 121 The Posts service ................................................................................................ 122 Creating the Posts folder ................................................................................ 122 Updating the index.ts .................................................................................... 123 Creating the Posts deployment YAML ........................................................... 125 Creating the Posts Mongo DB deployment YAML ....................................... 127 Making changes to the Skaffold YAML .......................................................... 128 Looking at the Auth deployment YAML ........................................................ 129 Looking at the Auth index.ts ............................................................................ 130 Creating the Posts service ................................................................................. 131 Creating a new Post ....................................................................................... 131 Updating an existing Post ............................................................................. 133 Displaying all Posts ....................................................................................... 135 Displaying a specific Post .............................................................................. 135 Creation of the nats-wrapper class .................................................................. 136 Creation of the Posts model ............................................................................. 137

📄 Page 20

xviii  Introduction to the NATS streaming server................................................... 139 Creating the NATS deployment file ................................................................ 140 Creating a basic publisher and listener ts files .............................................. 142 The Test Publisher .......................................................................................... 142 The Test Listener ............................................................................................ 143 Understanding the BaseListener and PostCreatedListener ......................... 144 The base-listener class .................................................................................... 144 The post-created-listener class ....................................................................... 146 Understanding the BasePublisher, PostCreatedPublisher and PostUpdatedPublisher ...................................................................................... 148 The base-publisher class ................................................................................. 148 The post-created-publisher class .................................................................... 150 The post-updated-publisher class ................................................................... 150 Understanding the PostCreatedEvent and the PostUpdatedEvent ........... 150 The PostCreatedEvent .................................................................................. 150 Understanding the PostUpdatedEvent ......................................................... 151 Understanding the subjects enum ................................................................... 152 Updating the common module ....................................................................... 152 Testing the publisher and listener ................................................................... 152 Testing out the Posts service using Postman ................................................. 154 Conclusion .......................................................................................................... 157 Questions ............................................................................................................ 158 8. Introducing Automated Testing ........................................................................... 159 Introduction ........................................................................................................ 159 Structure .............................................................................................................. 159 Objectives ............................................................................................................ 160 Introducing SuperTest ....................................................................................... 160 Setting up automated testing .......................................................................... 160 The index.ts refactor for Auth service............................................................. 161 Setup for Auth service ....................................................................................... 163