Web development is moving fast and to keep up to mark, you need a technology stack that is . The MEAN stack includes MongoDb, Express, Angular, and Node.js. These tools provide a rich environment to build advanced web applications in a short space of time. All the pieces of the MEAN stack are practically tried and tested in large and small-scale organizations.
Mastering MEAN Web Development will guide you through all the necessary pieces to build a web app from start to finish. We will discuss the concepts and methods in depth, and shine light on how and why we use each piece of the MEAN stack.
We’ll begin by learning how to use Webpack and Babel to assemble our frontend. We’ll see how to leverage many of the new features in Angular2. We’ll create a RESTful API built with Node.js and MongoDB.
Mastering MEAN Web Development will cover all the topics you need to create your own web apps for organizations, small or big.
About The Author
Shane A. Stillwell is a full stack web developer specializing in MEAN stack web development. He has been a developer for over 15 years. Shane has a knack for cutting edge technology and uses it to make development faster, easier, and most importantly, fun.
Shane has built a wide variety of applications from mobile apps to large scale Angular and React web apps, to small hobby projects. Shane speaks and writes on full stack development hoping to help bring cutting edge technology closer to anyone with a desire to learn.
Starting with a blank slate, we need to make sure we have all the correct software products installed and get an overview of the tools we’ll be using.
When we rely on memory alone to help us recall how to deploy or upgrade or why a certain module is imported, it will let us down.
Adding Bootstrap will give us a leg up with common CSS components that we will use throughout the site.
We want to include our own styles, but we also want to do it in a modular way. How do we keep our styles organized and add some helpers along the way?
Icons will add the extra touch that our site needs and Font Awesome will give us hundreds of icons to choose from in an easy-to-use fashion.
Having a mobile-friendly layout for our web app is essential when many of our visitors will be viewing the site on a mobile device. Being responsive to screen size with Bootstrap’s Grid layout will help.
The application will need several different pages to be able to create, view, list, and edit resources.
After we’ve added routes to our web app, we need to show how we can navigate from one route to another within the app.
The web app is going to need to utilize similar elements throughout the app. Creating reusable elements will cut down on the amount of repeat coding we have to do.
Our API is bare and needs routes to be able to handle interaction with the frontend. We’ve decided to use RESTful routes for our resources, and will set them up in this video.
There are many different ways to structure your API, but having so many ways can lead to pitfalls and difficulties while using APIs. This video will explore the best practices for creating APIs that are flexible to consume.
We need to connect to MongoDB in our app to store our data. There are many different ways to accomplish this task. We’ll use Mongoose and show how to use environment variables to store sensitive data.
Our app needs to store information in MongoDB, and Mongoose is the most feature-rich Node.js module for interacting with MongoDB.
Tests will ensure that our API endpoints behave as we expect them to behave. Integration tests can give us the confidence we need to know that our API remains the same as we add or change code.
Now that we have a working frontend and backend API, we need to connect our Angular app to the API using the Http service.
The business logic for our different resources can get scattered around the app if we don’t diligently create a place for them. Creating models will give us a source of truth for all our required logic.
Validating form data takes a number of players to make it happen logically and give the user the best experience. We need to show how our form works with other components to validate user input.
Testing the entire app through end to end testing allows us to make sure that the app always behaves as expected. This gives us confidence and saves us time from having to manually test the functionality of the app ourselves.
Our app lacks any security or control over who can edit. We need to create users in our system that can log in and add or edit information in our app.
Our API needs to process the JSON Web Token sent to it by the client and decide whether the client is authorized to perform a protected operation or not.
The integration tests that we developed back in video 4.5 will now fail because we’ve added an authentication requirement to several endpoints. We now need to go back and update our tests to include a generated token
The backend API now requires authentication for some endpoints. We need to create sign-up and login pages that collect an e-mail and a password, and then store the resulting token.
We now have a JSON Web Token stored locally, but we need to ensure that this token is submitted to the API to prove our authentication.
For certain tasks, it’s better to use a job queue rather than holding up the web server API process. Sending e-mails is a perfect task that can be put off momentarily for another process to pick up and finish.
A queue needs to have jobs so that the API can schedule them and a worker can process them. These jobs need to be defined with certain inputs and functions that it will need to accomplish to complete the job.
The last step is to send our e-mail through an e-mail service provider. We’ll choose a provider and show how to connect using that provider’s API.
So many websites these days offer real-time updates and notifications of changes. It’s imperative to understand how web socket updates work and how to integrate them into a web app.
We need to configure Socket.io on our server and start emitting updates when a user logs in and when a new master is created.
Now that our backend is sending updates, the client needs to be configured to listen to these updates and update the UI accordingly.
Choosing the right setup for our MongoDB server is paramount. Losing data is not an option and minimizing downtime is critical to successful operations.
There are many different options for deploying on Node.js. We need to identify the right fit for our skills and business requirements.
Since our frontend has completely static files, we need to use Webpack to compile them and then deploy these static files on a location that best suits our needs.
The previous nine sections covered a lot of ground, and we will take a few minutes to recap how each section built on the previous and the new skills that were obtained in each section.
Here, we will provide an overview of all the technologies we’ve used throughout our videos. MEAN usually includes many components working together; this will give a nice overview of how we use them.
The app we’ve built only touches the surface of some areas. There are more items we can add to our app that would make it outstanding.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.