SlideShare a Scribd company logo
1 of 11
GETTING STARTED WITH MEAN STACK
• Node.js has one of the biggest tech communities behind it and as a result it also has a colossal amount of toolset to
choose from for whatever project you are working on.
• Small tools are great but what happens when you are building a large scale web application and you plan to maintain it
for a long time?
GETTING STARTED WITH MEAN STACK
• MEAN stack comes to the rescue.
• MEAN stands for MongoDB, Express.js, Angular.js, Node.js.
• You see, all these are small tools that people have already built and if you put them together you get an amazingly
productive and scalable fullstack framework to build your node.js application.
GETTING STARTED WITH MEAN STACK
Choosing The Right Tool
• Now that you know what the MEAN really is, you can just go ahead and build your own stack using the underlying tools.
• But do not forget that having a community as big as the Node.js community, there is always a small chance that whatever
you are building, there is probably the same or at least a similar tool already built by someone else.
• So, a rule of thumb, when working on a Node.js based project, is to look it up on npm (the Node.js dependency/project
manager) first.
• If you search for mean on npm you will find a lot of boilerplates that you can choose from.
• I personally prefer meanjs since it has some really awesome maintainers and comes packaged with a lot of cool features
out of the box. You can read more about it on their official website.
GETTING STARTED WITH MEAN STACK
Getting Started
• You need to have some tools installed prior to diving into writing code. You need to have –
• Node.js and npm installed.
• MongoDB installed.
• Bower installed for managing our frontend libraries.
• Grunt installed as our build tool.
• Once you have everything, fire up a terminal window and run the following command to clone the repository using git.
Then cd into the directory.
$ git clone https://github.com/meanjs/mean.git meanjs
$ cd meanjs
• Now we have to install all the dependencies using npm.
$ npm install
• That is it, you’re ready to go. Now simply run $ grunt before you open up a browser and navigate to http://localhost:3000.
On that webpage, you can play around the sample articles feature.
GETTING STARTED WITH MEAN STACK
• A Closer Look
• Now that we have our stack ready and our application running, we are ready to dive into the code.
• The folder structure is pretty intuitive. We have app/ directory where all our backend code reside and public/ for all our frontend
code.
• config/ is where all our application’s configuration and environment based settings go and tests/ is for the test files.
• Mean.js follows a very modular architecture.
• It treats each feature as a module and each module has its backend and frontend components.
• Take a look at the codes inside, it has a built in module for user management and articles that you can follow if you need a sample. In the
backend, you get controller, model, view and routes for the article module. In the frontend you have controller, service and view. Of
course, all the components come with built-in tests.
GETTING STARTED WITH MEAN STACK
Scaffolding
• One of the most handy features of mean.js is its command line generator tool.
• It is built on yeoman and packed with very useful commands that will help you quickly scaffold a base for your
modules/features.
• To use it, we need yeoman and the meanjs-generator installed.
• If you are on your development machine, I suggest installing it globally so that you can take advantage of it for every
project. Run the following commands –
$ npm install -g yo
$ npm install -g generator-meanjs
• Note: You might need sudo to install packages globally
GETTING STARTED WITH MEAN STACK
• Run the following command to create a new module for posting small statuses.
$ yo meanjs:crud-module status
• You will be asked a few questions.
• First, if you want css, directives etc. with the frontend component. For this quick demo, we do not need any of those so
just press enter.
• Second, if you want this module to be added in the top menu bar, write ‘Y’ and press enter.
• Third, what should the name on the menu be? Simply name it ‘Status’ and press enter.
• Now you should see an output similar to the following –
GETTING STARTED WITH MEAN STACK
create app/controllers/statuses.server.controller.js create app/models/status.server.model.js
create app/routes/statuses.server.routes.js create app/tests/status.server.model.test.js
create public/modules/statuses/config/statuses.client.routes.js
create public/modules/statuses/controllers/statuses.client.controller.js
create public/modules/statuses/services/statuses.client.service.js
create public/modules/statuses/tests/statuses.client.controller.test.js
create public/modules/statuses/views/create-status.client.view.html
create public/modules/statuses/views/edit-status.client.view.html
create public/modules/statuses/views/list-statuses.client.view.html
create public/modules/statuses/views/view-status.client.view.html
create public/modules/statuses/statuses.client.module.js
• That is it, you can now visit http://localhost:3000/#!/statuses and create, update and delete statuses. It is that simple.
GETTING STARTED WITH MEAN STACK
• You may not always need to create a full fledged crud module for every feature and MEAN.js has that covered too.
• You can just scaffold a standalone backend controller or a frontend angular service using the generator.
//create a backend controller
$ yo meanjs:express-controller <controller-name>
//create an angular.js service
$ yo meanjs:angular-service <service-name>
GETTING STARTED WITH MEAN STACK
What’s Next?
• I bet you are already impressed with the productivity of MEAN.js and I encourage you to take a look at their official
documentation to find out more about it is strengths.
• Make something small at first, an issue tracker or a bookmark manager.
• You will learn many things on your way.
• We will also be covering more ground on this topic so check back soon.

More Related Content

Similar to Getting Started with MEAN Stack

How to Install Node.js and NPM on Windows and Mac?
How to Install Node.js and NPM on Windows and Mac?How to Install Node.js and NPM on Windows and Mac?
How to Install Node.js and NPM on Windows and Mac?Inexture Solutions
 
Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)Chris Cowan
 
Steps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACSteps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACInexture Solutions
 
Build Your First Android App Session #1
Build Your First Android App Session #1Build Your First Android App Session #1
Build Your First Android App Session #1Troy Miles
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanPatrick Buergin
 
Discovery Life Project Portfolio
Discovery Life Project PortfolioDiscovery Life Project Portfolio
Discovery Life Project PortfolioJaco Koekemoer
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsRapidValue
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 serversMark Myers
 
AWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWS
AWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWSAWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWS
AWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWSAmazon Web Services
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications Concetto Labs
 
Protractor Testing Automation Tool Framework / Jasmine Reporters
Protractor Testing Automation Tool Framework / Jasmine ReportersProtractor Testing Automation Tool Framework / Jasmine Reporters
Protractor Testing Automation Tool Framework / Jasmine ReportersHaitham Refaat
 
Node js (runtime environment + js library) platform
Node js (runtime environment + js library) platformNode js (runtime environment + js library) platform
Node js (runtime environment + js library) platformSreenivas Kappala
 
MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...
MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...
MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...MongoDB
 
A report on mvc using the information
A report on mvc using the informationA report on mvc using the information
A report on mvc using the informationToushik Paul
 
Bootstrapping Quality
Bootstrapping QualityBootstrapping Quality
Bootstrapping QualityMichael Roufa
 
Deploy meteor in production
Deploy meteor in productionDeploy meteor in production
Deploy meteor in productionMiro Radenovic
 

Similar to Getting Started with MEAN Stack (20)

Devops
DevopsDevops
Devops
 
How to Install Node.js and NPM on Windows and Mac?
How to Install Node.js and NPM on Windows and Mac?How to Install Node.js and NPM on Windows and Mac?
How to Install Node.js and NPM on Windows and Mac?
 
Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
 
Steps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACSteps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MAC
 
Build Your First Android App Session #1
Build Your First Android App Session #1Build Your First Android App Session #1
Build Your First Android App Session #1
 
Meteor
MeteorMeteor
Meteor
 
Android app upload
Android app uploadAndroid app upload
Android app upload
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
 
Discovery Life Project Portfolio
Discovery Life Project PortfolioDiscovery Life Project Portfolio
Discovery Life Project Portfolio
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 servers
 
AWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWS
AWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWSAWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWS
AWS Summit Stockholm 2014 – T5 – Deploy, manage and scale applications on AWS
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
 
Protractor Testing Automation Tool Framework / Jasmine Reporters
Protractor Testing Automation Tool Framework / Jasmine ReportersProtractor Testing Automation Tool Framework / Jasmine Reporters
Protractor Testing Automation Tool Framework / Jasmine Reporters
 
Devops for drupal
Devops for  drupalDevops for  drupal
Devops for drupal
 
Node js (runtime environment + js library) platform
Node js (runtime environment + js library) platformNode js (runtime environment + js library) platform
Node js (runtime environment + js library) platform
 
MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...
MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...
MongoDB World 2019: Using the MongoDB Enterprise Kubernetes Operator to Scale...
 
A report on mvc using the information
A report on mvc using the informationA report on mvc using the information
A report on mvc using the information
 
Bootstrapping Quality
Bootstrapping QualityBootstrapping Quality
Bootstrapping Quality
 
Deploy meteor in production
Deploy meteor in productionDeploy meteor in production
Deploy meteor in production
 

More from VEXXHOST Private Cloud

10 Essential Laravel 4 Packages Everyone Should Use.pptx
10 Essential Laravel 4 Packages Everyone Should Use.pptx10 Essential Laravel 4 Packages Everyone Should Use.pptx
10 Essential Laravel 4 Packages Everyone Should Use.pptxVEXXHOST Private Cloud
 
How To Install Rails & Nginx with Passenger on Ubuntu
How To Install Rails & Nginx with Passenger on UbuntuHow To Install Rails & Nginx with Passenger on Ubuntu
How To Install Rails & Nginx with Passenger on UbuntuVEXXHOST Private Cloud
 
How To Create a SSL Certificate on Nginx for Ubuntu.pptx
How To Create a SSL Certificate on Nginx for Ubuntu.pptxHow To Create a SSL Certificate on Nginx for Ubuntu.pptx
How To Create a SSL Certificate on Nginx for Ubuntu.pptxVEXXHOST Private Cloud
 
How To Securely Set Up Shipyard 2.0.10 with TLS on CoreOS
How To Securely Set Up Shipyard 2.0.10 with TLS on CoreOSHow To Securely Set Up Shipyard 2.0.10 with TLS on CoreOS
How To Securely Set Up Shipyard 2.0.10 with TLS on CoreOSVEXXHOST Private Cloud
 
How to deploy a MariaDB Galera cluster on Ubuntu 14.04
How to deploy a MariaDB Galera cluster on Ubuntu 14.04How to deploy a MariaDB Galera cluster on Ubuntu 14.04
How to deploy a MariaDB Galera cluster on Ubuntu 14.04VEXXHOST Private Cloud
 
How To Mitigate & Fix OpenSSL Heartbeat on CentOS or Ubuntu
How To Mitigate & Fix OpenSSL Heartbeat on CentOS or UbuntuHow To Mitigate & Fix OpenSSL Heartbeat on CentOS or Ubuntu
How To Mitigate & Fix OpenSSL Heartbeat on CentOS or UbuntuVEXXHOST Private Cloud
 
How To Install Ruby on Rails on Ubuntu
How To Install Ruby on Rails on UbuntuHow To Install Ruby on Rails on Ubuntu
How To Install Ruby on Rails on UbuntuVEXXHOST Private Cloud
 
How To Run Nginx in a Docker Container on Ubuntu 16.04
How To Run Nginx in a Docker Container on Ubuntu 16.04How To Run Nginx in a Docker Container on Ubuntu 16.04
How To Run Nginx in a Docker Container on Ubuntu 16.04VEXXHOST Private Cloud
 
How To Install & Configure Varnish with Apache on Ubuntu
How To Install & Configure Varnish with Apache on UbuntuHow To Install & Configure Varnish with Apache on Ubuntu
How To Install & Configure Varnish with Apache on UbuntuVEXXHOST Private Cloud
 
CentOS 6 to CentOS 7 Upgrade Procedure
CentOS 6 to CentOS 7 Upgrade ProcedureCentOS 6 to CentOS 7 Upgrade Procedure
CentOS 6 to CentOS 7 Upgrade ProcedureVEXXHOST Private Cloud
 
How To Deploy a Clojure Web Application on Ubuntu 14.04
How To Deploy a Clojure Web Application on Ubuntu 14.04How To Deploy a Clojure Web Application on Ubuntu 14.04
How To Deploy a Clojure Web Application on Ubuntu 14.04VEXXHOST Private Cloud
 
How to setup OpenVPN Server and Client on Ubuntu 14.04
How to setup OpenVPN Server and Client on Ubuntu 14.04How to setup OpenVPN Server and Client on Ubuntu 14.04
How to setup OpenVPN Server and Client on Ubuntu 14.04VEXXHOST Private Cloud
 
How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...
How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...
How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...VEXXHOST Private Cloud
 
How To Install GitLab As Your Private GitHub Clone
How To Install GitLab As Your Private GitHub CloneHow To Install GitLab As Your Private GitHub Clone
How To Install GitLab As Your Private GitHub CloneVEXXHOST Private Cloud
 

More from VEXXHOST Private Cloud (17)

10 Essential Laravel 4 Packages Everyone Should Use.pptx
10 Essential Laravel 4 Packages Everyone Should Use.pptx10 Essential Laravel 4 Packages Everyone Should Use.pptx
10 Essential Laravel 4 Packages Everyone Should Use.pptx
 
How To Install Rails & Nginx with Passenger on Ubuntu
How To Install Rails & Nginx with Passenger on UbuntuHow To Install Rails & Nginx with Passenger on Ubuntu
How To Install Rails & Nginx with Passenger on Ubuntu
 
How To Create a SSL Certificate on Nginx for Ubuntu.pptx
How To Create a SSL Certificate on Nginx for Ubuntu.pptxHow To Create a SSL Certificate on Nginx for Ubuntu.pptx
How To Create a SSL Certificate on Nginx for Ubuntu.pptx
 
How to Add Swap on Ubuntu
How to Add Swap on UbuntuHow to Add Swap on Ubuntu
How to Add Swap on Ubuntu
 
How To Securely Set Up Shipyard 2.0.10 with TLS on CoreOS
How To Securely Set Up Shipyard 2.0.10 with TLS on CoreOSHow To Securely Set Up Shipyard 2.0.10 with TLS on CoreOS
How To Securely Set Up Shipyard 2.0.10 with TLS on CoreOS
 
Fixing 403 Forbidden Nginx Errors
Fixing 403 Forbidden Nginx ErrorsFixing 403 Forbidden Nginx Errors
Fixing 403 Forbidden Nginx Errors
 
WordPress App on Ubuntu 14.04 LTS
WordPress App on Ubuntu 14.04 LTSWordPress App on Ubuntu 14.04 LTS
WordPress App on Ubuntu 14.04 LTS
 
How to deploy a MariaDB Galera cluster on Ubuntu 14.04
How to deploy a MariaDB Galera cluster on Ubuntu 14.04How to deploy a MariaDB Galera cluster on Ubuntu 14.04
How to deploy a MariaDB Galera cluster on Ubuntu 14.04
 
How To Mitigate & Fix OpenSSL Heartbeat on CentOS or Ubuntu
How To Mitigate & Fix OpenSSL Heartbeat on CentOS or UbuntuHow To Mitigate & Fix OpenSSL Heartbeat on CentOS or Ubuntu
How To Mitigate & Fix OpenSSL Heartbeat on CentOS or Ubuntu
 
How To Install Ruby on Rails on Ubuntu
How To Install Ruby on Rails on UbuntuHow To Install Ruby on Rails on Ubuntu
How To Install Ruby on Rails on Ubuntu
 
How To Run Nginx in a Docker Container on Ubuntu 16.04
How To Run Nginx in a Docker Container on Ubuntu 16.04How To Run Nginx in a Docker Container on Ubuntu 16.04
How To Run Nginx in a Docker Container on Ubuntu 16.04
 
How To Install & Configure Varnish with Apache on Ubuntu
How To Install & Configure Varnish with Apache on UbuntuHow To Install & Configure Varnish with Apache on Ubuntu
How To Install & Configure Varnish with Apache on Ubuntu
 
CentOS 6 to CentOS 7 Upgrade Procedure
CentOS 6 to CentOS 7 Upgrade ProcedureCentOS 6 to CentOS 7 Upgrade Procedure
CentOS 6 to CentOS 7 Upgrade Procedure
 
How To Deploy a Clojure Web Application on Ubuntu 14.04
How To Deploy a Clojure Web Application on Ubuntu 14.04How To Deploy a Clojure Web Application on Ubuntu 14.04
How To Deploy a Clojure Web Application on Ubuntu 14.04
 
How to setup OpenVPN Server and Client on Ubuntu 14.04
How to setup OpenVPN Server and Client on Ubuntu 14.04How to setup OpenVPN Server and Client on Ubuntu 14.04
How to setup OpenVPN Server and Client on Ubuntu 14.04
 
How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...
How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...
How To Setup Highly Available Web Servers with Keepalived & Floating IPs on U...
 
How To Install GitLab As Your Private GitHub Clone
How To Install GitLab As Your Private GitHub CloneHow To Install GitLab As Your Private GitHub Clone
How To Install GitLab As Your Private GitHub Clone
 

Recently uploaded

Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...MyIntelliSource, Inc.
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWave PLM
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
cybersecurity notes for mca students for learning
cybersecurity notes for mca students for learningcybersecurity notes for mca students for learning
cybersecurity notes for mca students for learningVitsRangannavar
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationkaushalgiri8080
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptkotipi9215
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...aditisharan08
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxTier1 app
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEOrtus Solutions, Corp
 
buds n tech IT solutions
buds n  tech IT                solutionsbuds n  tech IT                solutions
buds n tech IT solutionsmonugehlot87
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfkalichargn70th171
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 

Recently uploaded (20)

Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
 
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
cybersecurity notes for mca students for learning
cybersecurity notes for mca students for learningcybersecurity notes for mca students for learning
cybersecurity notes for mca students for learning
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanation
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
 
buds n tech IT solutions
buds n  tech IT                solutionsbuds n  tech IT                solutions
buds n tech IT solutions
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 

Getting Started with MEAN Stack

  • 1.
  • 2. GETTING STARTED WITH MEAN STACK • Node.js has one of the biggest tech communities behind it and as a result it also has a colossal amount of toolset to choose from for whatever project you are working on. • Small tools are great but what happens when you are building a large scale web application and you plan to maintain it for a long time?
  • 3. GETTING STARTED WITH MEAN STACK • MEAN stack comes to the rescue. • MEAN stands for MongoDB, Express.js, Angular.js, Node.js. • You see, all these are small tools that people have already built and if you put them together you get an amazingly productive and scalable fullstack framework to build your node.js application.
  • 4. GETTING STARTED WITH MEAN STACK Choosing The Right Tool • Now that you know what the MEAN really is, you can just go ahead and build your own stack using the underlying tools. • But do not forget that having a community as big as the Node.js community, there is always a small chance that whatever you are building, there is probably the same or at least a similar tool already built by someone else. • So, a rule of thumb, when working on a Node.js based project, is to look it up on npm (the Node.js dependency/project manager) first. • If you search for mean on npm you will find a lot of boilerplates that you can choose from. • I personally prefer meanjs since it has some really awesome maintainers and comes packaged with a lot of cool features out of the box. You can read more about it on their official website.
  • 5. GETTING STARTED WITH MEAN STACK Getting Started • You need to have some tools installed prior to diving into writing code. You need to have – • Node.js and npm installed. • MongoDB installed. • Bower installed for managing our frontend libraries. • Grunt installed as our build tool. • Once you have everything, fire up a terminal window and run the following command to clone the repository using git. Then cd into the directory. $ git clone https://github.com/meanjs/mean.git meanjs $ cd meanjs • Now we have to install all the dependencies using npm. $ npm install • That is it, you’re ready to go. Now simply run $ grunt before you open up a browser and navigate to http://localhost:3000. On that webpage, you can play around the sample articles feature.
  • 6. GETTING STARTED WITH MEAN STACK • A Closer Look • Now that we have our stack ready and our application running, we are ready to dive into the code. • The folder structure is pretty intuitive. We have app/ directory where all our backend code reside and public/ for all our frontend code. • config/ is where all our application’s configuration and environment based settings go and tests/ is for the test files. • Mean.js follows a very modular architecture. • It treats each feature as a module and each module has its backend and frontend components. • Take a look at the codes inside, it has a built in module for user management and articles that you can follow if you need a sample. In the backend, you get controller, model, view and routes for the article module. In the frontend you have controller, service and view. Of course, all the components come with built-in tests.
  • 7. GETTING STARTED WITH MEAN STACK Scaffolding • One of the most handy features of mean.js is its command line generator tool. • It is built on yeoman and packed with very useful commands that will help you quickly scaffold a base for your modules/features. • To use it, we need yeoman and the meanjs-generator installed. • If you are on your development machine, I suggest installing it globally so that you can take advantage of it for every project. Run the following commands – $ npm install -g yo $ npm install -g generator-meanjs • Note: You might need sudo to install packages globally
  • 8. GETTING STARTED WITH MEAN STACK • Run the following command to create a new module for posting small statuses. $ yo meanjs:crud-module status • You will be asked a few questions. • First, if you want css, directives etc. with the frontend component. For this quick demo, we do not need any of those so just press enter. • Second, if you want this module to be added in the top menu bar, write ‘Y’ and press enter. • Third, what should the name on the menu be? Simply name it ‘Status’ and press enter. • Now you should see an output similar to the following –
  • 9. GETTING STARTED WITH MEAN STACK create app/controllers/statuses.server.controller.js create app/models/status.server.model.js create app/routes/statuses.server.routes.js create app/tests/status.server.model.test.js create public/modules/statuses/config/statuses.client.routes.js create public/modules/statuses/controllers/statuses.client.controller.js create public/modules/statuses/services/statuses.client.service.js create public/modules/statuses/tests/statuses.client.controller.test.js create public/modules/statuses/views/create-status.client.view.html create public/modules/statuses/views/edit-status.client.view.html create public/modules/statuses/views/list-statuses.client.view.html create public/modules/statuses/views/view-status.client.view.html create public/modules/statuses/statuses.client.module.js • That is it, you can now visit http://localhost:3000/#!/statuses and create, update and delete statuses. It is that simple.
  • 10. GETTING STARTED WITH MEAN STACK • You may not always need to create a full fledged crud module for every feature and MEAN.js has that covered too. • You can just scaffold a standalone backend controller or a frontend angular service using the generator. //create a backend controller $ yo meanjs:express-controller <controller-name> //create an angular.js service $ yo meanjs:angular-service <service-name>
  • 11. GETTING STARTED WITH MEAN STACK What’s Next? • I bet you are already impressed with the productivity of MEAN.js and I encourage you to take a look at their official documentation to find out more about it is strengths. • Make something small at first, an issue tracker or a bookmark manager. • You will learn many things on your way. • We will also be covering more ground on this topic so check back soon.