MEAN2 getting started

Mean Documentation - Chapter 1

After the installation of the MEAN as shown in the official documentation (https://github.com/linnovate/mean/blob/master/README.md) , most people have the question of understanding the behaviour and how to configure the MEAN stack according to their needs. Since new MEAN uses many modern and advanced technologies to ensure a smooth and reliable infrastructure, sometimes it’s hard to understand for some users.

First of all, let’s have a look at what are the new technologies and how they help to improve new MEAN as a framework.

GraphQL (http://graphql.org/) and Apollo (https://github.com/apollographql/apollo-client)

GraphQL is a query language and we can use this to get a good understand of our data layer and ease of access the data layer in our application. Main function is when we are using this with new MEAN , we can use our application as a REST API. No need to configure many other third party applications and tools for building a REST layer.

Apollo is a caching GraphQL client with integrations for React, Angular and many other front end frameworks. This tool make it easy to access GraphQL server and fetch data to UI layer.

Example : When user need to send a new post, user need to fill the content and press “Save” button. When that function invokes, that request is going via Apollo client to the GraphQL server.

• Apollo Angular : https://www.apollographql.com/docs/angular/
• Apollo React : https://www.apollographql.com/docs/react/

Bit (https://bitsrc.io/)

Bit is a new tool for continuous working with tools like git, npm and yarn. Imagine when you are working with git for version control of your application, and npm for package management, you need to maintain those 2 separately. But when you are using bit, no need to worry about manually management of those. You only need to worry about bit and it will do all for you. Some of main functionalities of Bit are :

• Share individual components quickly to curated and dynamic collections, without changing your source-code and from any path in your repository.
• Keep a single source of truth for components, while developing or sourcing components in any repository.
• Consume components with NPM, Yarn or any other package manager.
• Easily make vast changes across projects and components, and gain full control over your dependency graph.

Apart from these technologies, new MEAN uses following technologies as well.

1. Mongoose
2. Bootstrap
3. Karma
4. Protractor
5. Jasmine
6. Istanbul
7. TypeScript
8. Webpack

Now let’s check how to configure MEAN application layer according to your requirements. Many users have a problem with configuring their local MongoDB instance with MEAN application. Sometimes die to old versions of MongoDB or some minor issues with local instance. So there’s a easy fix to check the issue and work MEAN to run without errors.

How to change MongoDB instance in MEAN application.

If you are getting any kind of error from local MongoDB connection or if it’s hard to install MongoDB locally, you can try a cloud based MongoDB instance. You can get a free instance from mLab. (https://mlab.com/). After creating a free account, create your own instance and all you need to do is open server-start.js and update the process.env.MONGO_HOST as follows :

process.env.MONGO_HOST='mongodb://<dbuser>:<dbpassword>@ds135574.mlab.com:35574/new-mean'
process.env.MONGO_PORT='27017'

And also don’t forget to change the port too. Replace : with your own credentials. This is a good alternative for development and testing of your new MEAN application.

How to add a new View in MEAN application.

After we run the application, we can see there are some views to add and view posts which are added by MEAN developers by default. You can get a good understanding how to add a new page and configure it by looking at the file structure and how these files are called via the application. Let’s have a look at how to add a new page.

Let’s imagine you need to create a new view named New-post. So you have to create a whole new component for this. So we need to create a new view and controller as we do in Angular2. So let’s have a look at ‘new-post’ component.

• New-post.component.html - view.
• New-post.component.ts - class.

Inside the New-post.component.ts class, you have to define the templateUrl. Template URL means the view file of whole component. And also inside this class, you can add all the objects and functions you need. Basically all the logics regarding to this new view.

@Component({
selector: 'new-post',
templateUrl: './new-post.component.html',
styleUrls: ['./new-post.component.scss']
})
export class NewPostComponent {
constructor(
  formBuilder: FormBuilder,
)
public save() {
}
}

Now this is a unique component and you can use this anywhere in the project. Use following command to import this :

import { NewPostComponent } from './new-post/new-post.component';

After creating the controller for view, we need to create a new service for new component in order to featch data. In the mean repository, you can see `posts.service.ts’ file. As we discussed earlier, we have to import that file too…

import { PostsService } from '../posts.service';

-----to be continued-----