Getting Started with MEAN Stack
Download as pptx, pdf0 likes56 views
The document introduces the MEAN stack, which combines MongoDB, Express.js, Angular.js, and Node.js into a full-stack web development framework. It discusses installing and setting up a MEAN.js boilerplate project, which provides a sample application with user authentication and articles features to demonstrate the modular architecture. The document also describes using the MEAN.js generator to quickly scaffold additional modules and components.
Getting Started with MEAN Stack
- 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.