My First MEAN Web App: What MEAN Stack Is About?

“Wait, why do you want my first app to be mean?”

If you have just asked yourself this question, you are in more than right place. This series aims to bring people like you to the world of developing web apps. Congratulations for your first step and keep reading! MEAN app does not have to be actually mean to anyone or anything!

“So what is this mean thing about?”

Okay, let me clarify first things first: MEAN (entirely in capitals) is an acronym of the development stack we are going to use in this project and has little to do with anyone’s personality. I personally do not like mean people, but developing on MEAN stack is quite enjoyable! I hope you will share the enthusiasm with me.

Development stack is, following a definition from chrchm.ag, “nothing more than few pieces of software working together to provide a foundation on which you can build your project”. So what MEAN consists of?

M — MongoDB; modern no-SQL database engine, which our app will use to store its data
E — Express; a framework for node.js (explained later) that allows us to simply manage our web server
A — Angular; another framework for node.js that allows us to manage how our app will be displayed to the user (for more advanced readers, keep in mind we will be using Angular 4)
N — Node.js; engine that allows for JavaScript code to be executed on server side and provides output to the client.

All the mentioned software is free and open-source, so no need to worry about using them for any kind of project.

“Do I need anything else to start developing?”

Well… text editor would be nice to have. I will be personally using Visual Studio Code, multi-platform free and open source editor from Microsoft (yes, I know how awkward it sounds, but it is true), only because I am currently testing it. In the past I was using Notepad++ (on Windows) and gEdit (on Linux). You are actually free to use any of the mentioned ones, as well as vi(m), Emacs, even good ol’ Windows’ Notepad, or whatever else you like.

However, I promised you we will be developing our app in a neat way. For this reason, we will need Docker. Docker is a containerisation engine. It allows to run your apps in the isolated from your everyday environment containers. This way, you do not bloat your current system with resource-consuming software. Containers can be easily added, removed, switched on and off. This way you do not have to worry about doing damage to your everyday environment. It is also much easier to start over again, if you do any damage to your isolated development environment.

Virtual machines provide similar level of protection, but are much more resource-consuming, as they virtualise not only software, but also hardware. Apart from that, configuring them takes much more of your precious time and you would preferably like to develop your web app in no time, right?

There is a case, where you might need a virtual machine. Consult notice below for further information.

Notice for Windows users only:
It is highly advised for you to use Windows 10 Professional, Enterprise or Education for this (or any other) web development project. If you are a student or academic teacher, you should be able to obtain Windows 10 Education for free from your university or Microsoft Imagine (former DreamSpark and MSDN AA) website.

Other desktop or server versions of Windows might work well enough too with few workarounds. They will be described in another post at later time. If you are using the newest Insider Preview of Windows Server, you should be fine without workarounds. If you are unsure about using workarounds, create a virtual machine with Linux distribution of your choice using e.g. VirtualBox instead, or run live Linux environment from an optical disc or USB. Most of major distributions (Ubuntu, Debian, Fedora, Mint, etc.) should be good enough.

“Where do we go from here?”

In the next post, we will build some containers with our development stack using Docker.

Credits for the featured image go to lolworm.com.

Originally published at At The Back Of The Browser.