Это видео недоступно.
Сожалеем об этом.
How to use FTP Simple in Visual Studio Code - UPGRADED Version
HTML-код
- Опубликовано: 15 авг 2024
- Being able to develop and manage your website projects straight from Visual Studio Code without having to constantly manually upload via FileZilla is what FTP Simple allows you to do.
☕ BuyMeACoffee: www.buymeacoff...
Discounts:
⚡ Hostinger: www.hostg.xyz/...
⚡ Elementor: be.elementor.c...
This video will cover the following points:
- Common mistakes
- Is FTP safe
- Shortcuts
- Installation
- Setup - FTP/SFTP + PEM
- Understanding Path
- Adding multiple websites
- Working with remote directory
- How to work locally
- How to set up a backups
- Upload specific files/folders
- Deleting Files
- Updating Files
- Compare Local Files with Server Files
- Ignore Files/Folders (untested)
Plugin name: Ftp-Simple
0:00 Introduction
1:53 Installation
3:18 Setup
25:40 Local Project Setup
33:07 Compare Local and Remote
35:11 Backups overview
37:40 Backups overview
Discounts:
⚡ Hostinger: www.hostg.xyz/...
⚡ Elementor: trk.elementor....
Recording Equipment:
◾ Microphone: amzn.to/3Ppp8Ok
◾ Shotgun Mic: amzn.to/3IVqIot
◾ Camera: amzn.to/3z0bxpF
◾ Lens: amzn.to/3Pw4s7d
◾ Lighting: amzn.to/3PGXvzW
Computer Gear:
◾ Keyboard: amzn.to/3PGXvzW
◾ Headphones: amzn.to/3PJl9fg
◾ Mouse: amzn.to/3z1TGPf
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.u...
Thanks so much Raddy! I'm not new to coding but am new to VS Code, and would never have worked all that out by myself! You saved me hours...
That's great to hear. Thank you very much for the comment!
Nice video, thanks for the effort. It helped me figure out fast if FTP Simple is what I need or not. This seems to be the most competent FTP plugin for VSCode, but unfortunately there are much better alternatives on Atom and Notepad++, as mentioned by another commentator. Now that Atom is finally going away, this might turn into a problem for people that want a competent editor and also good direct to FTP functionality. 😪
I wish VSCode had a native one developed by Microsoft. Kind of like the Dreamweaver one if you seen it. It was probably one of the best ones I've used
Underrated Channel, Awesome stuff. Keep going Bro, your time is yet to come.
Thank you very much, brother! Very kind of you!
How I can except one folder from downloading ? , like cache folder it's content of thousands of temporary files
3:15
PC: F1 to open Command Palette.
Mac: CMD-SHIFT-P to open Command Palette
Nice video Raddy but the best direct ftp extension there is in Atom and Notepad++. Because you can see the directory without downloading all the files but only those you edit. So it is possible to keep backup too. Something like git but in different way. VS Code has a big minus at this point. That's why I keep using Atom and Sublime and never touch it yet.
I do like Atom. I am not sure why I switched to VSC, maybe it was just hype. Overall I do like Visual Studio Code, but this particular extinction is not great. There are a few alternative extinctions, but I haven't had the chance to try them. Thanks for your comment!
@@RaddyDev I do like Visual Studio Code. But as I am using a lot Direct FTP the first thing I did is to test almost all Extensions with FTP functionality. None of them has the perfection respectively. So I continue use Atom and Notepad++
Thanks for saying this I'll try it out. This plugin is not suitable for developing on full time.
I had what I wanted with "ignore", because I needed to make the changes without db, and it will help for lots more.
Outstanding presentation Raddy. Exceptional. Thanks so much, Rick
Thank you very much for watching Rick, and I appreciate your comment! Thank you
Thanks for this Raddy! This was helpful :)
Wow. This is very helpful tutorial for developers. Hands-off you sir. I am following you...
Thanks for the comment and the follow!
Tks from brazil! Really helpful
Thank you for watching!
Hi !
Thank you for this video, a have a little probleme with my VSC, when I save my SCSS file in VSC a CSS file is generate but not uploaded on the server, It's the SCSS file who has uploaded at this place.... Maybe have you an idea please ?, Thank you have a good day :)
how to be able to upload several files using this extension instead of one ?
When i connect to my server from shockbyte it sure shows the files but when i open them it just shows a blank file no matter how long i wait what to do???
I've answered your question on the other video. I hope it helps
Thanks for this video. I'm having an issue though, hjope you can help me figure it out. Some subfolders appears with as [DiR] file, when double click on any, they dissapear from the file explorer. Do you have any idea what might be cousing it?
It could be the file permissions... Try changing them and see what happens
Thanks for tutorial, but do you know any ftp extension that would let me actually *manage* the files, not just blindly mimic my local project folder on the server?
For example, I got a Vue project and I want to send everything from /dist folder to my remote directory without creating a dist folder there.
I haven't seen a good one yet :(
When i open FTP the files are not listed down the left side in the windows, very annoyed with this. There must be another setting you did nt show us that displays the files. I would like to download all the files to my local machine into a directory called and i want to be able to make changes locally then upload the changes. But i want to see the files in the left window (local files).
I wonder if it's something to do with your server folder permissions... Maybe double check that. As long as you are successful connected to your server you should see the files. There is not much else to it. I hope that you figure it out 🙂
Is there an extension that completely eliminates the need for Filezilla? I'm thinking something like Dreamweaver's built-in FTP. I really liked that thing and haven't found anything comparable.
I haven't found anything as good as the Dreamweaver FTP. I just use Filezilla
when i change the path an Error comes " Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again." any solution
You might have an error in your settings.json file. Open it and look for red lines
Thank you soo much. But for my stfp host name, I just had to write the provided ip address. Mentioning stfp prefix wasn't working. Hope this helps someone :)
Hi, asking again. I am a little confused. So basically does this ftpsimple extension for vs code do the same thing sftp extension tutorials? Should I use this ? They sent me a webserver to connect and I have my js codes in vscode. I need to be able to download and upload files to this web server. What do you think about that? I am so new to this :(
Hey, yes it's the same. The only difference is that S stands for Secure so you have SFTP and FTP. Usually the SFTP connection uses port 22 and the non-secure - FTP uses 21. Normally your hosting gives you all the connection details and it usually tells you. My suggestion would be to download the website and work on it locally on your computer so I don't have to worry about breaking it. Once you are happy with the updates that you've done upload and replace the files back on the server. For this I would use FileZilla. That's what I do and also you can create a Github repository to push the updates and have backups. I hope this helps and if you have any other questions feel free to ask 🙂
Hi, thanks for the amazing video. I tried this with one website but I ran into a problem.
I used SASS and there are 10 sass files. When I edit one sass file and save changes, the sass compiler is not able to compile sass code from other 9 sass files.
The final output CSS file don't have the code from other 9 sass files. It contains code from only the sass file I opened and edited in VS Code.
I think it is because sass compiler is not able to access the other 9 files.
Then I opened all the 10 sass files in VS code and now SASS compiler compiled all the files.
But it's very difficult to work like that and the chance of committing a mistake very high. Is there any solution in your mind?
Unless you work locally I don't see any other ways of doing it at the moment. Maybe some of the other FTP extinctions have that option. It would have been nice if this worked
@@RaddyDev thanks for the response...
Is there any way to automatically upload the files, if you are working locally on a project? One without a temporary folder? I need a workflow that is compatible with git.
As far as I know there isn't an automatic upload option
I just switched to the extension SFTP by liximono. Seems to work better for my needs so far. It also supports workspaces.
@@Elythia I just had a quick look and it does look really good. Thanks for sharing, I will have to give it a try
Thank You! It's working 😀
That's awesome. Thanks for the comment!
Right when you pasted the Blizzard folder into the root folder off the project, did the simple-ftp download the files automaticly? I cant do it here at all
Right click on the left column of VSC where your project files are listed and right click then press ftp download. That will download them all for you
@@RaddyDev i know that, but i wanna know if the upload was automatic, cuz you didnt show the process before the Blizzard went to the server. Besides, the way you mention in this conversation you have to do all of that PLUS choose the local and remote folder. This is almost 10 clicks in the mouse.
@@brunogigliofreitas With Remote you can set it to upload on normal Save and when you have configured a local project you have to do Ctl + Shift + S to upload. There are other extinctions that you can try if that seems too much effort. I've heard that the SFTP by liximomo is supposed to be good
@@RaddyDev thx for your help
Hi Raddy, thank you very much, this explanation was very very clear and professional.
I do have a question though: I am working with a friend of mine on a website which we have on a shared folder in dropbox and until now we have been working on brackets with an FTP plugin that takes the changed file from the dropbox folder and upload it automatically into the server, into the folder with the same name of the folder in dropbox (dropbox folder has the same structure and files of the server). But how do we do this with vs code ftp-simple plugin, if we do not want always to click upload to the server?
I think that there was an option to upload on save. You just need to enable it, have a look at the Plugin documentation, it was something like "autosave" true. On another note you should try GitHub or bitbucket for version control and remote working. Working in Dropbox sounds dangerous unless you do regular backups.
Thanks for the vid!
Since my web project has subdirectories (wordpress and shopware cmesses) and simple ftp makes a mess on the local foldere, lots of orphans and unreliable fetching of the remote project, it is rather a solution für small projects with no subdirectories. Deleted the whole crap after one burned workday. Could be VS Code, too, I have no idea. Whatever.
Yeah the extension is not that great for complex projects. I stopped using it, but left the video as some people might find it useful. I've added a note to let people know. Thanks for the comment
@@RaddyDev Yes, the tut as is couldn't be more fantastic. It's just the extension.... :D
So what have you switched to?
It depends on the project and hosting I guess. For platforms like Firebase or Heroku I just use the CLI and for the rest I use the good old FileZilla 😃 They love doing updates
@@RaddyDev :D I am doing web stuff since '95 and except for al little hickup with Eclipse (is this still a thing?) I always did stick to companions like WS-ftp or WinSCP for file transfer. And I was fine! I was fine. Then this idea came strollin' around. Like it was nothing! "Hey, why won't you fix your php stuff in a chique IDE for a change? We have all the fancy stuff with code highlighting and whatnot! And we have cookies!". Yes, I wanted more! Maybe too much.
Now I burned a whole workday already trying to get a workflow for my domains and to have it really, really convenient.
Oh, Convenience. It is worth fighting for til you're crippled.
Both of my arms for convenience!
Anaesthetics are for losers!
"Bring 'em on! Just bring 'em on"*
*William BJ Blazkowicz or however he'S spelled. Shouldn't have had kids, anyway.
Wow you have literally experienced every change on the web, from tables, CSS, browsers, standards, languages, frameworks and so on.... You must be enjoying it if you are still doing it after all those years. Amazing comment haha 😀
This was great, got it to work the first time for me. I am having trouble creating multiple site json files. I can add another site but it just over rides the previous site. Let me know if you can help -thanks again for this great video!!!!
Hey Garry! Did you list your websites like this (basically as an json object):
[
{
"name": "my server1",
"host": "127.0.0.1",
"port": 21,
"type": "ftp",
"username": "id",
"password": "pw",
"path" : "/"
},
{
"name": "my server1 with tls",
"host": "127.0.0.1",
"port": 21,
"type": "ftp",
"username": "id",
"password": "pw",
"secure" : true,
//"secureOptions" : {"rejectUnauthorized": false, "secureProtocol" :"TLSv1_2_method"},
"path" : "/"
}
]
That should do the job
Failed to get server file list : Error: None of the available transfer strategies work.
It sounds like a server setting. I haven't had this before. Maybe look for transfer strategies in your dashboard. You might need to enable one. Which hosting platform are you using?
Thank You a lot, excellent video
Thank you for watching
Very well explained, thanks!
Just wondering, if the FTP folder contents were already downloaded in local, does specifying the project location skips to download the files again? Does it check if files and folders already exist? like to sync cloud and local I mean
By default, they are not downloaded. I believe that you can download everything and also you can set a backup folder. I haven't used it in a while, but by the looks of it, they have released an update only a month ago which could be good. I just stick to FileZilla and GitHub for code changes
@@RaddyDev thanks! Me too, I just thought it could be easier to do everything from VS code, having git and this extension you taught us 👍🏻
Hello, and thank you!
Thank you too!
Thank you for the presentation Raddy.
Can I please ask if it's possible to upload more than one file at a time? I prefer to work on a fix/new feature whatever on my local machine and upload all files when complete.
I've tried selecting multiple files and then saving/uploading but found that only the first file is uploaded. That means I've got to go through the tedious process of uploading each file individually. I'm hoping there's a better way.
Hey Stephen, thanks for the comment!
Have you tried selecting the files that you want to upload from the Explorer and right-click -> ftp-simple: Save - Upload to FTP server? I can't test it at the moment, but hopefully, that should work for you. I guess alternatively you can always use FileZilla to drag and drop the new files to the server. That's what I do most of the time.
Have a wonderful weekend! 🦍
@@RaddyDev Hi Raddy, Thank you for your reply. Yes, that's exactly what I tried but only the first file is uploaded despite having several selected.
The whole reason for installing and learning about ftp-simple was to avoid having to use another tool like FileZilla. I have my project files in Git so can see which ones have changed. It's a huge pity to have to load up another app and find the files, I wouldn't need ftp-simple in that case.
It seems unimaginable that ftp-simple can only upload one file at a time. It looks as though ftp-sync can synchronise (as the name suggests) the files so I can't see any other option but to use it instead.
Thank you for letting me know.
Can you give me your web host url you used?
It's on the video: ftp.raddy.co.uk
Update: The extension is mainly suitable for quick edits. I would avoid using it on a large and complex project.
If you are unable to connect, it's most likely your FTP details and not the extinction. Happy to help everyone, just comment below. Thank you for being here!
I tried and don't working anyway.. Filezilla connect very good.
It works for me, but FileZilla is great anyway
How do I disconnect from the ftp server?
Like, How do I turn it off, so that it goes away?
Thank you
Thank you for watching the new video 🙂
I believe I CAN fly jajajajah. You made my day
😄😄
is it possible for remote vps also for this?
I would assume that it is, but I haven't tried that myself
hello please i am getting an error-"extension host timed out" and it keeps stating "connecting without actiually connecting"
I wonder if it's wrong credentials. Maybe you need SFTP instead and you need port to be 22?
@@RaddyDev i did that....the credentials are correct but i a still facing thesame issue
@@mosesegboh There seems to be an open issue on this. So it's not just you. Check this out: github.com/humy2833/FTP-Simple/issues/51
very nice helpful
Thank you!
Raddy can you please help me regarding saving file in FileZilla server from angular 2+ Web Application
Angular is a front-end library and I assume that you won't be able to write files into your server. Unless your server has some sort of an API that can help? Firebase is a good example where it would work
@@RaddyDev we actually use node js for Api
Okay that's cool. What are your struggles?
@@RaddyDev Thank You So Much Raddy your video is very Helpfull Its working .
thanks
Thank you! I would like to do another Adobe XD to WordPress soon
thank u
❤😍👌👌👌SuPerb... video
👍times😊
Thank you! ☀️
Thanks a lot for the help, I was looking for a tutorial like that for a long time!!!! The uploading is working for me, but, in my case I already had the folder on my computer and wanted to make the uplod to the server.
So I had the follow problem.
On the server the root folder is: / web /
And on my pc is: D: /xyz.com/interface/
I accessed a file through vscode to do a modify and the path was:
D: /xyz.com/interface/view/form.php
When I saved the file was uploaded not inside the view directory, it was like:
/web/form.php
So it's wrong, what should I do?
I put the path in the ftp-simple settings like this:
"path": "/ web /",
"project": "D: /xyz.com/interface/"
That's very strange. Everything you've mentioned above looks good to me. In VSC -> explorer where your project files are, did you try to right click and ftp save upload to server? I wounder if you just saved and uploaded the form.php file itself - which should work 🤔
@@RaddyDev Yes, I tried what you said, but doesnt work. These days I tried to search for some issue for this problem, but I didnt find any issue about that. D:
But thanks a lot for the help, I will keep searching to resolve my problem ^^
Did not work.
hello
👋 hello
So I think this confirms that ftp-simple just kinda sucks. You have to select the directory every single time you upload a file so if you have a single CSS file that's 2-3 folders deep, every time you update it you have to go through a crapload of clicks instead of just being able to quickly upload it with 1 command like... literally any other IDE that integrates FTP. It's kind of sad that Macromedia Dreamweaver from 2003 had better FTP functionality than VS Code in 2022 even with an extension. Who wants to have to upload their entire root directly every time they make a small change just to avoid a billion unnecessary clicks and/or accidentally uploading files to the wrong folder because you misclicked?
The Dreamweaver FTP was great. I totally forgot about Macromedia. Good memories
@@RaddyDev FTP-Sync works a little better than this in that it makes uploading to the correct folder much easier BUT it's very unstable and I find myself constantly having to restart VSCode because it gets stuck uploading a file-It's hard to say if it's the plugin or my FTP server, hopefully it's the plugin.
@@stevenleonmusic I have to try it out. It could be that the connection doesen't stay open and then it crashes or something like that
And *that* is supposed to be *simple* ?
Damn it ! I go back to ftp-sync.
Thank you very much anyway
Haha yeah - not so simple
@@RaddyDev You did a really great job anyway. Thank to you I've kept my determination until I've finished to setting up VS Code and the FTP synchronisation (with SFTP finally).