This course focuses on the full-stack MEAN development process and goes in-depth by incorporating a supporting architecture with Grunt and integrating automated testing. It will walk you through building a real, enterprise-grade application.
Starting out with the fundamentals of the MEAN stack technologies, you will learn how to build a strong solution architecture for automated builds and distributed development. You’ll then dive deep into Grunt, Bower, and npm to become a full-stack MEAN engineer. You will discover how to build one-to-many relationships using arrays of objects in Mongoose. Diving even deeper, you’ll meet new technologies such as D3, which will help you to build graphs for an enterprise dashboard. Then, we will test our Node and Angular applications with Karma, Jasmine, Mocha, and Chai.
By the end, you’ll be able to build a powerful, MEAN-backed application for working in a distributed team.
About The Author
Michael Perrenoud is a veteran enterprise application engineer with more than 15 years of experience architecting and building full-stack solutions for small businesses and Fortune 500 companies. He’s mentored literally hundreds of engineers across the world on the MEAN stack and more. He is the CEO and Founder of Consult with Mike, LLC and provides thousands of dollars in free resources in the form of blog posts on his site today.
He also has an e-book coming out soon, MEAN with Mike, which is a composition of hundreds of hours of mentorship. It’s a true, long-term, learning course that is meant to build problem solvers.
There is a lot of information out there about the MEAN stack. Let’s bring it all together, giftwrap it, and deliver a real-world application.
The acronym is catchy but undescriptive. Let’s break each letter down and demystify the stack.
We need an editor, one that is going to provide us with great assistance. WebStorm is going to be that editor.
We need to download the libraries we depend on. We also need to be able to distribute them to production. The tools npm, Bower, and Grunt are going to make that possible.
We need to build an automated testing scenario, for both Angular and Node. Karma, Jasmin, Mocha, and Chai are going to make that happen.
Having the tools in the toolbox is great; using them is another story. Let’s use them in some practical examples.
A necessary foundation has been laid, but an entire example hasn't. Let’s build the quintessential Hello, World! application and put it all together.
Before building an application we need to understand what we are building. Generally, this is where you’d get an introduction from the customer, but we have a complete application to look at.
While it’s nice to have an API to work against, this is not always possible. With AngularJS, however, this isn’t a problem; we can fake that data to make sure that we are ready for the API.
One of the things that have to be considered is what’s displayed when no data is available. Building the dashboard skeleton before faking all of the data will allow us to do that.
Let’s get started adding data. The components we build here are really going to be the meat and potatoes of any enterprise application.
Adding a customer is awesome. However, we need to know how to list customers so that newly added ones can be seen and edited.
Listing data is great, but a database is no good if you can’t edit it. Let’s walk through how we might edit a customer record.
Having a list of customers is great, but we need to be able to sell them products and keep track of those sales.
Often, we will need to be able to list all the sales for a customer. There are a lot of ways to do this, but I’m going to leverage a child state and a one-to-many view.
Sometimes, there is something missed on a sale, so we need to edit it, such as the shipping address.
Most of the times, a standard control is good enough for input, but there are times when we need something more complex. Angular Bootstrap provides some of this.
There are times when you need a specific set of data to test something that will grow over time. A dashboard is perfect here.
There are also times when you’ll need to build visual aids for the management or analysts. Graphs are the quintessential visual aid
Let’s list all unfulfilled orders in the system on the dashboard.
Let’s list all recent orders on the dashboard.
Let’s get to the other side of the stack and start building the server-side pieces. The first part is building our Mongoose models.
We know every endpoint that we need. Let’s build those endpoints in ExpressJS.
We have the endpoints set up on the server side. Now let’s talk about getting out of the mock data and going end-to-end.
We have a full stack. Let’s now add a customer to the database for real.
Let’s add a sale to customer
We want to make sure that all the routes exist that are published. Let’s test them.
We want to make sure that the API works as expected, so we will build tests for all endpoints.
We now want to make sure that we are handling every part of the API, so let’s test it.
We need to make sure that the controllers are behaving as expected, so let’s test them.
Services need to provide exactly what they publish, so let’s test them as well.
We need to build a distribution package. However, we need concatenation and uglification. Let’s count on Grunt to do this for us.
We need a place to deploy our code. Let’s look up to Heroku for that.
We need a database, off-premise, that is used for production. Let’s use a Heroku add-on for that.
We have different settings in production, for some things, as against development. Let’s add some environment variables to Heroku for this.
We need to see what our application looks like in production. Let’s launch our newly deployed Heroku application.
There are some helpful plugins for Sublime that will make it easier; let’s review those.
This is a different tool set, so we need to review how we might use it differently compared to WebStorm.
There are some caveats to using Sublime over WebStorm, and so we’ll review those.
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.