MEANStack Web development from beginning

Hi I’m Lahiru Abegunawardena. This is the beginning of a new article series on MEANSTACK web development. At the end of this we will create a web application with Angular frontend, node backend and MongoDB database.

You will be wondering about what does it mean by MEANSTACK development.

M — Mongo

E — ExpressJS

A — Angular

N — Node

This is the list of main programming environment we use in MEANStack web development. So that’s how we get this name “MEANStack” web development.

If you are creating a web application using this technologies you need to start building backend first.

In order proceed first of all you need to install node. You can get the latest node installer here. You can check whether you have installed node already by running “node -v” or “”npm -v” and see whether you get output, not an error. Then you can install latest angular version into your computer. Remember: you don’t need to do this steps if you already did them. In order to install angular open your cmd and run command “npm install -g @angular/cli”. This will take a while and if you already have the latest npm and node versions you will get latest version of angular. I use Angular 5 in this tutorial set. In order to install MongoDB you can use this link.

I use “Visual Studio Code” as my IDE in this tute set. Let’s move on to the system development. First of all you can create a folder. I create a folder named “AngApp”. I create building a “index.js” file too. Now I open my folder and run cmd in that folder. You can easily do it by entering cmd instead of this address bar.

Now just type “npm init” and run the code. Here I showed what are the my inputs. You just need to press enter button each input if you don’t need to set any change.

If you successfully completed this process you can see that new generated as “package.json”. Now open vscode and open the project in above folder. You can view all files folders included and open files. Now open package.json file. You will see something like this.

Now this is the file that containes all node based packages you install and use through out the backend. You can see that index.js is the main file. That means in order to run your backend you need to run index.js. In order to run this we need to install “express js” which is also a nodejs framework.

So open the terminal in vs code. You open it using “ctrl + ‘ “ keys.

Then run code “npm install express — save”. This will take few seconds and you will get bunch of folders named node modules. This is the place where keeps all npm libraries you install in this backend.

Now let’s open the index.js file. And write following piece of code over there.

Now you can start running this program. You can run this by typing “node index.js” through cmd or terminal in your editor after getting into the correct folder. And you can get the following output using your web browser through the url “http://localhost:3000".

So let me explain you what is written in that piece of code in index.js.

var express = require(‘express’);

const app = express();

app.listen(3000, function(){

console.log(“listening to port 3000”);

});

app.get(“/”,function (req,res){

res.send(“hello world”);

});

first it sets variable express to use express module which installed previously. Then we set it to listen into port: 3000.

By calling “http://localhost:3000/" in browser it sends http request of “get” through port: 3000.

So by the last code segment we send response to the above mentioned get request as “listening to port 3000” and we can see it through the browser.

So I hope you could understand initialisation of meanstack web project. We will proceed from next article. You can contact me via my fb page and linkedIn profile. Please feel free to like, comment share your ideas. Thank you..!!