Meteor

To create a Meteor project from a boilerplate template

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The Create 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 (see 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.

To create an empty WebStorm project

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The Create 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.

To 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.

To check out the application sources from your version control

1. Click Get from VCS on the Welcome screen or select VCS | Get from Version Control from the main menu.

2. In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.

To configure Meteor support in an existing project

1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and 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 details, see 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/Preferences dialog Ctrl+Alt+S, go to Languages and 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.

To 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, see Meteor Cordova Phonegap Integration for details.

To 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.

To create a Meteor run configuration

1. On the main menu, go to Run | Edit Configurations, click and select Meteor from the list. The Run/Debug Configuration: Meteor opens.

2. In the Configuration tab, specify the path to the Meteor executable file according to the installation (see 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.

To run a Meteor application

1. Select the newly created run configuration from the list on the main toolbar and click next to the list.

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.

To debug a Meteor application

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.