WebStorm 2022.1 Help

Configure synchronization with a Web server

WebStorm distinguishes among in-place, local, and remote servers, however the meaning of these terms in the context of WebStorm slightly differs from their common meaning:

  • In the in-place server configuration, the web server is running on your computer, your project is under its document root (for example, in the /htdocs folder), and you do your development directly on the server.

    The document root of an in-place server is the parent of the project root, either immediate or not. The document root is the web root or website root directory. Usually, it is the publicly-accessible base folder for a website.

  • In the local server configuration, you do your development, then copy the sources to the server.

    A local server is a server that is running in a local or a mounted folder and whose document root is NOT the parent of the project root.

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

Before you start

Synchronization with servers, uploading, downloading, and managing files on them are provided via the FTP/SFTP/WebDAV Connectivity bundled plugin, which is by default enabled. If the plugin is disabled, activate it in the Plugins page of the Settings dialog. For details, see Install plugins.

Make sure the web server is configured and running, see the web server official documentation for details.

Server access configuration

WebStorm controls interaction with web servers through server access configurations. Anytime you are going to use a server, you need to define a server access configuration, no matter whether your server is on a remote host or on your machine.

A server access configuration defines the following:

  • The server type (in-place, local, or remote).

  • The computer (host) where the server is running. For in-place and local servers, WebStorm presupposes that it is the current computer where your project is.

  • The server access configuration root: the highest folder in the server hierarchy that can be accessed through the server configuration.

  • The URL address to access the server configuration root.

  • The protocol to transfer the data through and the connection parameters.

  • The correspondence between local folders (that is, the folders under the project root), destination folders on the server (either local or remote), and URL addresses to access the data on the server. This correspondence is called mapping.

    For example, your project is stored under C:/Projects/My_Project/ and contains a folder C:/Projects/My_Project/My_Folder, while a local server has the document root under C:/xampp/htdocs. You upload the entire project tree to C:/xampp/htdocs/My_Project. In the WebStorm terms, the C:/Projects/My_Project/My_Folder folder is referred to as local and the C:/xampp/htdocs/My_Project/My_Folder folder is referred to as remote.

You can define as many configurations as necessary, thus enabling flexible switching between upload/download setups.

If you need to deploy code to multiple servers, you can create a server group and avoid deploying to each server individually.

Default server access configuration

You can set a server configuration as default to have WebStorm silently apply it in the following cases:

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Build, Execution, Deployment | Deployment, select the required server access configuration in the central pane, and click the Use as default button on the toolbar.

    Alternatively, click the Default Deployment Server widget in the WebStorm status bar and select the desired server or server group from the popup menu.

    Selecting a default deployment server in WebStorm status bar
  2. To configure the upload to the default server, go to Build, Execution, Deployment | Deployment | Options.

Visibility of server access configuration

Once configured, a server access configuration can be used in all existing WebStorm projects. You can restrict the use of a configuration to the current project.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Build, Execution, Deployment | Deployment, and select the required server access configuration in the central pane.

  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 server access configurations list 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.

Last modified: 11 April 2022