> For the complete documentation index, see [llms.txt](https://shoppinpal.gitbook.io/docs-shoppinpal-com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppinpal.gitbook.io/docs-shoppinpal-com/appendix/project-sync-via-ide/sftp-with-webstorm.md).

# SFTP with WebStorm

**Note**: ***This tutorial assumes you have already*** [***setup a droplet on DigitalOcean.***](https://training.shoppinpal.com/setup.html)

## Steps are documented below the video:

{% embed url="<https://www.youtube.com/watch?v=Ny02YT83ejY>" %}

1. Open WebStorm
   1. Create New Project, or
   2. Open an existing one.
2. Goto **Tools > Deployment > Configuration**

   This will open the configuration window where you will be adding a server .
3. Click on "**+**" Symbol i.e. **Add Deployment Server**
4. Now In **Connection tab**, specify the name you want to give to this deployment server. For eg. **Webstorm Remote Access**
5. Now Select Type i.e. FTP, SFTP, FTPS or Local . Here we are describing the **interaction type** with the remote host.
   1. **FTP** : File Transfer Protocol
   2. **SFTP**: SSH File Transfer Protocol
   3. **FTPS**: FTP-SSL (extension to FTP)
   4. **Local**
6. For This demo, **We will be selecting SFTP**.
7. Now Specify other details as :
   1. **Host** : mention the IPv4 address of your droplet.
   2. **port** : 22
   3. **rootpath**: / (Specifies the root path of your droplet. Leave it alone if you are not an advanced user)
   4. **username**: username for logging into your droplet. For digitalocean droplets, it will usually be `root`
   5. **Auth type**: Change it from `Password` to `Key pair`
      1. **Private key file**: You can use the `...` symbol to enter the file browser and 9 times out of 10, the file you want to select is located here: `/Users/<your_username>/.ssh/id_rsa` on a mac.
      2. **Key passphrase**: Provide the password you used to encrypt your `id_rsa` file.
         1. enable the `Save passphrase` checkbox
8. Additionally click on "**Test SFTP Connection**" to verify if your connection is authorized or not.
9. Once your connection is successful, navigate to **Mappings tab** .
   1. **Local Path** : path of your application in your system
   2. **Deployment Path** : path of your application on the remote host. For eg. /root/dev/BluBox where BluBox is the application directory.
10. For advanced users:
    * You can chose to ignore few directories which we want i.e. `node modules`, `bower_components` etc. by adding them to excluded paths.
11. Now Click on **OK**.
12. Your Webstorm Deployment Server Configuration is complete.
    1. If you used an **existing project**:
       1. Click on **Tools > Deployment**  and select **Sync with Deployed to Webstorm Remote Access.**
          1. It will take some time to sync local project with the remote one.
13. Goto **Tools > Deployment** menu and select **Automatic Upload**
14. Now whenever you save changes, **the code is uploaded on the remote host**
    * Advanced users: Additionally if your remote box is configured appropriately, then your application is re-deployed with the updated code. But that's a separate topic.