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. If you haven't used it before it's a great life saver. Lastly, with all this working, I always take a minute to quickly commit to version control. ![]() If you have any trouble with this let me know either leave a comment below or feel free to contact me directly. 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. Then back in your editor, try editing a file & click save and watch it refresh in your browser. 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. If that all worked, let's now enable live reload. Now we can test this out, first let's make sure FTP uploading on save is working. ![]() 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. 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. 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: , Next I'll setup the FTP connection for my site:Ĭtrl+Shift+P to open the command prompt and then type SFTP and click to init. 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.Īlso 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.Īlso 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: - hope to have this merged to the main extension soon. This is a short half second delay that shouldn't be too noticeable but should also give ftp enough time to upload the file. In the settings UI (Ctrl+Shift+P and type settings) search for layForUpdate and enter 500. With these installed I'll setup my site's livereload to have a delay. Then, i'm using Chrome as my browser so I've installed the LiveReload extension for Chrome: & i've installed the LiveReload extension for VSCode too: ![]() 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.įor FTP in VSCode i'm using the SFTP 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 though those tend to be paid while the editor ones are generally free. This can even work over ftp by setting a short delay in your livereload extension. 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 ). LiveReload is a way to have your code changes live refresh in your browser.Į.g. LiveReload with FTP Home Subscribe LiveReload with FTP 06 March 2019 on REC, Responsive, Design
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |