Chris Shaw

Chris Shaw

Lead Profile All Articles

I am an ardent software developer and eager lifelong learner of code. My passion is the python language with particular emphasis in the 'django' and  'opencv' packages. I have created this blog to share my e... Read More

Tutorials


Edit on a remote server with Atom and FTP

Feb. 13, 2019 Chris Shaw 3677 views

I will start by stating, this is probably not the best practice, but it is really convenient to be able to connect to and edit you live site using Atom on your machine. It certainly beats shelling in and editing with an editor like Vim or trying to use the cPanel file manager to find and edit files.

Atom has been my 'go to' editor for a few years now, thank in no small part to it being open source, AKA free. In fact I grew so used to using in in a local development environment, that I wanted to use it on remote servers too. And, as it turned out, was very easy to achieve, thanks to the 'remote-ftp' package.

To install, simply open Atom and click on the menu items: Packages > Settings View >Install Packages/Themes. Next Type 'remote-ftp' in the 'Search Packages' field. The top result should be 'remote-ftp' by icetee. Click install to install the package. Once installed, click the setting button and scroll down till you find the readme. Here you will find some configuration files that you can copy from here or it is also further in this article. 

Start a new project folder in a location of your choice. Using the command line, create and edit a new file in this folder called .ftpconfig.

user$ touch .ftpconfig
user$ vim .ftpconfig

Start by pasting the sample config here. We then just have to change five settings.

  1. host: The hostname of your hosts FTP server
  2. port: The port number of your hosts FTP server, change if host is not using standard port 21.
  3. user: The FTP username provided by your host.
  4. password. The FTP password provided by you host.
  5. remote. The folder your project resides on on the server.
{
    "protocol": "ftp",
    "host": "SERVER", // string - The hostname or IP address of the FTP server. Default: 'localhost'
    "port": 21, // integer - The port of the FTP server. Default: 21
    "user": "FTP USERNAME", // string - Username for authentication. Default: 'anonymous'
    "pass": "FTP PASSWORD", // string - Password for authentication. Default: 'anonymous@'
    "promptForPass": false, // boolean - Set to true for enable password dialog. This will prevent from using cleartext password in this config. Default: false
    "remote": "FOLDER/",
    "secure": false, // mixed - Set to true for both control and data connection encryption, 'control' for control connection encryption only, or 'implicit' for implicitly encrypted control connection (this mode is deprecated in modern times, but usually uses port 990) Default: false
    "secureOptions": null, // object - Additional options to be passed to tls.connect(). Default: (null) see https://nodejs.org/api/tls.html#tls_tls_connect_options_callback
    "connTimeout": 10000, // integer - How long (in milliseconds) to wait for the control connection to be established. Default: 10000
    "pasvTimeout": 10000, // integer - How long (in milliseconds) to wait for a PASV data connection to be established. Default: 10000
    "keepalive": 10000, // integer - How often (in milliseconds) to send a 'dummy' (NOOP) command to keep the connection alive. Default: 10000\. If set to 0, keepalive is disabled.
    "watch":[ // array - Paths to files, directories, or glob patterns that are watched and when edited outside of the atom editor are uploaded. Default : []
        "./dist/stylesheets/main.css", // reference from the root of the project.
        "./dist/stylesheets/",
        "./dist/stylesheets/*.css"
    ],
    "watchTimeout":500 // integer - The duration ( in milliseconds ) from when the file was last changed for the upload to begin.
}

The write and exit.

In atom, start a new project File > New Window, and add the folder File > add Project Folder and select the folder with the .ftpconfig file.

To view the remote options in the tree, Packages > Remote FTP > Toggle, then click on the remote tab in the tree. Here you will find a very usefiul connect button, that will bring up the remote tree view.

That is it. You can now double click on a file to download it for editing and when you save it is automatically uploaded. The image below is a sample django project. But also works for any editable file on your server.

If your computer goes to sleep of the connection is disconnected for some reason, you may need to disconnect and reconnect. On reconnect, it tends to upload all files that may have changed, so you dont need to worry. 


Tags: FTP Atom
blog comments powered by Disqus