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:

Develop with pleasure!
JetBrains WebStorm Team

This entry was posted in Cool Feature, Screencast and tagged , , . Bookmark the permalink.

29 Responses to MEAN Stack Walkthrough and Tips

  1. Sergey says:

    Very useful, thanks

  2. Anton says:

    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.

    • w00dstok says:

      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. Anton says:

    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. Julian Sinai says:

    Excellent tutorial by John, as usual!

  5. David Sells says:

    Enjoyed the tutorial.

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



    extended: true

  6. Liron Keren says:

    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. MikeD says:

    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. MikeD says:

    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 says:

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

      • MikeD says:

        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. chan says:

    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.


    • Mike says:

      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. Kzai says:

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

    • Ekaterina Prigara says:

      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. chris says:

    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?

  12. Medet says:

    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 says:

      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. Merhawi Fissehaye says:

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

  14. Madrus says:

    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. Bruno Oliveira says:

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

  16. Bruno Oliveira says:


    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 says:

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">