How to Configure a SFTP Folder in Sublime

When configuring a website, it’s extremely time-consuming/exhausting to have to make a file, upload it to your server and then run it on the server. Unfortunately, with site building, I have found that the process needs to be repeated over and over again, especially when attempting new styles, scripts, and formatting. And what happens when you decided you don’t really like your changes and want to revert to the old formatting? Well, the process needs to be restarted all over again.

Having a direct connection to your remote server folder can make this process extremely efficient and, fortunately, Sublime Text offers the option to set this up. To do so, you will need to have a couple things installed on your edition of Sublime Text:

  1. If you haven’t already, you will need to install Package Control. The easiest way to do this is to copy the text corresponding to your edition of Sublime Text and to run it via the application’s console, which can be accessed via View → Show Console. You will need to restart Sublime Text in order for changes to take effect.
  2. Once you have Package Control installed, you will need to install Sublime SFTP package. To do so, open up the Command Palette (Cmd + Shift + P on a Mac), find Package Control: Install Packages, and run it. It will open up a similar looking menu. Type in “SFTP” and download the first package that comes up.

Once you have the Sublime SFTP package installed, the real fun can begin.

  1. Create a blank folder on your computer directory into which all your site files will be placed once you connect to your remote server.
  2. Drag the blank folder into Sublime.

    Placing Folder into Sublime Text

  3. Right-click on the folder and select the option SFTP/FTP → Map to Remote.

    Accessing sftp-config.json File

  4. A new file called “sftp-config.json” will pop up in your Sublime Text window. In here, configure, information about your server, including the server directory on which your site is hosted and information about your login and password. These are the main fields I usually change from the default (from top to bottom of the file):

    • upload_on_save: Set to true. This will allow your saves to automatically sync with your remote.
    • host: The name of my site.
    • user: My username on the server hosting the site.
    • password: My password onto that server.
    • ftp_passive_mode: Set to false.

    Configuration of the sftp-config.json File

  5. Once that’s all set, Save the file.
  6. Now, when you right-click the folder in the left-hand directory in Sublime Text and navigate to the option SFTP/FTP, you have a host of options you can choose from. To start off, run the Sync Remote → Local command. This will collect all the files you currently have on your remote server and bring them into the blank directory you made.

    (Note: before starting the download, Sublime SFTP will verify with your host that all the information is correct and then display to you a list of all the files that will be downloaded. Make sure to press “Yes” in order to begin the download.)

    Syncing Your Local to Your Remote

Now that you have all your files on your computer, you can work, save and review your efforts changes with greater efficiency!

Thank you to the writers of Sublime SFTP that have put together such a fantastic solution to this problem, my coworker Phillip (make sure to check out his site) who was the first to make me aware that a solution to this problem even existed, and to LevelUpTuts who put together a great tutorial about how to configure this package.

Running Scripts from Sublime Directly in Your Virtual Environment

What’s better than having a virtual environment setup? Being able to run scripts directly from within Sublime on that virtual environment!

Here’s how you set this up:

  1. Open up Sublime.
  2. Navigate to Tools → Build System → New Build System.

    Build Systems Menu in Sublime
  3. A new tab will open up in your Sublime application. It’ll look like this:

    New Build Tab
  4. Erase the contents of the tab and copy/paste the code below in its place:

    {
    	"cmd": ["/absolute-file-path-to-your-env/bin/python", "$file"],
    	 "selector": "source.python"
    }
    

    Make sure to change the path (the first item in the “cmd” array) to the absolute path to your virtual environment version of Python.

    New Build Code in Tab

  5. Save the file. Make sure to name it as you would like to see it in the build directory.

    Saving the New Build
  6. Now select the virtual environment build from the Build System menu and get to programming.

    Selecting the New Build from the Build System Menu

Thank you to Shang Liang for originally posting on this.

Blog at WordPress.com.