WebStorm 4.0: HTML5 Boilerplate and other Web Application Templates

When you’re creating a new project, it makes sense to begin with an appropriate starting template. WebStorm offers some well-known project templates to use depending on your needs:

These generators are available via File | New Project…

Client-side project templates

Project templates based on HTML5 Boilerplate, Twitter Bootstrap and Kickstrap share the same idea, so let’s go through one of them. Select HTML5 Boilerplate and click OK.

Now select a version:

After you click Create, an archive will be downloaded locally and unpacked to the specified project location. Then you can immediately start working on the project.

Server-side project template

Select Node.js Express App as Project type in the ‘Create New Project’ dialog. You’ll be asked about Express project options:

After you click OK, the express module will be installed to the specified directory together with the needed dependencies. In terminal it’s equivalent to the following commands:

my-project$ npm install express
my-project$ ./node_modules/express/bin/express -t jade
my-project$ npm install

That is it!

Develop with pleasure!

Download WebStorm for your platform from this project EAP page.
We’d appeciate to hear responses from you in our issue tracker.

This entry was posted in Cool Feature and tagged , , , , . Bookmark the permalink.

17 Responses to WebStorm 4.0: HTML5 Boilerplate and other Web Application Templates

  1. Orillian says:

    Are these features coming to PhpStorm?

    If not I think you should look at splitting the two into unique product listings. It’s getting confusing lately to get updates to the blog and it’s all about WebStorm only features.


  2. dan says:

    I personally would love to see these front-end features in PhpStorm. It seems silly to have to buy and use both products to gain access to all the different features!

    • Sergey Simonchik says:

      @Orillian, @dan: It’s possible to enable these features in PhpStorm by installing Node.js plugin from the Plugin Repository (open Setting | Plugins, then click “Browse repositories…”).

      • Orillian says:

        Could the updates that are Focusing on WebStorm have a quick note attached at the bottom for cases like this. Having your reply as a quick “For PhpStorm Users” at the bottom would have prevented the confusion!

        Thanks for the response though!


  3. Stan says:

    According to the phpStorm product page, phpStorm includes all the functionality of webStorm. I hope the won’t change this.

  4. Jeff says:

    I just installed the node.js plugin from the plugins section in PHPStorm and it includes all features mentioned here from what I see.

    Nice work guys.

  5. Vasiliy says:

    WOW! Nice work guys. This is a victory :)

  6. denswor says:

    doesn’t work without java 1.6.
    is there any solutions?

  7. Nogod says:

    Seriously? Express.js project with jade but there is no jade templates support? Am I missing something?

  8. George says:

    I was very pleased to see this because i thought there would be support for jade and stylus. And when i created a new express project i was really surprised to see that web storm doesn’t even support jade or stylus!! Is this a joke? How can you make add this feature when web storm doesn’t even support it. Or maybe its supported?? I can’t find it though!

  9. Andrew S. says:

    Is creating/defining project templates coming? For instance, I have a script that generates a directory structure, populates certain files, and creates a local nginx configuration based on the type of project that I’m doing. It would be nice to have this integrated into the IDE.

  10. Sergey Simonchik says:

    It’s possible to create a custom plugin for WebStorm http://confluence.jetbrains.net/display/IDEADEV/PluginDevelopment .
    Language: Java.
    See com.intellij.platform.WebProjectGenerator extension point.

  11. dontrackme says:

    Most of the node.js applications involve both client side and server side. I guess that means I will have to create separate projects for client and server side. Does webstorm have a feature like “Solution” in Visual studio where I can add/manage multiple projects in it?

  12. Sergey Simonchik says:

    Possible solutions are:
    * place client side code and server side code in different directories under the project root;
    * if you have client side code and server side code in two separate directories, then it’s possible to add them as Content Roots to the project. http://www.jetbrains.com/webstorm/webhelp/configuring-content-roots.html

  13. Mike C says:

    Thank you so much for this very helpful post :-)

Leave a Reply

Your email address will not be published. Required fields are marked *