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.

17 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
    }));

  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?

    Cheers,
    Liron

  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.

    thanks

  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.

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