 Hi everybody, my name is Roddy and you're watching my channel, Roddy the Brandt. Today we're going to look at SFTP Simple in a lot more detail than we did last time. For those of you who don't know what FTP is, it's basically a file protocol that is used to transfer files between a client and a server over a network. I think this is a good explanation. Now before we begin, here is what we'll be covering today. I've already made a big list and the first thing that we'll be covering today is the common mistakes that I saw in the comments and emails. Is FTP safe? Shortcuts, installation, setup or have a look at setting up FTP, SFTP and using a PEM key. I'm not sure how you pronounce that. Understanding path, adding multiple websites, working with remote directory, how to work locally, how to set the backups, uploading specific files and folders, deleting files, uploading files, comparing local files with server files, which is a great feature by the way, and ignoring files or folders so they don't get uploaded on the server, which is also great, but I didn't actually have the chance to test that. But anyways, I will show you the code from the documentation, so that should be fine. I hope. Okay, I think that's everything on that list and at the end of this video you will be an FTP master and if you want your diploma, please email me and I will send it back. Now for those of you who have already watched the previous video, you probably already know how to set up your FTP stuff and you might not want to watch the first part of this video. So you could definitely skip ahead and have a look at the points that you're interested, but don't skip smashing the like button, subscribing to my channel and saying hello in the comments below. Now, let's jump into the computer and get started. Welcome everybody, let's get started with this video. I have Visual Studio Code open here on the screen and the first thing that we need to do is install the FTP simple extension. To do this, we can go here on the left side of the screen and press on the extension icon or you can use the shortcut, which is Control Shift and X or Command Shift and X if you're using Mac. So let's open the extensions panel and inside here we need to search for the extension, which is FTP dash simple. The one that I want to install is this one here. It has the red and blue arrow and to install it, we can simply press here the install button and that's it. So the FTP simple is now ready to use. Obviously, before you start using the extension, have a look at some of the functions, some of the available commands and the configuration settings because there is a lot of options and I'll probably won't be able to cover absolutely everything, but I'll do my best. So first of all, let's have a look at the setup and how we can add or connection information. Obviously, go to your webhost, create a new FTP account and make sure you have a note of your hostname, of your username, password and so on. First of all, let's close the extensions now as we won't need it anymore. Let's close this as well and let's press F1 on the keyboard and this would open this Visual Studio Code menu and to configure the SFTP simple, we can simply do FTP dash simple columns and then config. Obviously, because I've used those commands recently, they're at the top so you won't have to type them all the time if they're recently used, but first time, the one that we need is the config and let's press enter or just click on this and this should open the FTP dash simple dash temp JSON file, which is basically the configuration file. I will go through this step by step and I will show you another, now I will go through this step by step and I will show you an alternative ways of connecting and I will show you some of the mistakes and so on. So we're gonna have a few different use cases. Now the first example that I'm going to show you is actually going to be connecting to my personal website, which is called ready the brand.com and the name here is not so important, but if you're gonna have multiple websites in here, it's obviously best to be organized and this is what the name is for. So I'm going to type ready the brand and I'm just going to call this FTP. Now for the host, obviously this will be different depending on what host you're using. You might have to use FTP dot with the domain name of your website. You might have to use the host IP and obviously I can't cover every single host. The settings will be slightly different for everybody, but when you create a new FTP account, usually that would give you your host, your type, your username, your password and so on. So for mine, I'm actually using GoDaddy and my primary domain name is ready.co.uk and I believe this is why the host for me is ftp.ready.co.uk. But as I said, yours will be totally different because I'm using FTP. The port for me will be 21. The type will be set to FTP and the username I've already created for myself, which is ready the brand at ready.co.uk and the password I've already set up as well. So I'm going to copy and paste this in here and then we have all to save which means which is set currently to true as default and this means that every time I'm working on a file and I save it, this will all to save to the server automatically. But if you don't want that to happen, you can obviously set this to false just like this. And that won't happen. You have to push the files manually and I'm going to set mine to true by the way. And then we have a confirm setting here, which is set to true at the moment. And what that means is every time you save and FTP simply want to push the files to your server, this will ask you for a confirmation, which is kind of annoying. And I want to set this as false. So I don't want every time I save to ask me, oh, do you want to push the files to the server? So I'm going to set this as false. And the path is the actual path of where you want to go inside of the root folder. So let me show you an example. So this is my web server here. As you can see, I have a lot of folders, I have some subdomains, I have some other domain names. And this is one of the domain names that I have on the server, which is called ready the brand.com. And I've actually configured my FTP details to go straight to ready the brand.com. And now if I was to create another folder in here, let's say I want to create a folder called website, let's create this folder. And so if I wanted my connection to go straight to this website folder, I could simply go here to path and just put website just like this. And now when I open the connection is actually going to ignore everything else and just work from inside this website folder. So we won't see the index or logo or anything else. And the same goes to if your FTP account opens the whole root of the server, which for me is home turtle manager, because it's a shared hosting. Then I would see all those folders. But if I wanted to work in ready the brand.com, then I can put slash ready the brand.com. And that would work absolutely fine as well. Now I don't want this folder here. So let's remove it quickly, just like this. And let's go back. Now let's remove this to the default folder to the default path. Now one of the questions that I had was is FTP safe? And the answer for this is that with FTP, there is no encryption. So when possible, try to use SFTP or any other methods. Now let me show you how you might want to set up another website. And let's use the SFTP example. So if you wanted to set up another website, we can simply copy the settings from here and just put comma and then paste below. And then obviously we need to give it a different name so we don't get confused. We can maybe call this one rally the brand SFTP, just because this is going to be an SFTP example. The host might be just like this SFTP. I don't know because I haven't got that set up. The port in this case, because we're using SFTP, this will be 22. And the type will need to be changed to SFTP as well. And then the username and password obviously that will be created when you create your SFTP account. And one thing that I wanted to talk about was one of the mistakes that I've seen people do is and it might not be a mistake, but I think that some hosting providers provide you the host name, something similar to this SFTP column slash slash and then ready the code UK. And this is not how you do it. You would most likely want to put your IP or your host name and then put the type in here. So maybe mine would be SFTP dot ready the code UK. And then the type will be SFTP. You just are going to have to find out from your host. And hopefully that will work for you. Again, you can set the auto safe, the confirm and the path if you wish to. Now let me show you another example. I'm going to copy this and paste. And this example would be if you're using PEM. Now with PEM, I think all you have to do obviously set your port to be 22. Your type needs to be set to SFTP. And here we actually have to do another option, which will be private key, private key. And then we need to set the path to that key. So the path could be something like C drive uses and then your key dot PEM. So let me add an example here. Add to key, then slash, and then your key dot PEM. So this is how you add PEM. And obviously we have username on the land here. And this is because we need to put comma after the option. For this video, I'm not actually going to be using PEM. So this those details are invalid, they won't work. And I won't be using SFTP. So those details are invalid as well, they won't work even if I try to connect, but I will be using FTP. And hopefully those details will work. Let's have a look whether they work and how to connect to a server. So I'm actually going to use those two websites here just for the example. And I'm going to save this file. Now if I wanted to connect to my server, what we have to do is press F1. And then we can simply start with the remote directory open to workspace. So obviously, I have mine in recently used. But what you have to do is type FTP dash simple, then column and then start typing remote. And this should pop up for you remote directory open to workspace. So let's try this. And then this straight away is going to ask you, okay, which website do you actually want to open? Do you want to write the brand FTP? Do you want to write the brand SFTP? Or do you want to write the brand PEM? So obviously, you're probably most likely have different websites, so they're going to be different names. And the one that is going to hopefully work for me is going to be the FTP. So let's press enter or click on the FTP. And it's going to ask me which directory do you want to open? Do you want to open the current directory, which is the route? And I'm just going to press enter on this as well. And as you can see, Visage TD code actually refreshed. And he opened the files for me here on the left side of the screen. And if you noted earlier, I only have two files on this, which is index.html and logo.png. So let's go back. And I can actually, if you don't have the Explorer opening here, you can simply open it from here is the top icon on the left side. And you should see this open. If I wanted to edit this file now, I can simply open it. And this is a very basic page. So if I was to go and visit my website first of all, you will see that I only have my logo and a background color. So let's change something. For example, let's remove the background color. And as a default, the background color will be white. So I'm going to delete this and save the file with Ctrl S. So now because I have autosave set as true and confirmation set as false, the file should be uploaded on the server. And if I go back and refresh, you see that the background color is now white, which means that the file was uploaded successfully. And let's change it back to black. And let's set the image to be max width to be 400 pixels. Save this, go back, refresh. And as you can see, this is the live website. And the changes were made immediately. So the extension is actually working well. Let's go back. Let's change it back to 600 and leave it. Now one problem that many of you in my face is inputting the wrong FTP details. And I've already talked about how to do it with SFTP or FTP or how to add your PEM file and so on. So the next thing I wanted to show you is how to actually debug funny problems or to see whether files are being downloaded or uploaded or backed up and so on. So first of all, let's go and open a new terminal here. New terminal. And this will open the terminal here at the bottom of the screen. Now one thing that you might notice in here is that all files were actually downloaded in a temporary folder somewhere in the C drive under users range. And then the remote folder is could be remote dash workspace dash temp. And there is a long ID. So if you wanted to visit this folder and see what's going on, we can actually copy the path, go to my computer and just enter the path here in the window. And this will lead us to all the files that were downloaded. And obviously the folder mark will be slightly different, but you would say it under in the terminal. So you'll know where to search for your files. But one thing that you might notice is that the logo dot PNG is zero kilobyte. This is because these are only temporary files. And if you want to download them, you actually can do that. So if I was to go to the PNG here, right click and do download download working directory from FTP server. And then I have to select which FTP I'm going to use, which website, first one, and then the current directory I need to choose. And then this directory is the temporary directory that we were just looking at. So let me click this. And this is going to pop up that the file already exists. Do you want to overwrite it? So in this case, I'm going to press OK. And let's see what happens. And let's see what happens. So if I go back to the folder, you will see that the logo dot PNG is now 141 kilobytes, which means that this was downloaded on this remote temporary folder. Now this is all good. But you obviously might not want to work from this temporary folder. And in this case, if you did set the backups, that won't work. And I'm going to show you how to do your project locally and how you will be able to upload it to your server and how you will be able to do the backups. Now, another thing that I wanted to show you is that you can actually upload files from here as well. So let me quickly paste the website that I did two, three weeks ago. It's the visit one. And the reason I'm pasting this website is because this one has quite a few files inside a lot of images. So this should take a few seconds to upload and I will show you the console as well to see whether the websites have been uploaded or whether there are any errors and so on. And first of all, let's go to the output. And this is where you'll be able to see of what's going on with FTP Simple. But to see this, you can go to output and then under tasks, you can click FTP Simple here. So now that we've selected FTP Simple, you will see the visit files added to this folder. And also, if I scroll up to the top, you will see that I, you will see when I started the connection, you will see that the connection was open, and you will see that some files were downloaded. Now, if you try to connect to your web server and you have an error, this is where you can see the error. And the error will be most likely misconfiguration, maybe you've added the wrong details, maybe using SFTP instead of FTP, maybe using FTP instead of SFTP and so on. You get the point. Now, because I added all the visit files in here, and if I went back to my server and refreshed, so let's refresh this folder, you will see that they were automatically uploaded to the server because those files were new files, new written files, and I didn't have to press save. They were already added and uploaded to the server. But let's say I actually wanted to update something. So I could go to Blizzard, I can go to index.html, and I can let's just change the space, I'll do that, save it. And this will be now uploaded, blizzard slash index.html, and this is all working perfectly well. Now, you might be wondering here what if you wanted to change the actual temporary folder, you don't want it to go under C, users, range, update, roaming, code, users, global storage and so on. You want it to be somewhere that you can access quickly and easily. We can actually also do that as well. So let me put this down a little bit. And the way to do this, you can go to file, then preferences, then go to settings. And under settings, we have to find extensions, which is here at the bottom, and then find the ftp simple extension. And then here, under remote workspace, is where we have to add the folder of which the website will be saved. And let me show you. So first of all, let's pick a hard drive. Obviously, our Mac will be slightly different, I believe, but it's more or less the same. You just have to pick directory. So for me, let's go with this Samsung SSD hard drive. I'm going to go in here and create a remote folder. So I'm going to create a new folder. And let's call this one remote. Okay, so this will be a remote folder. And if I go inside here, then you'll see that this is under E slash remote. So I can technically copy this and paste it in here. And maybe do another slash like this. So the files go inside this folder. Okay, this is a good we don't have to save. We can just quickly exit the settings just by closing them. And that's fine. Now next time we open the connection to the ftp instead of downloading in here, it's actually going to be downloaded in the new folder. Let's have a look. Let's say let's try to refresh first of all, and nothing is happening. That's fine. Okay, let's press F1. Let's go to remote directory open to workspace. And let's select the first website, write the brand ftp. And then let's open the current directory. Let's see what happens. As you can see, the files actually downloaded still at the same folder that they were downloaded before. And this is because we actually need to close and open Visual Studio code. And what I'm going to do now is go to file and just open a new window. That's absolutely fine. Let's close the old tick. Let's close the Visual Studio code from here. And let's do another go. So let's go F1 remote directory open to workspace and do write the brand ftp current directory. And this should reload. And if we go to terminal new terminal, as you can see, the files are now being downloaded in E remote. And then this has created a new unique ID for this website, which is absolutely fine. So if you were to go to a remote folder, you will see that remote this unique ID is here. And then we have the files. They're not obviously yet downloaded. They're just kind of like ghost files, temporary files. But if you wanted to actually download them again, we can simply right click, download, download the working directory from ftp server and then run the brand and then current directory and then choose the current directory, which is E remote and then the ID. And as you can see now, it's gonna say again, already existing directory, do you want to override? Okay. So hopefully, we should see the files in here being downloaded. Now we do have a lot more files than before. So it might take a little bit more time. But as you can see, the logo has changed now, the kilobytes, the index has changed and implicit. These are starting to change as well. So we got the index. We have most of the images. We have the CSS as well. And I think we're pretty much done. I think this has downloaded everything, I believe. And that's a good thing. Now we could leave it this, but there is also another better way of working locally. And let me show you how to do this. So instead of working with this remote directory, we can actually create a local directory, which allows us to do a few cool things such as backups. And you can actually preview the differences on your local files with the files on your server, which is pretty cool. So let's say in my Samsung Drive, which is E, let's create another folder. And let's call this folder something like website projects. Now in this folder, we can obviously create a website. And let's say our website is this is my ready website, ready the brand website. And let's also make sure that we have backups for this website. Now the backup we could do inside if we wish to as well. But let's do them outside for now. So I can do another folder here. And I can just call it backups like this. Or we could call it right the brand backups and so on. Now this is all cool. Let's have a look at how we can do it. If we go back to Visual Studio Code, press F1 and go to the config. Let's close this. To do this, we need to add two more properties. And the first property that we need to add is project. And this will take a path. So all project path. And that would be E column slash website projects. And then ready the brand. Okay, this is my project folder, which we just created here. And also we need to set up the backup folder, which will be then we do comma, and then we can do backup. And for the backup, we can simply do E slash website projects slash backup. Is it backups or backup? Backups, okay. And save. Now what we can do is let's open a new window to start fresh, remove this. And let's connect now that we have a fresh Visual Studio Code, we can actually open our project by going file, open folder. We can then navigate to the eDrive. And then we can go to website projects. And now I can go to rally the brand and select this folder. Obviously, currently, I don't have anything in here, but let's create a file. So let's start a new website. I will call this index dot html. Let's create a simple html. And let's do ftp tp dash. And let's do h1. Hello, save this. Now when I say nothing is actually happening. And this is because if you wanted to save this file to the server, we actually have to do control shift and s or command shift and s if you're Mac. So let's do that. And as you can see straight away, this is asking, okay, where would you want to save this? And where? And obviously I want to save this on rally the brand ftp. So let's go there. And then this will be saved in the current directory, the main directory of the website. So I can do that. And then it says, okay, we've got index dot html file there that exists. And then you would say, would you like to write the file index dot html? And I will just press enter. And then if you go to the website and refresh, you will see that we're getting the new website. And this is where we could be working on a brand new project and push files. But we will do that now. Okay, now that I've pasted the Blizzard website in here, as you can see, the document has actually opened on the left side. But that doesn't mean that document is yet uploaded. So if we go back, you'll see that we're still getting the old website. So to change this, I can simply go here in the main folder, right click and do ftp simple column save upload to ftp server, which is control shift and s usually. And then I can select the rally the brand with the two stars, which means that this is the this is going to execute the selected directory, if exist, force of right. So let's do that. And then let's select rally the brand and current directory. So hopefully the files will be now saved. And if we go back and refresh, you will see that our website is now coming up. And if you go back to the cPanel, you will see that the files actually uploaded on the server and everything is working as it should. Now let me show you something. Because we actually replaced the index dot html file, if we go to the eDrive on website projects and backup, you will see a folder with ID. And this folder will contain other folders with unique IDs. Now, these are the actual backups, you'll see that ftp simple has created a backup for us. And if I was to actually open this in Visual Studio code, you will see that this is the old website that I had before I replaced it with the Blizzard one. And then if I go to the backup, which is the first one here, you will see that this was the actual original website that I had, which was replaced by this webpage here. And now it's replaced by the Blizzard page, which is awesome. So it doesn't backup all files automatically every time, but it backups all the changes. So if I was to work on the index dot html, it will back that up and everything else will be fine, which is a good way to do it, I guess. Otherwise, this is going to have to download the whole website every single time. And if you have a big website like a WordPress website, that would be fairly hefty download to do, I guess. Now, this is really good so far. I hope that I'm not forgetting anything else. But the last thing that I wanted to show you is how you can check the differences between the local files and the files on the server. So for example, some of the images are missing. So let's have a look at how we can fix that and how we can see the local and how we can see the difference between the local files and the files on the server, which is pretty cool. So if you go back to Visual Studio Code, I assume that the problem will be coming from the CSS. And I'm actually using SCSS. So I'm going to open the main dot SCSS and just start watch SCSS. But don't worry about all this. I'm just going to make a bunch of changes and show you the difference. Okay, so if we scroll down, I can see that here I've made a mistake and I've written JPEG with capital letters. And this is why some of the images were not working. But I think this needs to be JPEG with small like this. Let's change them everywhere. Okay. Now that I've changed the SCSS file, I could simply upload the whole directory of the website or I could simply upload the main dot CSS file by right click and save upload to FTP server. So let me show you how you can upload all of them right click on here, save upload to FTP server, then click right at the brand execute the selected directory because you don't want to recreate that directory and then select the first one for me FTP and then upload in the current directory. Now, if you have a look at the output and go to FTP simple, you will see that files have been downloaded in our backup folder first of all, because we're changing all those files technically, we're overwriting them. All those files have been downloaded to or backup folder, which is brilliant. And now the file is actually being uploaded to a folder. And at some point, we should have, okay, they have been all the files are now being uploaded. And if we scroll up, we'll see that all CSS was uploaded. So technically speaking, if I go back to the website and refresh, you will see that we're getting all of the other images. And this was the mistake I made on this one building this website. Now, this is all good. But let's go back. But let's make some changes. So for example, let's go to the index HTML file. And let's say by mistake, I deleted all those icons, I added a div here with the class name of something, maybe, and say this. Now, if you want to see the difference between this file and the file on the server, it's actually pretty cool and easy to do. You can right click on the index dot HTML and do and do FTP simple difference, local file and FTP server file. You can also trigger this with control auto and D on your keyboard or command auto and D if you're a Mac. So let me press this and see what happens. Obviously, I need to select which website I'm working on, which is a little bit annoying, I guess. But let's select the first one. And then I need to select which file I'm comparing to. So I want to compare this file to the file to the same file on the server. Let's click it and see what happens. Now, let's start from the top. And as you can see, when I scroll up and down, both files scroll together, which is pretty cool. And let me close the explorer for now so we can have a bit more space to see. Obviously, I've zoomed in quite a lot. So you can see that's why the letters are so big. But if we go down, and as you can see here, these lines are still available on the server. But this is the local file on the left side. And I've deleted some lines in here. And also if I go down, you will see that I've added a line in here. And this line does not exist on the remote server. Obviously, I can upload this now and the changes will be made. Or I can just simply copy the differences if I made an error. And so on. And of course, this will be backed up as well. So let me actually close this. Go back like this. Save. And let me for the last time show you the backups. So if we go to backups, click on this, you will see that we've created quite a few backups now. And they all spaced out under date modified. So if I do right click view, if I do right click sort by date modified, the last backup is this one here. So let's have a look. As you can see, because we have written all the images, they're here now, because we have written all the styles there here now, because we have written the index, it's here now, which is really good. So now, as you can see, there is nothing stopping you from creating files here, and adding folders and uploading straight away to the server. But one thing that didn't show you is deleting files. Now, if I was to actually delete the index.html file, if I go right click and delete, this actually won't delete the file from the server. If I wanted to delete the file from the local host, then that's fine from your local machine, then that's fine. You can do that. But if you want to delete it from the actual server, you're going to have to right click on the file and do the ftp simple delete. And this will actually delete the file. So let me show you, I will click this, select write the brand ftp, and then click index.html. Are you sure you want to delete the index.html? I'm going to press yes. And if I go to the website refresh, the website is broken because the file does not exist anymore. So now you saw how to delete files. So now you saw how to upload files, how to create new files. You can literally create them from here, upload them or create them in your folder, upload them. You can delete files. You can check the versioning of different files. And let me check if I've missed something quickly. Okay, the last thing that I wanted to talk about super quickly is the ignore option. And I haven't tested this one out yet, but basically you can put an ignore option here. And this is the actual example from the documentation. So we're going to have to put comma. And then the documentation says you can put ignore. And then the files that you can ignore the folders. And for example, here, it's a very good example where you probably wouldn't want to upload your note modules if you're working with Node.js. And that's pretty much everything from this tutorial. I hope you liked it. I hope it was a little bit more informative than the last one. I think that I covered pretty much everything that I can think of. Thank you very much for watching. Don't forget to smash the like, subscribe to my channel and say hi in the comments below. And I will see you in the next video.