How Does the MEAN Stack Work?

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.7 instructor rating • 36 courses • 1,401,711 students

Lecture description

So what's the big picture of the MEAN stack? How do the different things work together? Time for a closer look!

Learn more from the full course

Angular & NodeJS - The MEAN Stack Guide [2021 Edition]

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

12:41:07 of on-demand video • Updated March 2021

  • Build real Angular + NodeJS applications
  • Understand how Angular works and how it interacts with Backends
  • Connect any Angular Frontend with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Use ExpressJS as a NodeJS Framework
  • Provide a great user experience by using Optimistic Updating on the Frontend
  • Improve any Angular (+ NodeJS) application by adding Error Handling
English With that, let's have a look at the big picture. How does the entire MEAN stack look like in this course or in general, not just in this course? We have the client-side and the server-side, that's important. The client-side is what the user sees, the webpage as it runs in the browser, server-side is somewhere on a server we deploy where we run our business logic and which the user only indirectly accesses, we'll see how that access works in a second. So on the client, we use Angular which is a JavaScript framework so we also use JavaScript implicitly and we use it to build that user interface. On the server-side, we use Node, Express and MongoDB, Node/Express for the logic and MongoDB for the database, as I said, you don't want to connect directly to it from Angular. Now the client-side Angular is responsible for the user interface, so for the presentation. It's a Single Page Application as I explained in the last lectures and that Single Page Application can be rendered by our Node backend, so we could have one route which essentially returns that single HTML page but we can also be totally decoupled from that and be served from a totally different host, some static host like AWS S3 for example. Now on the Node application, we have our core business logic, especially the logic that should not be exposed to the client due to security reasons or performance reasons. We have our persistent data storage, so that database and we also put our authentication logic there, for example, it's of course part of our business logic, I just want to really emphasize that here, the logic where we decide whether an email or password is valid happens on the server because it can easily be fiddled with on the client, not so much on the server. How do we connect the two pieces then? Well we exchange requests and responses and these requests and responses are sent behind the scenes, so-called Ajax requests, you might have heard of this before and we use exactly the same pattern in Angular. These are requests which can be sent without us needing to reload the page which is of course exactly what we want. Therefore the type of data we exchange is not HTML because we never want HTML code, we do all that presentation and re-rendering logic with Angular. Instead what we get is so-called JSON data, that's a data format that's really efficient for encoding data like a list of posts and you will see how it looks like in this course. This is the big picture, this is how the MEAN stack works and this is exactly what we will implement in this course. So with that, I'd say enough of the words, let's get started and let's start setting up the base development environment we'll work with in this course and let's start building our MEAN stack application.