Visual Studio Code - Remote SSH live file editing crash course

welcome back you beautiful people and in

this episode I very quickly want to show

you guys how to connect to a remote

server make changes

and save those changes so what we have

done before in previous episodes was we

were able to code locally on our system

so we created an index.html file and

that was local on our hard disk but in

this case I want to show you guys how to

connect to a remote server so this of

course requires you to have a remote

server

um you can do this with a cpanel or with

direct admin

um but you can do this but you would re

if you do use cpanel or uh direct admin

you will be required to likely use um an

SSH key which we will not cover today

but hopefully I'll be able to cover that

in another episode in this case though

what we want to do is to be able to

connect to a VPS or a dedicated server

that has SSH already running you can

probably Google up what SSH is if you

don't know about it but basically most

VPS servers with your private servers

and also um dedicated servers they

usually have SSH running it's a very

popular protocol that allows you to run

commands and also upload and download

files so with that being said the first

thing we need to do is of course open up

our vs code and I want you to look I

want you to pay close attention to the

bottom left because right now there's a

you know there's a there's a few icons

here and if you hover over screen

but what we want to do is we want to

install a special module that allows us

to do remote connections and so to do

that I have my menu section on the right

hand side but I think by default vs code

normally has these icons on the left

hand side so just pay attention to the

difference there and where we want to go

is to our extension so we click on

extensions icon and then we want to

search for remote SSH

and when we do that as you can see there

is a remote SSH

module we need to click on it in order

to get full details of this module it's

created by Microsoft and basically it

allows us to connect to remote servers

now in order to do this we need to of

course install it now notice when I

click the install button

I wanted to look at the bottom left

when it gets installed there's a new

blue icon it's blue green that appears

on the left hand side this means that it

is installed now after we install it we

also of course have to configure it you

can go through the documentations but

I'm you know this is a crash course so

we're going to do this really quickly so

that you don't have to spend a lot of

time reading the documentation

so we can close off this documentation

for the time being of course as I said

you must have a remote server already

set up with ssh in order to do this and

so what we need to do is click on open a

remote window

and there's a few options that are

available here it's connect to host

there's connect current window to host

and then there's open SSH configuration

file getting started as a documentation

okay you might you know intuitively you

might believe that you want to use

connect to host yes you can but what

this will do is this will generally

Connect using a separate window so it

will open a separate vs code which we

don't want to do right now what we want

to do is use the same vs code so we're

going to click on connect current window

to host

now as you can see

there's two options available here

there's add new SSH host configure SSC

trusts obviously we want to click on the

add new SSH host but what I wanted to

also mention is that this window gets

populated this section gets populated

with all of your SSH hosts that you

would have added so if we add a new SSH

host what will happen the next time

is when we click on

connect current window to host we'll get

back here and it's going to have the new

SSH host and you'll see that in a few

seconds but let's continue on with

clicking add new SSH hosts

now it already shows you a bit of the

instructions you need

to type in in here you type in SSH space

your username at

the hostname or the IP address of the

server

Dash e

in my case

I'll then type in SSH space

username would be root

and this is the hostname of my silver

now to complete that you would space

Dash e

however because I'm running my SSH on a

different port

I have to add in a little bit of extra

code here so SSH normally runs on Port

22 so that's the same as colon 22 that

will specify the port right so you

username at hostname colon and the port

right in my case I'm running on 21.022

and so I have to put in that Port but

you shouldn't have to if it's a standard

SSH connection you're making which is on

Port 22 you could just leave this out

completely and that will default to Port

22 but in my case it's a little

different

so once I do this and I press enter

it's going to ask me where to store this

configuration this host that I just

added to the system

and you have two options on Windows the

first option seems to be related to this

specific account so my specific account

is system user and so if I save it in

this config file it'll only be available

to my

login my login user which is system user

the second one is a more generic one

which I believe is used for multiple

users so any user should be able to see

the the connection

um that is available with this one so we

really want in this case to use specific

user my specific logged in user here so

I'm going to select this one this

location and this of course is going to

change depending on your username that

you have for Windows

I'm going to click that and now that I

did that as you can see it said host

added and there's the option to open

config or connect because we don't need

to adjust any settings any additional

settings we can just go ahead and forget

about openconfig and click on connect

now it's connecting it's setting up this

event is going to ask me for my password

and if we did this correctly

this is going to work

by establishing a connection to the SSH

server

it's a long password

yes after you do that you type the

password you press enter now if you

press enter and there was an error it

would pop up it would tell you that

there was an error

if all went well

you what you should see is the option to

um you should see yourself logged in so

there's actually a console here where I

can actually type in commands to the

server and there's also an option to

open folder now sometimes when you do

the login for the first time it asks you

if the the operating system what

operating system you're running on the

server and usually for SSH servers it's

usually Linux so make sure to select

Linux and it may ask you to accept a key

and so you should also of course accept

the key

it may say continue and you click

continue and then you get in here but

this is how we know that we are

connected now so I can actually

literally type LS here and I'll be able

to

run commands directly on the server side

which is nice so things like top work

here

where you can see this is the this some

of the configuration well some of the

processing Etc that's happening but what

we're actually interested in is to open

a folder and in this case I'm going to

click on open folder and now you get

this option here where you can choose

which folder

um you want to open on the remote side

of things so you have to have a little

bit of knowledge of Linux here as well

but basically you know an Apache uh web

server would generally be at VAR

www.html

in my case I do some development in

drupals so I'm going to click on my

Drupal folder web modules and there's a

specific tool that I do develop and work

on so I'm going to open this up just to

show you just to demonstrate that it

works so now that I've not I have I've

found the folder I'm going to click ok

and then it's going to re-ask me for my

password again and this is because we

haven't been using SSH Keys which will

probably be covered in another video

so I'm going to retype back in my

password

and hit enter

and now that I did that once I

successfully put me in the correct

password now I have the list of files on

the right hand side it might be as I

said on your left hand side and I can

edit whichever file that I want so I'm

going to try to edit job output

and job output already has some

information in it

and here I could simply see

tests and then I can click save

and there

in a few seconds hopefully click it yes

in a few seconds let's see so anytime

you make modifications on vs code what

you get is of course this dot that shows

you media modification and anytime you

click save

right now it's going to upload so it's

taking a few seconds to upload and then

it turns to the X which means it's

already finished uploaded and that's

pretty much how you work with a remote

file system using vs code I hope this

helps you out if it did please like and

please subscribe

um there's oh there's one more thing

that I probably need to mention is

sometimes when you open this folder for

the first time it asks you if you want

to trust the folder and you could EAS

yeah you could say you could just

checkbox that and say trustful and you

should be good to go with that being

said thanks guys uh please like And

subscribe let me know in the comments

below if you have any questions I'll try

to leave as much information in the

description as well to to help you guys

out but if you watch this one just re

just review the video a few times or

pause the video between these steps and

you should be good to go uh thanks again

and have a wonderful day bye