Meteor

1. Make sure you have Node.js on your computer.

2. Install and enable the Meteor plugin on the Settings | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains Marketplace.

3. Make sure the Handlebars/Mustache plugin is enabled in the settings. Press Ctrl+Alt+S to open settings and then select Plugins. Click the Installed tab. In the search field, type Handlebars/Mustache. For more information about plugins, refer to Managing plugins.

Create a Meteor project from a boilerplate template

1. Click New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Meteor.

3. In the right-hand pane:

   1. Specify The path to the folder where the project-related files will be stored.

   2. Specify the location of the Meteor executable file (refer to Installing Meteor).

   3. From the Template list, choose the sample to generate. To have a basic project structure generated, choose the Default option.

   4. In the Filename field, type the name for the mutually related .js, .html, and .css files that will be generated. The field is available only if the Default sample type is selected from the Template drop-dow list.

Create an empty WebStorm project

1. Click New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

Open the application sources that are already on your machine

• Click Open on the Welcome screen or select File | Open from the main menu. In the dialog that opens, select the folder where your sources are stored.

Check out the application sources from your version control

1. Click Clone Repository on the Welcome screen.

   Alternatively, select File | New | Project from Version Control or Git | Clone or VCS | Get from Version Control from the main menu.

   Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce.

2. In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. For more information, refer to Check out a project (clone).

Configure Meteor support in an existing project

1. In the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | JavaScript | Meteor. The Meteor page opens.

2. Specify the path to the Meteor executable file. If you followed the standard installation procedure, WebStorm detects the file automatically.

3. To involve the .meteor/local folder and its contents in indexing, clear the Automatically exclude ".meteor/local" directory on open project checkbox. For more information, refer to Hiding excluded files below.

4. Make sure the Automatically import Meteor packages as external library checkbox is selected.

   • When the checkbox is selected, WebStorm automatically imports the external packages from the meteor/packages file. As a result, WebStorm provides full range coding assistance: resolves references to Meteor built-in functions, for example, check(true), and to functions from third-party packages, provides proper syntax and error highlighting, supports debugging with source maps, and so on.

   • When this checkbox is cleared, WebStorm does not automatically import the external packages from the meteor/packages file. As a result no coding assistance is provided. To improve the situation, open the meteor/packages file in the editor and click the Import packages as library link or run the meteor --update command.

5. Make sure WebStorm has attached the Meteor library to the project.

   1. In the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | JavaScript | Libraries.

   2. On the Settings: JavaScript Libraries page that opens, make sure the checkbox next to the Meteor project library in the Libraries list is selected.

Download additional Meteor packages

1. Open the .meteor/local/packages file in the editor.

2. Click the Import Meteor Packages link in the upper right-hand corner of the screen.

3. In the dialog that opens, specify the packages to download depending on the type of the application you are going to develop in your project.

   • Client

   • Server

   • Cordova: select this option to import the packages that support development of Meteor applications for iOS and Android For more information, refer to Meteor Cordova Phonegap Integration.

Hide the .meteor/local folder

• Click the button on the toolbar of the Project tool window and remove a tick next to the Show Excluded Files option.

Create a Meteor run configuration

1. Select Edit Configurations from the Run/Debug Configurations widget on the toolbar, click the Add New Configuration button () and select Meteor from the list to open the configuration settings.

   

2. In the Configuration tab, specify the path to the Meteor executable file according to the installation (refer to Installing Meteor).

3. Specify the folder under which the application files to run are stored. This folder must have a .meteor subfolder in the root so WebStorm recognizes your application as a Meteor project.

   By default, the working directory is the project root folder.

Optionally

1. In the Program Arguments field, specify the command-line additional parameters to be passed to the executable file on start up, if applicable. These can be, for example, --dev, --test, or --prod to indicate the environment in which the application is running (development, test, or production environments) so different resources are loaded on start up.

2. By default, WebStorm shows the application output in the Run tool window. To view the results of the client-side code execution, in the Browser / Live Edit tab select the After Launch checkbox and choose the browser to open from the list. In the field below, specify the URL address to open the application at. The default value is http://localhost:3000.

Run a Meteor application

1. Create a run/debug configuration as described above or modify an existing one and click Run in the dialog.

   Alternatively, select the newly created run configuration from the list on the main toolbar and click .

2. View the application output in the Run tool window or in the browser if you configured the browser to open on application start as described above.

1. Set the breakpoints in the code where necessary.

2. Create a Meteor run/debug configuration as described above. In the Browse / Live Edit tab, select the After launch checkbox, choose Chrome from the list, and select the with JavaScript debugger checkbox.

3. To initiate a debugging session, select the required debug configuration from the list on the main toolbar and click next to the list or select Run | Debug <configuration name> from the main menu.

   The Debug tool window opens showing two tabs: one for debugging the server-side code marked with and the other one for debugging the client-side code marked with .

4. Explore the suspended program and step through the program.

5. Optionally, preview the changes to the application on the fly as described below.