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.

11 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.

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="">