See Also

This feature is only supported in the Ultimate edition.

IntelliJ IDEA provides integration with the Meteor framework. Meteor support in IntelliJ IDEA involves:

  • Automatic recognition of Meteor projects by detecting the .meteor folder and excluding the .meteor/local folder from project. See Hiding excluded files for details.
  • Attaching the predefined Meteor library to the project automatically. This enables syntax highlighting, resolving references, and code completion.
  • Support of Spacebars via Handlebars with completion for if and each directives. IntelliJ IDEA recognizes Spacebars templates, but as a side effect marks HTML files in Meteor projects with the Handlebars/Mustache icon images/fileTypeHandlebars.png. IntelliJ IDEA provides navigation between JavaScript source code and templates with go to Declaration (Ctrl+B).
  • A dedicated complex Meteor run/debug configuration for debugging both the client-side and the server-side code within one debugging session, see Debugging a Meteor application.

Before you start

Make sure the Meteor and the Handlebars/Mustache plugins are activated. The plugins are not bundled with IntelliJ IDEA, but they can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins. Once enabled, the plugins are available at the IDE level, that is, you can use them in all your IntelliJ IDEA projects.

Installing Meteor

The installation procedure depends on the operating system you are using:

  • To install Meteor on Windows
    Download the LaunchMeteor.exe installer at the Meteor Official website.
  • To install Meteor on macOS or Linux
    Open the built-in IntelliJ IDEA Terminal (Alt+F12) and type $ curl https://install.meteor.com | /bin/sh at the command prompt.
Learn more from the Meteor Official website.

Creating a new Meteor application

If you have no application yet, you can generate a IntelliJ IDEA project with Meteor-specific structure from a Meteor boilerplate template. Alternatively, create an empty IntelliJ IDEA project and configure Meteor support in it as described in Starting with an existing Meteor application below.

To create a Meteor project from a boilerplate template

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose Meteor App and click Next.
  4. On the second page of the wizard:
    1. Specify the project name and the folder to create it in.
    2. Specify the location of the Meteor executable file (see Installing Meteor).
    3. From the Template drop-down list, choose the sample to generate. To have a basic project structure generated, choose the Default option.

To create an empty IntelliJ IDEA project

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, again choose Static Web and click Next.
  4. On the second page of the wizard, specify the project folder and name and click Finish.

Starting with an existing Meteor application

If you are going to continue developing an existing Meteor application, open it in IntelliJ IDEA, configure Meteor in it, and download the required dependencies as described in Downloading Meteor dependencies below.

If the application sources are already on your machine
Click Open on the Welcome screen or choose File | Open on the main menu. In the dialog that opens, select the folder where your sources are stored.

If the application sources are under version control

  1. Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control on the main menu.
  2. Select your version control system from the list.
  3. In the VCS-specific dialog that opens, type your credentials and 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), choose JavaScript under Languages and Frameworks, then choose Meteor. The Meteor page opens.
  2. Specify the path to the Meteor executable file. If you followed the standard installation procedure, IntelliJ IDEA 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, IntelliJ IDEA automatically imports the external packages from the meteor/packages file. As a result, IntelliJ IDEA 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, etc.
    • When this checkbox is cleared, IntelliJ IDEA 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 IntelliJ IDEA has attached the Meteor library to the project.
    In the Settings/Preferences dialog (Ctrl+Alt+S), choose JavaScript under Languages and Frameworks, then choose Libraries. On the JavaScript. Libraries page opens, make sure the checkbox next to the Meteor project library in the Libraries list is selected.

Importing Meteor packages

Besides the predefined Meteor library that ensures basic Meteor-specific coding assistance, you can download additional packages that are defined in the .meteor/local/packages file.

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 box 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: choose this option to import the packages that support development of Meteor applications for iOS and Android, see Meteor Cordova Phonegap Integration for details.

Hiding excluded files

the .meteor/local folder, which is intended for storing the built application, is automatically marked as excluded and is not involved in indexing. By default, excluded files are shown in the project tree. To hide the .meteor/local folder, click the images/icon_viewMode.png button on the toolbar of the Project tool window and remove a tick next to the Show Excluded Files option.

Running a Meteor application

IntelliJ IDEA runs Meteor applications according to a run configuration of the type Meteor. If you created your application from a boilerplate template, IntelliJ IDEA generates a Meteor run configuration for you.

To create a Meteor run configuration

  1. On the main menu, choose Run | Edit Configurations, click add.png  and choose 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 IntelliJ IDEA recognizes your application as a Meteor project. By default, the working directory is the project root folder.
Technically, IntelliJ IDEA creates separate run configurations for the server-side and the client-side code, but you specify all your settings in one dedicated Meteor run configuration.

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, IntelliJ IDEA 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 drop-down list. In the text box 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 required run configuration from the list on the main tool bar and then choose Run | Run <configuration name> on the main menu or click the Run toolbar button run.png.
  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.

Debugging a Meteor application

With IntelliJ IDEA, you can debug both the client-side and the server-side of Meteor JavaScript code within one debugging session. A debugging session is initiated only through a dedicated Meteor run configuration.

Technically, several Meteor projects that implement different applications can be combined within one single IntelliJ IDEA project. To run and debug these applications independently, create a separate run configuration for each of them with the relevant working directory. To avoid port conflicts, these run configurations should use different ports. In the Program Arguments field, specify a separate port for each run configuration in the format --port=<port_number>.

To debug a Meteor application

  1. Set the breakpoints in the code where necessary.

    The debugger also pauses at the breakpoints set in the sources stored in the /packages folder. This functionality is supported both for the client side and for the server side code.

  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 tool bar and click debug.png next to the list or choose Run | Debug <configuration name>. The Debug tool window opens showing two tabs: one for debugging the server-side code marked with images/icon_meteor.png and the other one for debugging the client-side code marked with images/icon_javascript.png.
  4. Explore the suspended program and step through the program.
  5. Optionally, preview the changes to the application on the fly as described below.

Previewing changes in the browser

During a debugging session, you can preview the changes to your HTML, CSS, or JavaScript code on the fly. The live contents of the page you edit are shown in the Elements tab of the Debug tool window. The update policy depends on which part of your application you are editing.

To preview the changes to the client-side code

  • Switch to the <Configuration name> JavaScript images/icon_javascript.png tab and click images/update_icon.png on the toolbar.
  • Alternatively, select the Enable Meteor Hot code push checkbox on the Meteor page to configure automatic upload of updates. Learn more from the Meteor Official website.

To preview the changes to the server-side code

  • Switch to the <Configuration name> images/icon_meteor.png tab and click images/update_icon.png on the toolbar.
  • Alternatively, configure automatic upload with the Live Edit functionality as described in Live Editing of HTML, CSS, and JavaScript. It is recommended that you select the Restart if hotswap fails checkbox on the Live Edit page, then IntelliJ IDEA will attempt to restart the server when automatic upload fails.

    If automatic upload still fails, restart the application by clicking images/rerun.png on the toolbar.