William Jiang

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

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: