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