William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Tag Archives: WebStorm

Webstorm run/debug mean-stack

Webstorm run/debug mean-stack

I setup MEAN codes from http://www.mean.io/ in a Webstorm env.

  1. Make sure node.js, npm, bower, grunt are installed and accessible from WebStorm.
  2. Make sure Mongodb daemon is running (port: 27017)
  3. Use git gui or Webstorm -> VCS -> Version Control -> git to git mean stack from https://github.com/linnovate/mean.git
  4. Get into the new Webstorm project ‘mean’
  5. Add a new Run item ‘mean’:
    – Run -> Edit Configurations -> Add(+) -> Node.js:
    – Name: mean
    – Path to Node: C:Program Filesnodejsnode.exe
    – Working Directory: C:….WebstormProjectsmean
    – Path to Node APp JS File: C:….WebstormProjectsmeanserver.js
  6. Open the WebStorm settings(ctrl+alt+s), and then click the Command Line Tool Support.
  7. In the Command Line Tool Support page, click the Add button. Click Create Custom Tool dialog box (+).
  8. In the Tool Settings dialog box that opens, specify the following:
    — Tool name and location.
    — The alias to use in command calls instead of the full path to the tool.
    — Brief explanation of the tool functionality.
    For example, I use git bash:

    Tool Path:  "C:Program Files(x86)Gitbinsh.exe" --login -i
    Alias: git bash
    Description: debug mean project
  9. When you click OK, WebStorm brings you to the Command Line Tool Support page, where the new tool is added to the list of available tools.
  10. Choose from Tools -> External Tools -> git bash
  11. In the ‘git bash‘ command line, running:
    npm install //install modules in package.json
    bower install //install front-side angular DIs in bower.json
  12. If both the installation succeed, then:
    Run -> Run ‘mean’
  13. In browser: http://localhost:3000/

    It should work fine, a pretty cool CRUD application by using mongodb+express+angularjs+node.

  14. Debug should also work correctly. For the new added data, in ‘git bash’ command line:
    use mongo command to access MongoDB.

This is cool to run/debug mean demo in Webstorm environment.


WebStorm Live Templates – AngularJS

WebStorm Live Templates – AngularJS

The Live Templates of AngularJS in WebStorm, I list here for quick retrieving: