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.

7 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) {{product.name}} 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){{product.name}}. 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}));
    app.use(bodyParser.json());

    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:

    app.user(bodyParser());

    with:

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
    extended: true
    }));

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