Tips & Tricks

MEAN Stack Walkthrough and Tips

MEAN is a full-stack web framework that consists of four very popular JavaScript-based projects: MongoDBExpressAngularJS and Node.js.

mongodb     express     angularjs    nodejs (1)

This screencast shows how you can work with this development stack in WebStorm.

WebStorm supports each of the MEAN projects with a variety of tools (including some open-source plugins) providing you with a complete experience when developing an app . Here is a list of features that could help you and links to our previous posts on them:

Happy developing!

The JetBrains WebStorm Team

Comments below can no longer be edited.

35 Responses to MEAN Stack Walkthrough and Tips

  1. Avatar

    Sergey says:

    June 18, 2014

    Very useful, thanks

  2. Avatar

    Anton says:

    June 27, 2014

    Strange behaviour of the screencastexample on Windows 7 with Webstorm 8.04 and Chrome 37.0.2062.3

    Writing to Database and Reading with http://localhost:3000 works fine.

    Opening http://localhost:63342/myfirstapp/public/index.html shows only (dot) {{}} the inputbox and the button. I can’t add a new entry and my several databaseentries are not listed in index.html. Only one row with (dot){{}}. I’m new with Webstorm and MEAN. What can I do.

    • Avatar

      w00dstok says:

      August 31, 2014

      You may have figured out your issue by now, but for anyone else who has this issue, make sure you reference your app,js file correctly. That is what was wrong with my setup.

      Once I had the correct path, everything worked.

  3. Avatar

    Anton says:

    July 2, 2014

    After deinstalling all further webstorm and chrome version and installing the current versions is debugging possible as shown in the video, but because of the new Express-Version I have “updateted” the bodyParser-part:
    app.use(bodyParser.urlencoded({extended: true}));

    Something ist still strange. I can add new Products to my mongodb, but the new entry is only shown after an manuell browser refresh.

    Trying to debug there is a different behaviour then shown in the video.

    My function: app.saveProduct = function (newProduct){… does not catch the event and so loadProducts() is not triggered.

    What is going wrong – Any idea?

  4. Avatar

    Julian Sinai says:

    July 11, 2014

    Excellent tutorial by John, as usual!

  5. Avatar

    David Sells says:

    July 17, 2014

    Enjoyed the tutorial.

    Some readers might find that the usage of BodyParser is deprecated in their environment. The solution is to replace:



    extended: true

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 18, 2014

      That’s right. Thanks for your comments.

  6. Avatar

    Liron Keren says:

    October 14, 2014

    I am trying to deploy the above sample app to Heroku but not sure how to create the package.json file. (already created the Procfile)

    Getting the following error in Heroku: Push rejected, no Cedar-supported app detected

    Did someone try to deploy to Heroku and share howto?


  7. Avatar

    MikeD says:

    October 24, 2014

    Hi, all. John, Thanks for the lesson.
    As a newbie I wish it was not as fast but instead gave more information on multiple dependencies installed on the fly and how to verify that they were installed correctly. The whole process looks like a trick of magician where you have to carefully watch the hands… 🙂
    Despite my numerous attepts to install CORS like you did in the video, I am still getting error “Cross-Origin Request Blocked: The Same Policy Origin disallows rading remote resource at http://localhost:3000/…” i.e. CORS is not being recognized by WebStorm.
    Did you see this before? What could be the reason for that?
    Thank you.

  8. Avatar

    MikeD says:

    October 27, 2014

    Hi, Ekaterina. Never mind. I found the cause.
    The path where John installed CORS is \mean-features\public\bower_components\cors
    and I have initially installed it in \mean-features\node_modules\cors. After I refactor it all works correctly.
    Which makes me ask this: isn’t the directory \node_modules is an intended location for components like CORS?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 27, 2014

      I guess that it’s better to install it using npm, as suggested on the project’s github page.

      • Avatar

        MikeD says:

        October 30, 2014

        Not sure what you mean. As John did in the video and me in my code – we both installed it by executing the same command
        $ npm install cors –save
        The difference was that I initially executed it from \node_modules directory but John did it from \public\bower_components. It would be great to understand why.

  9. Avatar

    chan says:

    October 30, 2014

    Hi, I am using windows and for a few days now have been trying to get MEAN installed and configured. I got webstorm today and could not really follow along this tutorial, I am very weak when it comes to the command prompt, maybe that is why. Regardless, any tips on how to follow along keeping in mind I am a windows user, so that when the video says “npm install….” I know what the equivalent would be for a windows user, for example? I tried that in the command prompt to no avail.

    I want to be able to set up and configure the MEAN stack to use on WebStorm and ideally Sublime text, can someone help me with that and to create a basic app? I would be willing to pay if necessary.


    • Avatar

      Mike says:

      April 8, 2015

      npm is a command that should become available in the command line after installing node.js. Node.js is a requirement for running the MEAN stack. There is no GUI for using node. If the command doesn’t work for you, then you may need to configure your path, but I don’t think I needed to.

  10. Avatar

    Kzai says:

    November 21, 2014

    At 59sec the node directory appears – this is not happening for me.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      November 21, 2014

      Modern projects have way to much dependencies now. WebStorm 9 now automatically indexes only top level node modules and doesn’t index their child dependencies, as a result index time decreases.

  11. Avatar

    chris says:

    May 14, 2015

    I’m trying to follow the walkthough, but get an error almost right away:

    /usr/local/bin/node server.js

    process.nextTick(function() { throw err; })
    Error: getaddrinfo ENOTFOUND mongodb
    at errnoException (dns.js:44:10)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:94:26)

    Process finished with exit code 1

    I thought maybe Mongo wasn’t running, but it is, and the same error appears whether it’s running or not. I also installed the Mongo plugin, thinking maybe it was required for some configuration.

    It seems like maybe I’ve configured something incorrectly, but I can’t seem to find any configuration section of this tutorial. Any suggestions?

    • Avatar

      chris says:

      May 14, 2015

      Almost forgot the source code:

      var mongoose = require(“mongoose”);

      var Product = mongoose.model(‘Product’, {name: String});

      var product = new Product({name:”Webstorm”});{
      console.log(“product save failed”);
      console.log(“product saved”);

    • Ekaterina Prigara

      Ekaterina Prigara says:

      May 18, 2015

      Please have a look at the question with the similar error message on StackOverflow:

  12. Avatar

    Medet says:

    June 3, 2015

    Is there a video with exactly MEAN.JS Stack?
    This video is not about Mean.
    1. http://localhost:63342/ is 404, although when you pass correct file http://localhost:63342/server/app/views/index.server.view.html
    2. App launches at port 3000 (defined in server.js) but too slow, you must wait 10-15 seconds to view app
    3. Cannot apply changes, when i edit some file, specially server side, cannot update `nodeserver` error “node_server: Loaded resources are up to date. Nothing to update” but indeed files are changed.
    4. there is also something behind, wstorm console ways “Debugger listening on port 50538”, when opening this page, result is Type: connect
    V8-Version: 3.28.73
    Protocol-Version: 1
    Embedding-Host: node v0.12.2
    Content-Length: 0

    Any IDEAs?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 3, 2015

      This video is about MEAN application stack – meaning that the app has AngularJS on the client side, Node.js with Express and MondoDB on the back-end. This is not based on MEAN.js project template. However, you may apply lots of the tips mentioned in this video to using WebStorm for Node.js development in general.

      1. WebStorm built-in server uses absolute paths to the files and doesn’t support redirects to /.
      2. The run configuration just runs the Node.js process with specific params, the time it takes to see the page rendered depends on the code executed before the page is rendered.
      3. It seems that there’s some issue with the Live edit for Node.js feature when working with Express, we’ll investigate. Thanks! So far could only suggest to restart server manually.
      4. Does that happen if run the app? Please let us know if the problem persists with the Live edit disabled (Preferences | Build, Execution, Deployment | Debugger | Live edit – change to manual.

  13. Avatar

    Merhawi Fissehaye says:

    June 10, 2015

    Thanks a lot. That was really helpful. You are so fast though. I couldn’t have followed if I was a complete newbie.

  14. Avatar

    Madrus says:

    June 11, 2015

    Thanks John. You helped me to finally connect my WebStorm to my MongoDb via the MongoDb plugin. I failed because I was filling in the user and password in the connection settings screen. In the video, I saw that none was to be provided. I cleaned them out and – voila! – I got connection.

    And the rest of the tutorial is a great demo on how to begin at the beginning. Wonderful!

  15. Avatar

    Bruno Oliveira says:

    August 18, 2015

    What can be the cause of the items being inserted in duplicated inside the DB?

  16. Avatar

    Ram says:

    August 24, 2015

    Blog using MEAN Stack

  17. Avatar

    Bruno Oliveira says:

    October 2, 2015


    How can we deploy this to heroku? I have a DB hosted at MongoLabs and I have Procfile, package.json created in the root directory of the repository with npm init command and I am listening for connections on process.env.PORT. Nontheless, I still get Application error when I open the eployed version

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 2, 2015

      Sorry, I have no knowledge about app deployment on Heroku and don’t think I can help you with your question. You can try to look for some tutorials on deployment, that should be IDE-agnostic.

  18. Avatar

    Brandon T says:

    December 18, 2015

    Excellent little tutorial!

  19. Avatar

    Orlando Brown says:

    January 26, 2016

    Sorry to be a pain but this is what I find about these new ways of development, nothing is consistent about it, so much changes, that this tutorial is becomes almost useless.

    I have got a far as ( 2:24mins into the video and when I run the server.js file it fails with “Invalid command: localhost:27017/jetbrains” and spits out a heap of options. Not helpful when your simply trying to learn and follow the guide.

    I am aware that this framework is in constant change and there are new elements to it added daily, but its is disheartening for anyone wanting to learn when you cant follow guides because of it.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      January 28, 2016

      Sorry, we don’t keep our videos and blog posts up to date with the framework updates. This video was intended as a collection of tips when using WebStorm for Node.js and Angular development. Hope that it’s all good now.

  20. Avatar

    Orlando Brown says:

    January 27, 2016

    Turns out it was the Mongo Explorer Plugin.

  21. Avatar

    Jaime says:

    July 7, 2016

    Thank you for sharing this great post.
    Check this one as well…
    “AngularJS – When JavaScript Met MVC”

  22. Avatar

    nxsearch says:

    April 21, 2017

    Its really very helpfull..I am working on MEAN stack project and its help me.