Remote FTP/SFTP with Sublime

File transfer protocol (FTP) is used to transfer files between computers on a network. In my simplified terms, it’s how I upload/download files from my local machine to-and-from servers where my websites are hosted. There are various FTP clients, such as Fetch, FileZilla, Cyberduck, and more, that provide intuitive interfaces that allow for drag-and-drop of files. This gets extremely annoying when you have to upload edited files via FTP client each time changes have been made that you want to push live. This is no way to live your life. There are automated ways to do this with your text editor! Yippee.

Sublime’s Remote SFTP package allows to upload/download files to/from my local device to the server directly within the text editor itself. Even directly on save! My use cases of remote FTP have been when I’m working a staging environment and I’ve been given FTP access to build the website. But these days, my local environment has been with Vagrant so I’ve been using remote FTP less and less. Nonetheless, I’ve outlined my steps below.

1. Make sure you have the Package Control already installed on Sublime. Here’s detailed instructions.
2. Install the SFTP package via Package Control. cmd + shift + p for Mac users. Type in/go to Package Control: Install Package and press enter. Then, type in SFTP. Selecting SFTP will start to install the package.

1. You can check that the SFTP package has successfully installed by going to back to your Package Control and selecting Package Control: List Packages.

You should see SFTP as one of your listed packages

1. Typically, when I am using Remote SFTP, I am trying to access and edit existing files on the server. I may not have those files on my local machine, especially if I’m jumping on another developer’s project and they’ve given be FTP access. So I create an empty folder on my computer and open that up in Sublime. Right-click on the folder icon/name and go to SFTP/FTP > “Map to Remote…”

1. This will open up a “sftp-config.json” file where you can set your FTP configurations and credentials.
   Here you can specify whether you want the files to be automatically uploaded on save, etc. I also add the node_modules and (sometimes) images folders to be ignored when uploading/downloading under “ignore_regexes”, which acts similar to the “.gitignore” file. I ignore node_modules since I’ll have to run npm install to this local directly first anyways, it’ll be redundant to have it downloaded.
   Some of my personal configurations include setting “upload_on_save”: true, which automatically uploads the local file (overwrite the remote file) when saved. And “sync_down_on_open”: true, which means that when the local file is opened, and its corresponding remote file is newer, it will sync down (and overwrite) the local file. Since “confirm_sync”: true, is set by default, before the sync down happens, Sublime with prompt you to confirm.
2. Once your configurations and credentials are correctly added, save the file. Then, right-click on the folder’s icon/name again, go to SFTP/FTP, and select either “Sync Local ->Remote…” or “Sync Remote -> Local…” In all my past cases, I’ve chosen “Sync Remote -> Local…” as I was downloading existing remote files from a staging server to work on locally. Also for convenience, as any changes I make and save automatically got uploaded to the server. Note that the entire file where changes are made gets “uploaded” by overwriting the existing file on the server.

1. If there are no issues with your “sftp-config.json” file, the sync (uploading/downloading) will happen automatically. Depending on your configurations, you may have to confirm some steps.
   I also advise you to take precaution in setting your syncing and overwriting configurations because the last thing you want is to simply open Sublime and have it automatically sync down (and overwrite) all your hard work on your computer. Cases like this is why there’s version control, right?

That should get you up and running with the ability to access and edit files on the server directly from Sublime. Lastly, if you’re using Gulp to process/compile SCSS, auto-prefix CSS, and compress JS, you probably also want these files to be constantly “watched” and also automatically uploaded when saved. I’ll document my steps to do this shortly! Stay tuned.