The MEAN stack blog

Getting Started with MEAN.io v2

MEAN.io started out as a combination of MongoDB, ExpressJS, AngularJS, and Node.js. With the release of MEAN.io v2 we provide you with the ability to mix and match additional front-end frameworks, databases and technologies. In our development of version 2, we aimed to create a robust, flexible and scalable full-stack Javascript solution.

We created this tutorial to guide you through the process of installing of the MEAN.io v2 framework and it’s prerequisites on various different platforms.

What You will Need to Install MEAN.io v2

In order to explore the new features of MEAN.io v2 you will need to install the MEAN.io framework in your local environment. Before you install MEAN.io you will need to install the following software.

  1. Node.js
  2. MongoDB
  3. Git
  4. npm

Install Node.js in Your Local Environment

MEAN.io v2 requires a version of Node.js higher than 6.x as well as a version of npm higher than 3.x.

Installing Node.js on Linux and OSX

You can download Node.js from the official web site. But in order to manage multiple versions of Node, it’s better to install Node.js via the Node Version Manager (NVM) which you can find in nvm’s github repo. Follow the steps in the nvm repo README to install Node.js on your local system. Make your you install a version of Node.js which is greater than 6.x. Installing this Node.js in this way will automatically install npm version 3.x as well.

Installing Node.js on Windows

Windows users may also install Node.js via a version of NVM. Although it is not exactly the same tool as used in Linux, it fulfills the same task.

To download the version of NVM for windows, visit the nvm-windows github repo and follow the steps in the README.

Emulated Linux Terminal on Windows

To gain access to a emulated Linux terminal on Windows, Windows users can use the cmder terminal emulator for a better experience with Node.js.

How to use NVM to install Node.js

No matter which platform you are using, you can always use NVM in the same way. In this section we will show you how to install Node.js using NVM.

After installing NVM, enter the command ‘nvm’ into your terminal. If NVM is not installed, you will receive the ‘command not found’ error message. Otherwise, you will see some instructions and commands that you can use with NVM.

After you have confirmed that NVM is installed in your system, you can use the following command to check the versions of Node.js which are currently installed in your system.

nvm list

In order to use version 2 of MEAN.io, we recommend that you install a 6.x version of Node.js. So, for example if the most recent version of Node.js available was 6.11.4, you would use this command to install Node.js 6.11.4.

nvm install 6.11.4

If you use ‘nvm install node’ it will install the latest stable version of Node.js. But for the MEAN2 , we reccomond Node 6.x version.

After the installation of Node, you have to use following code to use installed version of Node 6.11.4

nvm use 6.11.4

Installing MongoDB in Linux (Ubuntu 16)

There are few ways to install MongoDB on Linux (Ubuntu). In this tutorial i’m going to use the most official and easiest way to do it.First we need to import GPG keys for the official MongoDB repository. Use following command to do it. You need to use ‘sudo’. It’s mandetory.

sudo apt-key adv –keyserver hkp://keyserver.ubuntu.com:80 –recv EA312927

Then we have to add MongoDB repository details to our system. Then the system know exactly where to download them.

echo “deb http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.2 multiverse” | sudo tee /etc/apt/sources.list.d/mongodb-org-3.2.list

After adding these details, you need to update the package list in order to update system with new repositories.

sudo apt-get update

Now we can install the MongoDB package itself.

sudo apt-get install -y mongodb-org

We need to add MongoDB as a service in Ubuntu. So you have to use following instructions properly.

sudo nano /etc/systemd/system/mongodb.service

Now you need to paste following instructions to this file, save it and close it.

[Unit]
Description=High-performance, schema-free document-oriented database
After=network.target

[Service]
User=mongodb
ExecStart=/usr/bin/mongod –quiet –config /etc/mongod.conf

[Install]
WantedBy=multi-user.target

Now you have to start the MongoDB instance

sudo systemctl start mongodb

This command doesn’t give you any output. So you can check the status using following command.

sudo systemctl status mongodb

To start MongoDB on system boot, you have to use following command.

sudo systemctl enable mongodb

Installing MEAN on Linux/Mac OS

After installing Node in your local system, you need to install MEAN from github. In order to clone official git repository, you need to have Git installed too. (https://git-scm.com/downloads). For the database configuration, you need to have MongoDB installed in your local system. (https://www.mongodb.com/) After your development environment is fixed , you are ready to install MEAN.

First clone the repository from github.When you are clonning the repo, you have to take master branch. That is the branch which is clonning automatically when you are running following code.

git clone –depth 1 https://github.com/linnovate/mean.git

Then you need to go to clonned repository using

cd mean

Now you have latest version of MEAN. Now it’s time to install all the dependencies.

npm install

After the installation done, you can see your node_modules folder and complete message at the end of the terminal. If you have any errors, you can refer following links to get an idea about basic Node and NPM issues.

https://docs.npmjs.com/troubleshooting/common-errors

https://github.com/shutterstock/node-common-errors

Now all you need to do is run the project using

npm start

If all your system configuration and other tools (including MongoDB and other global npm packages) are in order, the application will open using :

http://localhost:3000

Possible issues when trying to run the application

1. MongoDB issues

MEAN stack is well tested and developed by the team. But it’s also depend by many other third part tools. So there can be some issues according to which version of tools you have in your local system.

As an example, many users faced some issues when application is trying to make connection with MongoDB. It can be a issue with local mongoDB system. Or other GraphQL version or any other tool which required to access database.

If you are having any issues with MongoDB , you need to check weather it’s happening because of Database or MEAN dependency issue. Best way to check that issue is using a hosted MogoDB instance.

https://mlab.com

You can create a free MongoDB instace using this site. Then all you have to do is give the lates MongoDB credentials to your application. In the project root folder structure, you can find “server-start.js” file. All you have to do is change a one line like this.

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

All you need to do is, create a database instance named “new-mean” in your free mLab account and then you can see connection link when you enter the instance in mLab account. Replace <user> and <password> with your details.

When you are running the application with mLab dabatase credentials and if it’s running without errors, you can debug your local MongoDB instance. There is an issue with it. If you are getting same error again, then issue is with MEAN dependencies. So you better open a new issue in MEAN repository.

https://github.com/linnovate/mean/issues

If you can run the application without any issues, you can get the following output. MEAN will open your default web browser and you can see this :

mean home page

After installation, you can get MongoDB error if versions and dependencies are not compatible, so if there are any, the best way is try to debug MongoDB and MEAN by seperating them as I have shown above.

Installing MEAN on Windows

Installing MEAN on Windows is moslty same as installing on Linux. But need to have some extra configuration first. You need to make sure following tools intalled properly.

  1. Git
  2. MongoDB
  3. Python (Make sure you have Python 2.x , NOT 3.x versions)

When using MEAN on Windows, you need Python to build the application. Otherwise you will get errors. After installing all above, you need to run these commands. When you are clonning the repo, you have to take master branch. That is the branch which is clonning automatically when you are running following code.

git clone –depth 1 https://github.com/linnovate/mean.git
cd mean
npm install

Possible issues when trying to run the application

1. Shasum Check Failed issue

This is a common issue when we are installing npm packages. This happenes when some package versions mis match or some dependency issues.

There is a quick fix for this issue. You can see it tried to install one dependency file and it’s not installing automatically. All you have to do is take that link and manually install. In this case, it’s like this.

npm install https://registry.npmjs.org/@angular/common/-/common.4.3.6.tgz

Then you have to run

npm clean cache

And then you can continue

npm install

Now npm install process will continue without any issues regarding to this file.

2. Can’t find Python issue

When installing MEAN on Windows , you need to have python installed in your local system. Python is required to the build process of MEAN. And also make sure you have Python 1.x or Python 2.x versions installed in your system. Most of the times, Python 3.x version gives an error because MEAN is looking for Python or Python2.

 

 

The new mean

Hello everyone,

Over the past 3 years this framework had many fans and have past several iterations and evolutions.
Yet as core developers joined and left the basics of the frameowrk did not change – Mongo, Express, Angular-1.x and Node.

As the tech world wizzed on this made mean somewhat old, not interesting and not even our choice for a new projects.
The main reason I think that the old version of mean (and mean.js and even meteor) can not be a serious framework for a startup that needs scale is because all these frameworks are essentially vertical monlithes.

This initially was the whole idea – a full stack framework that would provide a simple, one stop shop to provide all of your js goodness in one place. This made mean a great place to practice and learn about node, express and mongo and dive in to the world of angular but as people started to dive deeper they wanted choice.

A choice to use different dbs, node frameworks and frontend frameworks.
This was complex because everything was tightly coupled in to our meanio npm package.

As we experienced with more and more technology the new architecture started to emerge where there where 3 major parts involved.

  1. Angular – We did not update mean since angular-1.6 and obviously to be a rellevent platform we needed to upgrade – currently the platform is based on angular 4.
  2. GraphQL – We found the graphQL frees us to pick, choose and utilize different microservices and thus different db’s, application frameworks or even runtimes (time to learn GO 🙂 ).
    We created a project called innograph that will become a graphQL schema library helping reuse schemas and derived standardized web components.
  3. Bit – All of these layers of abstractions, schemas, components and microservices create tons of additional complexity – thats why we ditched the meanio (kernel) and have chose bit to manage the components and their dependencies.

I hope I can dive in to each of these technologies in depth soon.
So currently the master branch provides all of the above while the old mean can be found in the 1.x branch.
what you can expect from the new mean is…

  1. It’s much less evolved then it used to be
  2. It’s not production ready yet
  3. It utilized several untested (yet promising) ideas
  4. It’s totally undocumented currently

I’m essentially stepping a few steps back to have you join me and rebuild this community and this framework.

Feel free to join me in the meaningful journey!

0.6.1 released

After many months of work I’m glad to announce that we’ve released the first version of the 0.6.x branch! The process for 0.6 was not trivial – because there where few ideas we wanted to explore and change in the way meanio works. We started a process strongly led by the amazing team from autodesk – Jhon Webb, Christopher Lowenthal, David Cook and Tim Elfelt which has been super active lately. The team above have done most of the work and even more importantly have been the core of the more seasoned developers providing leadership and support in the gitter channel The first phase was to create our vision for the 1.0 release with the clear understanding the 0.6.x is the candidate branch for 1.0. The basic aspects we wanted to address where

  1. Change package repository from git.mean.io to npm
  2. mean-cli cleanups
  3. Remove aggregation
  4. Add webpack based aggregation instead

We did not complete everything we wrote down to do in the document but today we made a major step forward releasing 0.6.1. Its far from perfect but it’s starting to resemble the basic structure we are invisioning for the 1.0 release Stay Tuned!

passing a configuration variable to a swig based server views

Overview

VikramTiwari a seasoned mean.io user is working on a material design package for mean.

Just like you can choose between coke or pepsi or between pizzahut or dominos It would sure be cool if we could choose our preffered css framework.

Currently bootstrap is hardcoded all over the place and in PR 1290 he wanted to move the hardcoding in to the aggregation, emps (another experienced mean developer) mentioned that having bootstrap available early on (before all of the aggregated css/js is loaded) will let us display the basics (layout/fonts) before aggregation is loaded and the rest cones in to place.

To achive this I need to “Ask” in the packages/core/system/server/views/incules/head.html what is the prefered cssFramework and to display the correct css in the head based on that configuration.

config to server view

So now I need to define a configuration value called cssFramework and to somehow get it to my serverside express routes I did this in a commit today and wanted to share…

  1. Define the value in configuration – I chose to put it in config/env/all.js because this value will probably be valid across all enfironments.
  2. Pass System to the rendered view in packages/core/system/server/routes.js
  3. Changed the controllers code to be able to accept a paramater (in this case it’s the config).
  4. Use the variable in your view (in this case just a comment).

Hope this helps people that want to use server side variables and configuration…

0.5.5 – hamsa/hamsa/hamsa

“Hamsa” is a word in hebrew and arabic meaning the number 5 – it also is a palm-shaped amulet which is supposed to bring good luck. I think that 0.5.5 (and the whole 0.5.x branch) is a good candidate to brings lots of luck to your new (and existing) mean project.

0.5 was released on may 14th and is the first time we added new functionality to mean.io since packages where released in the 0.4 version. 0.5.5 is another step in that direction and introduces the idea of circles and an implementation of the roles system with them.

A circle is something you can be part of. very much like google plus circles. My father can be in my “family circle” while my blog post can be in the “tech-ramblings circle” – different objects can be associated with different circles. If we look at the roles based implementation we use the circles to represent the current roles a user has so all users get associated with the anonymous circle, but once you are registered you have 2 roles (authenticated and anonymous). Note that circles are heirachical and can contain each others so basically being associated with the “authenticated” circle will make you associated with the “anonymous” circle as well.

I know this is abstract and we might want to designate a whole post to circles and permissions but thats the big news for 0.5.5.

Whats next?

We’re working towards the 1.0 release – let me give you a quick peak into the roadmap ahead…

  • 0.5.6 – menu package, administration fixes
  • 0.6.7 – coding style,minor improvements, testing fixes
  • 1.0rc1 – Dependency injection review, Stability, Test coverage

@brockmckean started a set of wiki pages for brainstorming towards the rc1 release so stay in the loop and feel free to contribute…

0.5 coming…

We’re working on the 0.5 merges and this is going to be a very exciting release and the last one before 1.0! This is the first time we’re adding new functionality and features in almost a year. The highlights will be

  1. Clean URL’s (html5 push state support).
  2. Angular seo support.
  3. swagger support (express api endpoints browsing and interaction).
  4. jwt web token support
  5. Move mean-admin in to core
  6. Build in deeper (optional) connections to the mean network

These are exciting times and as 0.5 stabilises it will become the release candidate for the 1.0 release. I’m eager to start working on the 2.x branch which will work with angular-2 and es6, feel free to jump in and test, brainstorm and effect the direction the project is going… See you in the discussions at http://gitter.im/linnovate/mean

Welcome to the mean network

I want to invite you to join – http://network.mean.io

When we created the mean packages support (a year ago!) we wanted to create a rich package ecosystem with people reusing packages and contributing like many other open source frameworks (rails, Drupal, Symfony etc..) Looking back – that didn’t really work out…

When looking at what actually happened community members like the guys from qed42 or Almog Baku tried to use the system but we quickly understood we need the ability to manage the packages, to understand their usage statistics, to see issues and PRS.

An important thing to understand is that any package published gets pushed to our git repository in http://git.mean.io This is an instance of gitlab a great open-source project which lets you do whatever you can do with github.

Package Lifecycle

Lets overview a package’s lifecycle so we can understand how this works…
When you build a mean app you think about the features you want to introduce and create or reuse packages that deliver that functionality.
Lets overview the system…

Package creation

To create your own package run

$ mean package myPackage

This will scaffold a custom package under packages/custom/myPackage

Package publication

Once you are happy with the package and might want to share it with other people you can publish it using the next series of commands – First register/login in to the system

$ mean register 

This will create a user in the mean network (we’ll refer to it in myUserName) To publish the package run –

$ cd packages/custom/myPackage
$ mean publish

The result will be uploaded to http://git.mean.io/myUserName/myPackage You should be able to login in to the gitlab using the credentials you registered with within the gitlab you can open issues , accept merge requests add collaborators…

Package maintenance

Once we created a package you can see and manage packages by logging in to http://network.mean.io (early alpha) you’ll be able to look at your package see graphs of packages and have quick access to different aspects of you packages.

Screen Shot 2015-04-21 at 5.46.48 PM

Clicking on each package you can see all of the data in the package page…

Screen Shot 2015-04-21 at 5.59.47 PM

I invite you all to join the mean network and to manage your contributions there Meet you in http://network.mean.io !

0.4.4 and Milos, the support hero

Hello Hello,
I just tagged 0.4.4 yesterday which mainly was focusing on one task runner (gulp), simplifying the installation process and pushing out some bugfixes and stability after the larger more massive changes in 0.4.3 which where mostly under the hood (with big changes and refactoring to the meanio package – the “kernel” of mean).
One of the community members I’d love to spotlight (and give the prestegious ninja of the month -Feb/March award) is Miloš Stanić, which has been building http://mcalc.net.
He started participating in some of the project leadership talks we had but has basically been one of the most helpful and persistent people supporting others in the gitter, our community will grow because of people like Milos which are there to help newcomers but also to extend and forward the framework with work he’s submitted regarding the refactor of the user authentication to work with jwt and his very nice implementation of angular-material in mcalc.net
Milos – thanks for helping lead this community – I owe you a T-shirt (will create a new batch soon).

Ninja(s) of the month(es) – Dec/Jan 2015

Well the community has gone a long ways in the past couple of monthes. We have agreed upon a clear roadmap we have routine recorded meetings which are summarized in the wiki in the Meetings page. The gitter is busy we people collaborating, joking around and supporting each other… In this activity there are two people I wish to thank and commedate which have been true MEANingfull ninjas.

Brock Mckean

Brock started hanging out in the some of the meetings we’ve had but has slowly become the gitter guardian – helping out and supporting on the “quieter” US timezone, as time goes by he’s more and more active with more and more contributions – namely helping test the ng branch and get ready for mean-0.4.3 – rock on!

Almog Baku

Boy Wonder, The JS Kid 🙂 , Almog has been super active helping us with security bugs, breaking apart and putting together the whole way grunt works and giving the ability to inject grunt tasks from packages and contributing the mean-compass package (and helping me change mean-cli to work with packages in github or other remotes). Almog was crucial helping team meanio (and thneura) win second prize in an IOT hackathon and is simply fun to argue with and imagine the MEANingful future with. Good Job Man!

How 24hrs without the ability to install mean can be a good thing.

Obviously it’s not. But sometimes when things break you gain the clarity of what needs fixin… Issue 978 was submitted 19 hr and we started getting notifications in our (awesome) gitter support and chat channel that people are having a problem installing mean.

Its frustrating, we just launched 0.4.2 to deliver more stability – no code changed but still something breaks. Only today – after multiple people had problems with their initial experience with mean – I was able to recreate the bug. What happened is that the assetmanager module (one of mean’s dependencies) issued a release that somehow broke the aggregation of the core dependencies and as a result angular was not loading (and everything was breaking).

This bug is part of a pattern that has to do with “loose dependencies” – you can see in the change I did to package.json that the requirement was for “assetmanager”: “^1.1.1”, The ^ is a “caret range” which means that we where allowing (and trusting) assetmanager if they release a minor version.

This happened about a week ago with inquirer (which powered the cli interaction) and it’s dependency rx and is also a recurring type of bugs that do not help the stability.

The way we take these last 24 hrs and convert them to something good is start to enforce the next 3 decisions which will make much more stabler…

  1. Hardcode versions and remove caret ranges(^) and tilde ranges(~).
  2. Change mean init to clone a tag – essentially cloning the last stable release (0.4.2 today).
  3. Invest in core testing and increase coverage and type of testing to find these occurrences.

The mean stack stability is crucial as people join our community – The amazing work invested in the 0.5 release will result a faster, stabler and more robust platform and bugs and problems will always happen – the idea is to learn the right lessons and to try not to do the same mistakes again.