REC FTP development using Atom editor

by Andrew Stilliard

Following on from my post on FTP development with REC where I used Sublime Text 2. I believe it's worth trying out other editors to find one that works well for you. Also this editor is FREE which is a big bonus ;).

(UPDATE: Newer post (2019) for vscode & live reload now available too)

In this tutorial we'll quickly get setup with Atom, it's is a newer editor from the guys at Github. Completely open source, free and built in javascript which makes it pretty interesting (to me at least).

Steps to get started for REC site development:

  1. Visit Atom.io, download and install

  2. Now we have the editor installed, lets start installing some packages to begin development.

    We need to head to the settings view, you can open this by navigating to Edit > Preferences (Linux), Atom > Preferences (OS X), or File > Preferences (Windows). It's worth exploring some of the available settings, keybindings/shortcuts and other areas.

    To install the package we want click on the "+ Install" tab on the left.

    The first package we'll install if for Twig syntax highlighting. Search for "php-twig" and hit enter.

    It's also worth setting up your theme as you'll spend a long time stairing at the screen, you'll want it to be nice :). Click the "Themes" tab on the left. e.g. I've chosen to use "One Dark" for the UI Theme, and "Atom Dark" for the Syntax Theme. You can also view and install other Themes from the "+ Install" tab, by clicking the Themes toggle next to the search input.

  3. Back to installing packages, lets also install an FTP package to work with the REC files.

    I've chosen to use remote-sync for this demo, but there are several other ftp packages that may work well for you too.

  4. Create a new empty folder for this project

    (However you normally create folder, e.g. via a file manager program on your computer, or via the terminal using mkdir myproject)

  5. Add project folder to Atom, "File" > "Add Project Folder..." and select the folder

  6. Right click on the folder on the left, > "Remote Sync" > "Configure"

    • Toggle FTP at the top (instead of SCP/SFTP)
    • Set Hostname as the site's domain name or IP if not live on domain
    • Port as 21
    • Target directory as /
    • Username as the ftp user (in the REC site > Admin > FTP Access > User, for the views@... account)
    • Enter password, also given in the admin ftp access area.
    • Tick to upload on save and to delete on local delete (if you'd like these settings)



  7. Right click again on the folder on the left, > "Remote Sync" > "Download Folder"

    (this may take a few minutes as there are many files)

  8. Start editing files, (on save it should upload, if not after the first time you may need to restart Atom)

    Also after restarting Atom, the first save/upload can take a while, for me on a fairly fast internet connection it took almost 1 minute for this initial connection. But then all save/uploads after take less than a second so it's just a little wait at the start of each coding session which isn't so bad. You could also try out one of the other ftp packages available for Atom if this becomes too much of a pain.

  9. From here you have your project folder ready to start development, and for a walk through on getting started with REC development please see my previous post on this, but just skip over the Sublime Text setup instructions.

I hope this helps you get started with Atom, leave a comment below for any further help.

There's plenty details on using Atom here, along with this video to help you get started.