LiveReload with FTP

LiveReload is a way to have your code changes live refresh in your browser.
E.g. When you save html/template or js files, your browser will auto reload to show the new changes, while css changes are auto applied live into the design without reloading - as if by magic ;).
This can even work over ftp by setting a short delay in your livereload extension.

Here's an example of this using VSCode (a free code editor), but should work the same in any other editor (such as Atom or Sublime - you'll need to find the relevant extensions for those editors) or if these don't work for you, you could look into a desktop app such as http://livereload.com/ though those tend to be paid while the editor ones are generally free.

In VSCode we can find & install extensions by pressing Ctrl+Shift+P and typing install and then finding the package in the list, or by clicking the extensions link on the left side menu.

For FTP in VSCode i'm using the SFTP extension:
https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

& i've installed the LiveReload extension for VSCode too:
https://marketplace.visualstudio.com/items?itemName=ziishaned.livereload

Then, i'm using Chrome as my browser so I've installed the LiveReload extension for Chrome:
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

With these installed I'll setup my site's livereload to have a delay. In the settings UI (Ctrl+Shift+P and type settings) search for livereload.delayForUpdate and enter 500. This is a short half second delay that shouldn't be too noticeable but should also give ftp enough time to upload the file.
You may later find you have to save twice if it didn't update the first time, if you run into this a lot you could try increasing this setting.
Also if you want to work with sass/scss files, you'll need to add these to LiveReload's list of file extensions, find livereload.exts and add ,scss after css.
Also if you want the scss changes to work like css changes without a full page reload, for other editors there may be a setting but in vs code I forked the repo to build a version that does this for scss files too: https://github.com/stilliard/livereload-vscode/releases/tag/0.2.5 - hope to have this merged to the main extension soon.

Next I'll setup the FTP connection for my site:
Ctrl+Shift+P to open the command prompt and then type SFTP and click to init.
This will give you a JSON object where we can setup the FTP connection, I made a couple changes to this, the following should work:

{
    "name": "My site",
    "host": "xxxxxx.co.uk",
    "protocol": "ftp",
    "port": 21,
    "secure": true,
    "secureOptions": {"rejectUnauthorized": false},
    "username": "xxxxxx@xxxxxx",
    "password": "xxxxxx",
    "remotePath": "/",
    "uploadOnSave": true,
    "downloadOnOpen": false,
    "ignore": [".vscode", ".git"]
}

In the above I've set it to ignore ssl issues so we can connect to dev sites easily, as well as uploadOnSave to upload when you save / ctrl+s the file and the very useful downloadOnOpen (disabled in above config but set to true for this to work) which helps make sure you don't override other peoples changes by having VSCode auto download the latest version of the file each time you open the file.

Next we need to download the latest files, again with Ctrl+Shift+P in VSCode we can type Sync and select SFTP: Sync Remove -> Local, this will download all files over ftp to your machine.

Now we can test this out, first let's make sure FTP uploading on save is working. Try editing a file & check it uploaded.

If that all worked, let's now enable live reload. First we enable this in our editor (Ctrl+Shift+P and type in LiveReload and click to enable), then in Chrome, click the reload icon & the small circle in the middle should turn to a solid dot.

Then back in your editor, try editing a file & click save and watch it refresh in your browser. Best is when you edit a CSS file as it wont even reload the page, but the change should suddenly appear, I tend to test that by making something's background color red or similar.
If you have any trouble with this let me know either leave a comment below or feel free to contact me directly.

Lastly, with all this working, I always take a minute to quickly commit to version control. If you haven't used it before it's a great life saver.

Version control systems such as git allow you to keep revisions of your code and even back them up to a remote private location like GitHub or BitBucket.
Using your terminal, if you already have git installed, it's as easy to commit this to version control by first cd'ing into the folder you're working in & then run git init to start git (only needed once in the project), then to add the files, we'll add all this time to get started: git add . and then we can commit this by saying git commit -m 'Initial commit'

There's plenty tutorials for git online & on YouTube, worth checking one out. Here's a great guide I stumbled across recently that helps simplify it: http://rogerdudler.github.io/git-guide/

Thanks for reading & hope this helps you build awesome sites.