MEAN (MongoDB, Express, Angular, Node) Stack : Kick Start First Project Using Generator
7:48 PMHello everyone, I am going to share my experience in settting up MEAN stack project for the first time.
So firstly, before we go further, what is MEAN stack ? MEAN stands for Mongo DB, Express, Angular, and Node. It is combination of modern and light technologies. Mongo DB as NoSQL database provider, Express JS as a Node JS web application framework, Angular JS as HTML and UI framework and Node JS, a lightweight and efficient JavaScript runtime, as the foundation of our web application.
Let's start installing MEAN stack framework.
I am going to use framework called Generator Angular Fullstack.
What is that ? Generator Angular Fullstack is,
Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node - lets you quickly set up a project following best practices.
Let's do M stuff from MEAN, which is installing Mongo DB.
Download MongoDB from this source. Choose your platform whether Windows, Linux, or OSX.
Do the installation,
- for Windows user, please see https://docs.mongodb.org/v3.0/tutorial/install-mongodb-on-windows
- for Linux Ubuntu user, please see https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-ubuntu-14-04
- for OSX user, please see https://docs.mongodb.org/v3.0/tutorial/install-mongodb-on-os-x
Run your MongoDB
Create the default /data/db directory, by typing below command in your terminal or command prompt,
mkdir -p /data/db
Run without specifying paths,
If your system PATH variable includes the location of the mongod binary and if you use the default data directory (i.e., /data/db), simply enter mongod at the system prompt:
If you do not use the default data directory (i.e., /data/db), specify the path to the data directory using the --dbpath option:
Mongo DB is now running, and you can start making a connectionIf your system PATH variable includes the location of the mongod binary and if you use the default data directory (i.e., /data/db), simply enter mongod at the system prompt:
mongodSpecify the path of the data directory,
If you do not use the default data directory (i.e., /data/db), specify the path to the data directory using the --dbpath option:
mongod --dbpath
Next, continue installing Node JS.
Download the latest Node JS in this source.
Do the installation.
After installation is finished, check if the Node JS already installed by typing below command,
node -vThe output will be the version of Node JS for example v5.2.0.
Now, we begin downloading tools needed by Generator Angular Fullstack and Generator Angular Fullstack it self.
Installing yeoman, bower, grunt-cli, gulp-cli, Generator Angular Fullstack by typing the command below
npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack-g flag on above command indicated that we want installed it globally.
After installation has completed, we can start using Generator Angular Fullstack.
We want to make a directory for our project so let's make a new directory, and cd into it :
mkdir my-new-project && cd $_Run yo angular-fullstack, optionally passing an app name :
yo angular-fullstack [app-name]
Run grunt for building, grunt serve for preview, and grunt serve:dist for a preview of the built app.Done, we are done installing Generator Angular Fullstack.
Now, before we run our project. Let's see the project structure below,
├── client
│ ├── app - All of our app specific components go in here
│ ├── assets - Custom assets: fonts, images, etc…
│ ├── components - Our reusable components, non-specific to to our app
│
├── e2e - Our protractor end to end tests
│
└── server
├── api - Our apps server api
├── auth - For handling authentication with different auth strategies
├── components - Our reusable or app-wide components
├── config - Where we do the bulk of our apps configuration
│ └── local.env.js - Keep our environment variables out of source control
│ └── environment - Configuration specific to the node environment
└── views - Server rendered views
An example client component in
client/appmain
├── main.js - Routes
├── main.controller.js - Controller for our main route
├── main.controller.spec.js - Test
├── main.html - View
└── main.less - Styles
An example server component in
server/apithing
├── index.js - Routes
├── thing.controller.js - Controller for our `thing` endpoint
├── thing.model.js - Database model
├── thing.socket.js - Register socket events
└── thing.spec.js - Test'use strict';
// Development specific configuration
// ==================================
module.exports = {
// MongoDB connection options
mongo: {
uri: 'mongodb://localhost/alphafullstack-dev'
},
// Seed database on startup
seedDB: true
};Now, look at server/config/environment/index.js.
// Server port
port: process.env.PORT || 9000,grunt serve
and here it is what we got, our project is running.
60 comments
I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
ReplyDeleteMean Stack Online Training
ReplyDeleteNeeded to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
Mean Stack Training in Bangalore
This comment has been removed by the author.
ReplyDeletevery useful blog to learner so happy to be part in this blog. Thank you
ReplyDeleteMEAN Stack Training
MEAN Stack Online Training
Heartful thanks for the topic you have chosen for blogging.Great to come across such an effictive contents.Good project.
ReplyDeletehonor service center near me
honor service
redmi mobile service centre in chennai
redmi note service center in chennai
Everything is fine, am happy about your blog. Thanks admin for sharing the unique content, you have done a great job I appreciate your effort and I hope you will get more positive comments from the web users.
ReplyDeleteMean Stack Development Company In India
Mean Stack Development Company In Chennai
Thank you for sharing a valuable information and nice blog
ReplyDeleteMean Stack Training
Mean Stack Online Training
I really enjoyed your blog Thanks for sharing and it was very usefully to me
ReplyDeleteFull Stack Online Training
Full Stack Training
Full Stack Training in Ameerpet
Best Full Stack Online Training in Hyderabad
Good content regarding Mean stack. Very helpful to kick-starters
ReplyDeleteMean Stack Online Training
Heartful thanks for mention those wonderful tips
ReplyDeleteMean stack online training
Mean stack training in hyderabad
The field of software development is vast and varied. A trying student, in the field of software development, must chose carefully what type of software he ought to specialize in. One of the areas of specialization, where great career opportunities exist is in MEAN Stack.
ReplyDeleteFor More Info: MEAN Stack Institute in Gurgaon
I think this is an informative and knowledgeable post. I want to thank you for your efforts to write this article.
ReplyDeleteNode JS Online training
Node JS training in Hyderabad
Excellent information and it is very helpful for those who wants to learn mean-stack.
ReplyDeleteMean stack online training
Mean stack training in hyderabad
The Full Stack Developer training program begins with Node.js and Express.js, which provide a strong foundation to understand and construct web applications with the help of JavaScript.
ReplyDeleteFor More Info: MEAN Stack Course in Gurgaon
Mean Stack Training in Noida
ReplyDeleteThank you for providing this informative post. looking forward to read more.
ReplyDeleteWeb Design and Development Company
Nice content...Intresting blog..
ReplyDeleteJava training in Chennai | Certification | Online Course Training | Java training in Bangalore | Certification | Online Course Training | Java training in Hyderabad | Certification | Online Course Training | Java training in Coimbatore | Certification | Online Course Training | Java training in Online | Certification | Online Course Training
ReplyDeleteThanks for this blog, I'am very much delighted to say that this blog has helped me a lot in gain some extra knowledge.
Oracle Training in Chennai | Certification | Online Training Course | Oracle Training in Bangalore | Certification | Online Training Course | Oracle Training in Hyderabad | Certification | Online Training Course | Oracle Training in Online | Oracle Certification Online Training Course | Hadoop Training in Chennai | Certification | Big Data Online Training Course
NIce blog keep posting more blogs
ReplyDeleteAngular course
Angular training
angular certification
angularjs online training
angularjs online course
Angular Online Training
Angularjs Online Training Hyderabad
Angularjs Online Training India
Nice post..
ReplyDeleteSAP Grc training
SAP Hana training
SAP mm training
SAP pm training
SAP PP training
Thanks for sharing this Information. Mean Stack Training in Gurgaon
ReplyDeleteIt is really a nice and useful piece of info. I'm glad that you just shared this helpful information with us. Please stay us informed like this. Thanks for sharing.
ReplyDeleteamazon web services aws training in chennai
microsoft azure training in chennai
workday training in chennai
android-training-in chennai
ios training in chennai
First You got a great blog .I will be interested in more similar topics. i see you got really very useful topics, i will be always checking your blog thank
ReplyDeleteMongoDB Training in Bangalore
Thanks for sharing amazing information.Gain the knowledge and hands-on experience
ReplyDeleteMongodb Training in Bangalore
Great Content. It will useful for knowledge seekers. Keep sharing your knowledge through this kind of article.
ReplyDeleteMean stack Classes in Chennai
React JS Training Institute in Chennai
Mean Stack Training in Noida
ReplyDeleteabinitio training
ReplyDeletespark training
scala training
azure devops training
tableau training
sap sd training
sap bw on hana training
This post is more informative. Thanks for sharing this valuable information.
ReplyDeleteManagement And Leadership Training
Managing Skills
This is really an awesome article. Thank you for sharing this.It is worth reading for everyone.
ReplyDeleteHire Angular Developer in India
Glad to find this. Your site very helpful and this post gives lots of information. Do share more updates.
ReplyDeleteApplication Areas Of Artificial Intelligence
Applications Of Artificial Intelligence In Robotics
ReplyDeleteNice to see this BLOG..keep updating More infromation Digital Lync offers one of the best Full Stack training in Hyderabad with a comprehensive course curriculum with Continuous Integration, Delivery, and Testing. Elevate your practical knowledge with quizzes, assignments, Competitions, and Hackathons to give a boost to your confidence with our hands-on Full Stack Training.
DevOps Training Institute
Python Training Institute
AWS Training Institute
Online Full Stack Developer Course Hyderabad
Python Course Hyderabad
Online AWS Training Course Hyderabad
devops training in hyderabad
angular training in hyderabad
Nice Blog , This is what I exactly Looking for , Keep sharing more blog .
ReplyDeleteDedicated AngularJS 2 developers
Mean Stack Course in Gurgaon
ReplyDeletePCB & Circuit Design Training in Gurgaon
ReplyDelete
ReplyDeleteMean Stack Institute in Gurgaon
ReplyDeleteRobotics Course in Gurgaon
CCNA Course in Gurgaon
ReplyDeleteCCNP Course in Delhi
ReplyDeleteCloud Computing Training in Gurgaon
ReplyDeleteCyber Security Training Course in Gurgaon
ReplyDelete
ReplyDeleteHR Generalist Course in Gurgaon
ReplyDelete3D Studio Max Training Institute in Gurgaon
SAP FICO Training Course in Gurgaon
ReplyDeleteMEAN Stack Training Course in Noida
ReplyDelete
ReplyDeleteMean Stack Training in Delhi
Great Post! Thanks for sharing. Keep sharing such information.
ReplyDeleteFull Stack Training in Noida
If you have any question related to course then you can call our expert directly on 70-70-90-50-90.
Mean Stack Training in Noida
ReplyDeleteMean Stack Training Course in Noida
ReplyDeleteMean Stack Training in Noida
ReplyDeleteMEAN Stack Training in Delhi
ReplyDeletehttps://bumppy.com/tm/read-blog/46552_want-a-career-in-mean-stack-development-make-this-your-secret-weapon.html
APTRON known among the main ten MEAN Stack Training Institute in Delhi, has preparing programs for fledglings, specialists and experts. Whether you are an undergrad, IT expert or undertaking supervisor; the amazing MEAN Stack Training in Delhi offers the best preparation offices, senior MEAN Stack coaches, and adaptability plans for all modules. Likewise, the great MEAN Stack Training in Delhi is requesting an expense for understudies.
MEAN Stack course in Noida
ReplyDeletehttps://aptronsolutions.home.blog/2022/08/04/mean-stack-institute-in-noida-mean-stack-training-in-noida/
Thanks for sharing such a great information.. It is really helpful for me. I am always searching for quality content to read and finally I found it in your post. The details about the Mean Stack project using the tool are excellent. Keep it up!
ReplyDeleteHey Author This is a really very good article about Mean Stack . I am also a student Best Mean Stack Course In Kolkata. an Mean stack is an excellent career to choose. I appreciate you sharing this amazing article with us . this article was very helpful to me and also who wants to built career in this field .
ReplyDeleteHey Author This is a really good article about MERN Stack .I have just started to learn Best MERN Stack Web Development Course In Kolkata . because in nowadays an MERN Stack developer is an excellent career . I found this information to be of great value. This article has increased my knowledge even more.
ReplyDeleteThank you ...
Thanks for sharing this informative article on MEAN (MONGO DB, EXPRESS, ANGULAR, NODE) STACK : KICK START FIRST PROJECT USING GENERATOR. If you want to hire mean stack developers for your project. Please visit us.
ReplyDeleteThanks for the project. Find Nearest Metro Station on GoMetro
ReplyDeletewonderful Blog. very useful.
ReplyDeleteFull-stack course in Nagpur
At APTRON Gurgaon, we offer premier HR Generalist Institute in Gurgaon designed to equip you with the skills and knowledge needed to excel in the dynamic field of Human Resources. Our comprehensive program is tailored to meet industry standards and provide practical insights into HR management, making it the perfect choice for aspiring HR professionals.
ReplyDeleteIn today’s fast-paced tech world, the demand for skilled full-stack developers is rising. If you’re looking to boost your career in web development, enrolling in a MEAN Stack course is an excellent decision. APTRON Gurgaon, a leading training institute, offers a comprehensive Mean Stack Course in Gurgaon designed to equip students with the knowledge and hands-on skills required to excel in full-stack development.
ReplyDeleteAre you looking to build a successful career in full-stack web development? APTRON Solutions offers a comprehensive Mean Stack Training Course in Gurgaon , designed to equip aspiring developers with the latest industry skills. Our course covers every aspect of the MEAN (MongoDB, Express.js, Angular, Node.js) stack, providing hands-on training and real-world project experience to help you become job-ready.
ReplyDelete