MEAN Stack Introduction and Installation

1. MEAN Stack Introduction and Installation MEAN Stack Introduction and Installation MEAN stack refers to the bunch of technologies (MongoDB-Express-Angular-Nodejs) which natively developed in JavaScript. Due to fancy features of each pile of stack, this stack is getting famous and the community is increasing day by day hence it became more reliable due to huge community support. Introduction of each pile: Introduction of each pile: NodeJS is a server side JavaScript execution environment. It’s a platform built on Google Chrome’s V8 JavaScript runtime. It helps in building highly scalable and concurrent applications rapidly. Try out some tutorials and read documentation from here. ExpressJS is a lightweight framework used to build web applications in Node. It provides a number of robust features for building single and multi page web application. It is inspired by popular Ruby framework – Sinatra. You can learn about it from here. Angular is a JavaScript framework developed by Google. It provides some awesome features like the two-way data binding. It’s a complete solution for rapid and awesome front end development. Be noted here that I have used the term “Angular” instead of “AngularJs” as it makes lot of difference and confusion between them. AngularJs is the library where Angular is a framework. Angularjs refers to 1.x.x where Angular refers to 2.x.x. To know more about Angular, visit this. MongoDB is open source document based database which provides high performance, high availability and automatic scaling. It also known as No SQL or non-relational database as it does not follow traditional approach of relational model. It basically represents the data in form of collection of JSON documents. You can get to know more about it from here. For MEAN Stack Online Training Visit: https://www.visualpath.in

2. Let’s walk through how to create an app using MEAN. 1.Install node.js. Once you install node.js you will have npm in your system. Here is more information about npm. 2.Install MongoDB. 3.Lets install express generator. •Express generator is basically boilerplate creator for the node/express application. You can read about it from here. npm install express-generator -g •After installing express generator, Lets start using it. You can use extra attributes from by checking its options from here. express myMEANapp •This will create a directory called “myMEANapp” in your machine. Now go inside it by following command. cd myMEANapp •Now all you need to do is to install project dependencies which should be mentioned in the package.json file. These dependencies are basically used to run your express application. You can install it by following command. npm install •Add mongoose in the app to connect with mongoDB database by following command. npm install mongoose --save •Once all the dependencies are installed, you will have once more directory called “node_modules” in your application. Your application should be ready to run now. Run following command to run application. npm install cors –save-dev •Install cors module to prevent cors errors. npm start •You can check in browser that your application is running by hitting below url: http://localhost:3000/ Visit: https://www.visualpath.in

3. •If you want to change the port, You can change it by modifying the file bin/www. You should have below directory structure of your application. For For MEAN Stack Training MEAN Stack Training 1. •Now you are ready with your backend code. 2.Let’s start creating frontend part in Angular. •Angular provides the CLI which helps us to create boilerplate like the way we have created express app using express generator. •Install angular cli by following command: npm install -g @angular/cli •As we are developing MEAN stack application, we should have this angular application in our myMEANapp. So let’s remove the public directory from the myMEANapp. npm install •Add mongoose in the app to connect with mongoDB database by following command. •npm i @ng-bootstrap/ng-bootstrap –save npm install ngx-bootstrap --save •We will be using bootstrap modals for designing in angular. rm -rf public Visit: https://www.visualpath.in

4. •Now create angular app by using following commands: ng new client •It will create a boilerplate for angular application. •Let’s go into the client directory and run the application by following command: •cd client •ng serve •Let’s check in the browser now by hitting below url: http://localhost:4200/ For For MEAN Stack Training MEAN Stack Training contact us@9704455959 contact us@9704455959 Visit: https://www.visualpath.in