WebStorm 2023.3 Help

Create a remote server configuration

In the remote server configuration, a server runs on another computer (a remote host). To access files on the server, use FTP/SFTP/FTPS/WebDAV protocols.

Creating a remote (SFTP) server configuration

To configure access to the server in this setup, you need to specify the following:

  1. Connection settings: server host, port, and user credentials.

  2. The server configuration root folder and the URL address to access it.

  3. Correspondence between the project root folder, the folder on the server to copy the data from the project root folder to, and the URL address to access the copied data on the server. This correspondence is called mapping.

  1. Press Ctrl+Alt+S to open the IDE settings and then select Build, Execution, Deployment | Deployment.

    Alternatively, go to Tools | Deployment | Configuration....

  2. The left-hand pane of the Connection tab, that opens, lists all the existing server configurations. Click the Add button and select the server configuration type depending on the protocol you are going to use to exchange the data with the server.

    • FTP: choose this option to have WebStorm access the server via the FTP file transfer protocol.

    • SFTP: choose this option to have WebStorm access the server via the SFTP file transfer protocol.

    • FTPS: choose this option to have WebStorm access the server via the FTP file transfer protocol over SSL (the FTPS extension).

    • WebDAV: choose this option to have WebStorm access the server via the WebDAV file transfer protocol (the WebDAV extension).

    In the Create new server dialog that opens, type the name of the new server and click OK to return to the Connection tab.

    Create a remote server configuration (SFTP): select server type
  3. Specify user credentials defined during registration on the host.

    1. For FTP and FTPS servers, specify the registration mode:

      • To login in a regular mode, specify the login in the User name field.

      • To enable anonymous access to the server with your email address as password, select the Login as anonymous checkbox.

    2. Specify the way to authenticate to the server:

      • For FTP and WebDAV servers, type your password and select the Save password checkbox to have WebStorm remember it.

      • For SFTP server, choose one of the created SSH configurations, or click the Browse button and create a new configuration as described in Create SSH configurations.

        Create a remote server configuration (SFTP): select SSH configuration
      • For FTPS server, specify your username and password. In the Advanced settings area, choose the security mechanism to apply.

        Select Explicit to have the explicit (active) security applied. Immediately after establishing connection, the FTP client on your machine sends a command to the server to establish secure control connection through the default FTP port.

        This method is selected by default.

        Select Implicit to have the implicit (passive) security applied. In this case, security is provided automatically upon establishing connection to the server, which appoints a separate port for secure connections.

        Note that this method is considered deprecated, and using it is discouraged.

  4. Enable connection to the server and specify the server configuration root.

    1. For FTP/FTPS/WebDAV servers, specify the host name of the server to exchange data with and the port at which this server listens. The default value for the FTP/FTPS port is 21. For WebDAV, the default value is 6180.

      For SFTP servers, the values specified in the selected SSH configuration are used.

    2. In the Root path field, specify the server configuration root relative to the root folder on the server. This folder will be the highest one in the folder structure accessible through the current server configuration.

      Do one of the following:

      • Accept the default / path, which points at the root folder on the server.

      • Type the path manually or click Browse button and select the desired folder in the Choose Root Path dialog that opens.

      • Click Autodetect. WebStorm detects the user home folder settings on the FTP/SFTP server and sets up the root path according to them. The button is only enabled when you have specified your credentials.

    3. In the Web server URL field, type the URL address to access the server configuration root. The server configuration root is the highest folder in the file tree on the local or remote server accessible through the server configuration. For in-place servers, it is the project root.

      Both the HTTP and the HTTPS protocols are supported.

      Create remote server (SFTP): specify root
    4. Click Open URL in browser icon in the field to make sure that the specified server root URL address is accessible and points at the correct Web page.

  5. Map local folders to folders on the server and the URL addresses to access them.

    In the Mappings tab, set correspondence between the project folders, the folders on the server to copy project files to, and the URL addresses to access the copied data on the server.

    The easiest way is to map the entire project root folder to a folder on the server. The project folder structure in this case will be repeated on the server, provided that you have selected the Create Empty directories checkbox in the Options dialog. For more information, refer to Configure synchronization with a server and Customize upload and download.

    1. Open the Mappings tab.

    2. In the Local Path field, specify the full path to the desired local folder. In the simplest case it is the project root.

    3. In the Deployment Path field, specify the folder on the server where WebStorm will upload the data from the folder specified in the Local Path field. Type the path to the folder relative to the server configuration root.

      If the folder with the specified name does not exist yet, WebStorm will create it, provided that you have selected the Create Empty directories checkbox in the Options dialog. For more information, refer to Customize upload and download.

    4. In the Web Path field, type the path to the folder on the server relative to the server configuration root. Actually, type the relative path you typed in the Deployment Path field.

    Create remote server configuration (SFTP): set mappings

Optionally

In the Connection tab, mark the server configuration as default and configure its visibility.

  1. Click the Use as default button on the toolbar to have WebStorm silently apply the current configuration in the following cases:

  2. Use the Visible only for this project checkbox to configure the visibility of the server access configuration.

    • Select the checkbox to restrict the use of the configuration to the current project. Such configuration cannot be reused outside the current project. It does not appear in the list of available configurations in other projects.

      The server records are stored in the .idea directory together with the project, which allows sharing them between team members through a VCS.

      In the list of server access configurations in the left-hand pane, the configurations visible only in the current project are marked with the Visible only in current project icon icon.

    • When the checkbox is cleared, the configuration is visible in all WebStorm projects. Its settings can be reused across several projects.

Overloading the deployment destination by configuring nested mappings

You can configure separate mappings for a specific folder under your project root to have the contents of this folder synchronized with another location on the remote host.

Suppose you have configured the mappings as follows:

Local Path

Deployment Path

<project_root>

ftp://.../htdocs/my_project

<project_root>/my_folder

ftp://.../htdocs/my_folder

Then the files in your project will be uploaded as follows:

Local Path

Deployment Path

<project_root>/file1.js

ftp://.../htdocs/my_project/file1.js

<project_root>/my_folder/file2.js

ftp://.../htdocs/my_folder/file2.js

instead of ftp://.../htdocs/my_project/my_folder/file2.js

Last modified: 20 February 2024