WebStorm 4.0: HTML5 Boilerplate and Other Web Application Templates

Sergey Simonchik

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.

Comments below can no longer be edited.

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

  1. Orillian says:

    April 17, 2012

    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.

    O.

  2. dan says:

    April 17, 2012

    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:

      April 18, 2012

      @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:

        April 18, 2012

        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!

        O.

  3. Stan says:

    April 18, 2012

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

  4. Jeff says:

    April 18, 2012

    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:

    April 19, 2012

    WOW! Nice work guys. This is a victory 🙂

  6. denswor says:

    April 19, 2012

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

    • Sergey Simonchik says:

      April 19, 2012

      It should work with java1.7.
      Please file an issue in the in the issue tracker.
      Thanks!

  7. Nogod says:

    April 22, 2012

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

  8. George says:

    May 24, 2012

    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:

    June 8, 2012

    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:

    June 8, 2012

    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:

    June 12, 2012

    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:

    June 13, 2012

    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:

    July 9, 2012

    Thank you so much for this very helpful post 🙂