WebStorm 9.0.0 Web Help

When the files to work with are already on your machine, you can set up your development environment in three main ways:

  • You do not have a Web server on your machine or you are not going to use it right now. The sources are on your machine, you just do your development, possibly using the console to view the output. In this case, you can just open the folder under which the sources are stored without configuring access to a server. However, you can also use the New Project wizard.
  • You have a Web server on your machine, the sources are under the server document root (for example, /htdocs), and you do your development right on the server. In this case, you need to use the New Project wizard to arrange the sources in a project, appoint the project root folder, and configure access to the server through a server access configuration of the type in-place.
  • The Web server is installed on your computer but the sources are stored in another folder or on a mounted drive. You do your development, then synchronize with the server. Use the New Project wizard to arrange the sources in a project, appoint the project root folder, configure access to the server through a server access configuration of the type local, and map the folders under the project root folder with folders on the server.

On this page:

Creating a project without a server by opening the folder where the sources are stored

If you are not going to use a Web server right now, you can just open the folder with the files to be arranged in a WebStorm project.

  1. On the main menu, choose File | Open Directory.
  2. In the dialog that opens, select the directory that contains the desired source code. Note that applications created externally are marked with the regular directory icon folder.png.
  3. Click OK and specify whether you want the new project to be opened in a separate window or close the current project and reuse the existing one. Refer to the section Opening Multiple Projects for details.
Creating a project around existing sources without a server using the New Project wizard

Another way to arrange the source in a WebStorm project is use the New Project wizard.

  1. To start the New Project wizard, choose New Project from Existing Files on the main menu.
  2. On the Choose Your Scenario page, choose Source files are in a local directory, no Web server is yet configured and click Next.
  3. On the Choose Project Directory page, select the folder where your sources are stored and click the icon_web_storm.png icon on the toolbar or choose Project Root on the context menu of the selection to appoint the folder project root. WebStorm marks the selected folder with the icon_web_storm.png icon.
  4. Configure the folders under the project root. Alternatively, you can do it later on the Directories page of the Settings dialog box.
  5. Click Finish and specify whether you want the new project to be opened in a separate window or close the current project and reuse the existing one. Refer to the section Opening Multiple Projects for details.
Creating a project from existing sources under the server document root

In this case, you need to use the New Project wizard to arrange the sources in a project, appoint the project root folder, and configure access to the server through a server access configuration of the type in-place. In this case, you need to use the New Project wizard to arrange the sources in a project, appoint the project root folder, and configure access to the server.

  1. To start the New Project wizard, choose New Project from Existing Files on the main menu.
  2. On the Choose Your Scenario page, choose Web server is installed locally, source files are located under its document root and click Next.
  3. On the Choose Project Directory page, select the folder where your sources are stored and click the icon_web_storm.png icon on the toolbar or choose Project Root on the context menu of the selection to appoint the folder project root. WebStorm marks the selected folder with the icon_web_storm.png icon.
  4. Configure the folders under the project root. Alternatively, you can do it later on the Directories page of the Settings dialog box. Click Next.
  5. On the Specify Local Server page, appoint the server access configuration to use. For more details, see Configuring Synchronization with a Web Server.

    Do one of the following:

    • Choose Use existing server and select the relevant server configurations from the list. The list contains only configurations of the type In-place marked with icon_inplace_server.png, because your files are already under the server document root.
    • Choose Add new local server, click Next, and define a new server access configuration on the Add Local Server page that opens:
      1. Specify the server configuration name in the Name text box. WebStorm itself sets the configuration type to In-place.
      2. In the Web server root URL text box, type the URL address associated with the document root of your Web server as defined in the Web server configuration file. This URL address will be the starting point for building the URL address of your application. Both the HTTP and the HTTPS protocols are supported.

        For example, the Apache httpd server configuration file is httpd.conf. The default document root is the htdocs folder and the default URL address to access the data in it is http://localhost. If you have changed the default port 80, you have to specify the port explicitly: http://localhost:<port>.

        Click Next.
      3. On the Specify Web Path page, specify the URL address to access your project root folder. In the Web path for project root text box, type the path to the project root folder relative to the server document root specified in the server configuration file. As you type, WebStorm dynamically builds the URL address and shows as a link in the Project URL read-only field. To check that the URL address is constructed correctly and ensures access to the project root, click the link.
      For more details, see Creating an In-Place Server Configuration.
  6. Click Finish and specify whether you want the new project to be opened in a separate window or close the current project and reuse the existing one. Refer to the section Opening Multiple Projects for details.
Creating a project from sources outside the server document root

In this case, you need to use the New Project wizard to arrange the sources in a project, appoint the project root folder, and configure access to the server.

  1. To start the New Project wizard, choose New Project from Existing Files on the main menu.
  2. On the Choose Your Scenario page, choose Web server is installed locally, source files are located elsewhere locally and click Next.
  3. On the Specify Local Path page, appoint the project root. Specify the folder where the sources are stored and where the project will be created.
  4. On the Specify Server page, appoint the server access configuration to enable interaction with the server. For more details, see Configuring Synchronization with a Web Server.

    Do one of the following:

    • Choose Use existing server and select the relevant server configurations from the list. The list contains only configurations of the type Local marked the icon_local_server.png, because your files are stored locally on your machine but under the server document root, so a configuration fo the type In-place would not fit.
    • Choose Add new local server, click Next, and define a new server access configuration on the Add Server page, that opens:
      1. Specify the server configuration name in the Name text box. WebStorm itself sets the configuration type to Local.
      2. In the Folder text box of the Upload/download project files area, specify the server configuration root.

        The server configuration root is the highest folder in the file tree on the server accessible through the server configuration. The easiest way is to use the document root of your Web server as defined in the Web server configuration file. However you can appoint any other existing folder under the document root.

      3. In the Web server root URL text box of the Browse files on server area, specify the URL address of the server configuration root. This URL address will be the starting point for building the URL address of your application. Depending on your choice of the server configuration root, do one of the following:
        • Type the URL address associated with the document root of your Web server as defined in the Web server configuration file.
        • Type the URL address in the format <URL of the server document root>/<path to the relevant folder relative to the server document root>.
        Click Next.
      For more details and examples, see Creating a Local Server Configuration.
  5. On the Choose Remote Path page, create a folder on the server where WebStorm will upload the project files. This folder is called project root on the server and it will be automatically mapped to your project root.

    The page shows a tree of the folders under the appointed server configuration root. Select the relevant parent folder and choose Create Folder on the context menu. When the new folder appears in the tree, select it and click the icon_web_storm.png icon on the toolbar or choose Project Root on the context menu of the selection. WebStorm marks the selected folder with the icon_web_storm.png icon.

    Configure the folders under the project root. Alternatively, you can do it later on the Directories page of the Settings dialog box. Click Next.

  6. On the Specify Web Path page, specify the URL address to access your project root folder on the server which you appointed in the previous step. In the Web path for project root text box, type the path to the folder relative to the server configuration root. Actually, type the relative path to the project root on the server text box. As you type, WebStorm dynamically builds the URL address and shows it as a link in the Project URL read-only field.
Configuring folders under the project root

WebStorm can distinguish between Source folders, Resource Root folders, and Excluded folders. By default, any folder is treated as Source folder unless it is associated with another type.

You may also need to suppress upload/download of files and folders. Suppressing uploading, downloading, and synchronization for files or folders with sources ensures that the sources are protected against accidental update. When applied to non-sources, it saves system resources because huge amounts of media, caches, or temporal files are no longer copied hither and thither.

Select the directory you want to mark and do one of the following:

  • To have WebStorm ignore the selected directory during indexing, parsing, code completion, etc., click the Excluded from Indexing toolbar button rootExcluded.gif or choose Excluded on the context menu of the selection.
  • To enable WebStorm to complete relative paths to resources under the selected folder, click the Resource Root toolbar button resource_root.png or choose Resource Root on the context menu of the selection.
  • To suppress uploading, downloading, and synchronization for the selected folder, click the Excluded from Download icon icon_exclude_from_download.png or choose Exclude Path on the context menu of the selection.

See Also

Language and Framework-Specific Guidelines:

Reference:

Web Resources: