N.B. This content may be out of date as this article was originally written in 2021.
These days, a very popular stack for web applications is the MEAN stack. It’s a stack that uses JavaScript, and its popularity is partly because JavaScript has come a long way since its early days—particularly with the optional type-safety introduced by TypeScript and the continued incorporation of new features into the ECMAScript standard. These improvements have brought stability and robustness to a language that, in its early days, some developers found limiting.
MEAN stands for:
- MongoDB (a NoSQL DB)
- Express.js (a backend web framework)
- Angular (a front-end framework)
- Node.js (an open-source cross-platform server)
This stack is typically used to develop responsive, modern web applications, including Progressive Web Apps (PWAs). For true native mobile apps, Angular can be paired with additional frameworks such as Ionic or NativeScript.
Make Your Own
Jump in and have a quick go at https://stackblitz.com/
Though later we’ll look at how to set up this stack properly (i.e., create and link the separate elements), either in the cloud or locally on your own machine (which you will do during the development process).
On a Mac
https://levelup.gitconnected.com/setting-up-your-new-mac-for-mean-stack-development-152aaf927133
https://www.sitepoint.com/mean-stack-angular-angular-cli/
https://techprimelab.com/how-to-host-your-mean-app-on-aws-for-free/
Elements of This Stack
npm
npm is a package manager for the JavaScript programming language. npm, Inc. was acquired by GitHub (which is owned by Microsoft). While GitHub provides hosting for software development and version control with Git, npm is the default package manager for the JavaScript runtime environment Node.js.
https://nodejs.dev/learn/an-introduction-to-the-npm-package-manager
MongoDB
MongoDB is a source-available cross-platform document-oriented database program.
It’s a NoSQL database (document-based, rather than graph-based), and it uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License (SSPL).
Although NoSQL databases like MongoDB can offer excellent horizontal scalability and flexibility for large or rapidly changing data sets, performance gains may vary depending on the workload. In many cases, they handle high-volume data more efficiently than traditional SQL databases under certain conditions, but each approach has its strengths.
Getting Started
To play around with MongoDB (prior to using it for something real world), you can install it locally. This differs depending on your OS. On macOS, follow the guide here:
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/
MongoDB is a document-based database with its own set of CRUD operations.
INSERT
|
1 |
db.inventory.insertOne( { item: "canvas", qty: 100, tags: ["cotton"], size: { h: 28, w: 35.5, uom: "cm" } } ) |
Executing the above inside the mongo shell results in:
|
1 |
{ "acknowledged" : true, "insertedId" : ObjectId("606ca4ade346f34302385072") } |
Telling us that the object has been inserted into our document-based NoSQL database.
Running db.inventory.find( { item: "canvas" } ) we get that object back from our database:
|
1 |
{ "_id" : ObjectId("606ca4ade346f34302385072"), "item" : "canvas", "qty" : 100, "tags" : [ "cotton" ], "size" : { "h" : 28, "w" : 35.5, "uom" : "cm" } } |
Prefer a visual interface for your database? Try Compass:
https://github.com/mongodb-js/compass/
Express.js
“Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.”
Several popular Node.js frameworks are built on top of Express.
Angular
It’s actually straightforward to get Angular up and running on your local machine using the Angular CLI:
|
1 |
npm install -g @angular/cli |
Note: Angular is updated regularly (v16+ at the time of writing). While many tutorials reference older versions like Angular 8, always check the latest Angular official docs for the current best practices.
Resources
https://angular.io/guide/setup-local
https://www.freecodecamp.org/news/angular-8-tutorial-in-easy-steps/
Node.js
Node.js is “an asynchronous event-driven JavaScript runtime, designed to build scalable network applications.”
Example Stacks
N.B. These code examples may have unfixed vulnerabilities and thus would need to be upgraded or remade for actual use.
https://github.com/sitepoint-editors/mean-bucketlist
Courses
https://www.udemy.com/course/become-a-mean-stack-developer-mongodb-expressangularnode/
