This tutorial walks you through creating and connecting to a virtual machine (VM) on Azure using the Visual Studio Code Remote - SSH extension. You'll create a Node.js Express web app to show how you can edit and debug on a remote machine with VS Code just like you could if the source code was local.
Note: Your Linux VM can be hosted anywhere - on your local host, on premise, in Azure, or in any other cloud, as long as the chosen Linux distribution meets these prerequisites.
Get a Static IP Address on your Mac: The first step to setting up these web services on your Mac is. Load the identity files in /.ssh create by ssh-keygen above into ssh-agent. The name of the identitify file can be someting else instead of idrsa if you chose your own name instead of the default one. Ssh-add /.ssh/idrsa Load the identity files automatically on OS restart. Ssh-add -K /.ssh/idrsabb Show the identity key files in the ssh-agent. The SSH version installed in RHEL 7.3 appears to be OpenSSH 6.6. The command 'sshd -T grep macs' shows the supported MAC algorithms, and all of the above are included (plus a bunch of the MD5 and 96bit algorithms).
Prerequisites
To get started, you need to have done the following steps:
Install the extension
The Remote - SSH extension is used to connect to SSH hosts.
Remote - SSH
With the Remote - SSH extension installed, you will see a new Status bar item at the far left.
The Remote Status bar item can quickly show you in which context VS Code is running (local or remote) and clicking on the item will bring up the Remote - SSH commands.
Create a virtual machine
If you don't have an existing Linux virtual machine, you can create a new VM through the Azure portal. In the Azure portal, search for 'Virtual Machines', and choose Add. From there, you can select your Azure subscription and create a new resource group, if you don't already have one.
Note: In this tutorial, we are using Azure, but your Linux VM can be hosted anywhere, as long as the Linux distribution meets these prerequisites.
Now you can specify details of your VM, such as the name, the size, and the base image. Choose Ubuntu Server 18.04 LTS for this example, but you can choose recent versions of other Linux distros and look at VS Code's supported SSH servers.
Set up SSH
There are several authentication methods into a VM, including an SSH public/private key pair or a username and password. We strongly recommend using key-based authentication (if you use a username/password, you'll be prompted to enter your credentials more than once by the extension). If you're on Windows and have already created keys using PuttyGen, you can reuse them.
Create an SSH key
If you don't have an SSH key pair, open a bash shell or the command line and type in:
This will generate the SSH key. Press Enter at the following prompt to save the key in the default location (under your user directory as a folder named
.ssh ).
You will then be prompted to enter a secure passphrase, but you can leave that blank. You should now have a
id_rsa.pub file which containers your new public SSH key.
Add SSH key to your VM
In the previous step, you generated an SSH key pair. Select Use existing public key in the drop down for SSH public key source so that you can use the public key you just generated. Take the public key and paste it into your VM setup, by copying the entire contents of the
id_rsa.pub in the SSH public key. You also want to allow your VM to accept inbound SSH traffic by selecting Allow selected ports and choosing SSH (22) from the Select inbound ports dropdown list.
Auto shutdown
A cool feature of using Azure VMs is the ability to enable auto shutdown (because let's face it, we all forget to turn off our VMs…). If you go to the Management tab, you can set the time you want to shut down the VM daily.
Select Review and Create, then Create, and Azure will deploy your VM for you!
Once the deployment is finished (it may take several minutes), go to the new resource view for your virtual machine.
Connect using SSH
Now that you've created an SSH host, let's connect to it!
You'll have noticed an indicator on the bottom-left corner of the Status bar. This indicator tells you in which context VS Code is running (local or remote). Click on the indicator to bring up a list of Remote extension commands.
Choose the Remote-SSH: Connect to Host command and connect to the host by entering connection information for your VM in the following format:
user@hostname .
The
user is the username you set when adding the SSH public key to your VM. For the hostname , go back to the Azure portal and in the Overview pane of the VM you created, copy the Public IP address.
Before connecting in Remote - SSH, you can verify you're able to connect to your VM via a command prompt using
ssh user@hostname .
Note: If you run into an error
ssh: connect to host <host ip> port 22: Connection timed out , you may need to delete NRMS-Rule-106 from the Networking tab of your VM:
Set the user and hostname in the connection information text box.
VS Code will now open a new window (instance). You'll then see a notification that the 'VS Code Server' is initializing on the SSH Host. Once the VS Code Server is installed on the remote host, it can run extensions and talk to your local instance of VS Code.
You'll know you're connected to your VM by looking at the indicator in the Status bar. It shows the hostname of your VM.
The Remote - SSH extension also contributes a new icon on your Activity bar, and clicking on it will open the Remote explorer. From the dropdown, select SSH Targets, where you can configure your SSH connections. For instance, you can save the hosts you connect to the most and access them from here instead of entering the user and hostname.
Once you're connected to your SSH host, you can interact with files and open folders on the remote machine. If you open the integrated terminal (⌃` (Windows, Linux Ctrl+`)), you'll see you're working inside a bash shell while you're on Windows.
You can use the bash shell to browse the file system on the VM. You can also browse and open folders on the remote home directory with File > Open Folder.
Create your Node.js application
In this step, you will create a simple Node.js application. You will use an application generator to quickly scaffold out the application from a terminal.
Install Node.js and npm
From the integrated terminal (⌃` (Windows, Linux Ctrl+`)), update the packages in your Linux VM, then install Node.js, which includes npm, the Node.js package manager.
You can verify the installations by running:
Install the Express generator
Express is a popular framework for building and running Node.js applications. You can scaffold (create) a new Express application using the Express Generator tool. The Express Generator is shipped as an npm module and installed by using the npm command-line tool
npm .
The
-g switch installs the Express Generator globally on your machine so that you can run it from anywhere.
Create a new application
You can now create a new Express application called
myExpressApp by running:
The
--view pug parameters tell the generator to use the pug template engine.
To install all of the application's dependencies, go to the new folder and run
npm install .
Run the application
Last, let's ensure that the application runs. From the terminal, start the application using the
npm start command to start the server.
The Express app by default runs on http://localhost:3000. You won't see anything in your local browser on localhost:3000 because the web app is running on your virtual machine.
Port forwarding
To be able to browse to the web app on your local machine, you can leverage another feature called Port forwarding.
To be able to access a port on the remote machine that may not be publicly exposed, you need to establish a connection or a tunnel between a port on your local machine and the server. With the app still running, open the SSH Explorer and find the Forwarded Ports view. Click on the Forward a port link and indicate that you want to forward port 3000:
Name the connection 'browser':
The server will now forward traffic on port 3000 to your local machine. When you browse to http://localhost:3000, you see the running web app.
Edit and debug
From the Visual Studio Code File Explorer (⇧⌘E (Windows, Linux Ctrl+Shift+E)), navigate to your new
myExpressApp folder and double-click the app.js file to open it in the editor.
IntelliSense
You have syntax highlighting for the JavaScript file as well as IntelliSense with hovers, just like you would see if the source code was on your local machine.
When you start typing, you'll get smart completions for the object methods and properties.
Debugging
Set a breakpoint on line 10 of
app.js by clicking in the gutter to the left of the line number or by putting the cursor on the line and pressing F9. The breakpoint will be displayed as a red circle.
Now, press F5 to run your application. If you are asked how to run the application, choose Node.js.
The app will start, and you'll hit the breakpoint. You can inspect variables, create watches, and navigate the call stack.
Press F10 to step or F5 again to finish your debugging session.
You get the full development experience of Visual Studio Code connected over SSH.
Ending your SSH connection
You can end your session over SSH and go back to running VS Code locally with File > Close Remote Connection.
Congratulations!
Congratulations, you've successfully completed this tutorial!
Next, check out the other Remote Development extensions.
Or get them all by installing the Remote Development Extension Pack.
There is an updated version of this post for OS X 10.9. While the steps below should still work, I recommend checking out the new guide if you are running 10.9!
There are already plenty of guides that explain the particular steps of getting Git and Github going on your mac in detail. However, I had difficulty finding one that explained every step required in order with simple enough instructions for Terminal novices to follow along with autonomously.
So I decided to write one myself.
Background
I enjoy helping people become more efficient and productive, particularly when it comes to their computers and mobile devices. At a recent job, the staff design team was beginning a period of close collaboration with the front-end development team in the interest of achieving the best possible product in the shortest period of time.
However, there was a slight “problem.” The project’s codebase was exclusively managed via Git repositories on Github. Most of the designers had never worked with Git, let alone ever configured it on their workstations.
Most of the designers had some knowledge of the technologies that went into the codebase, particularly presentation layer tech like HTML and CSS. Some even knew programming languages like Javascript, PHP, and Ruby.
In an effort to unleash this previously untapped resource for a round of intense polishing and bug-fixing, I took it upon myself to write a step-by-step guide that any member of our studio could follow and be up and running with developer tools, Git, connected to Github, and ready to work on the project codebase.
How To Download Code Ssh On Mac Windows 10
This then is a slightly abbreviated1 version of the guide I distributed out to the team. Ultimately just a few days after releasing it, nearly everyone in the office — including design, production, management, and even a few devs setting up new machines — was able to at least view the latest code on their workstations.
Aside from the fact that my guide helped others quickly get through the arduous process of installation and configuration, I was happy to have it as a quick reference for myself when setting up new machines of my own. Enjoy!
Getting started
This tutorial assumes you’re using a Mac running at least OS X 10.7. If you are unsure of what OS you have, go up to the top left of your screen, click the Apple menu, and select “About This Mac.”
You’ll also need to ensure that your user account on your computer has admin privileges and that you know your account’s password.
Install the Command Line Tools for OS X
Xcode is a nearly 4GB developer suite Apple offers for free from the Mac App Store. However, for the purposes of getting Git and Github setup, you’ll only need a specific set of command line tools2 which fortunately take up much less space.
If you don’t mind the 4GB, by all means go for Xcode. Otherwise, you’ll have to go to connect.apple.com and register an Apple Developer account in order to download these tools.
Once you’ve registered, they can be found at developer.apple.com/xcode by clicking on “View downloads” and finding the appropriate command line tools for your version of OS X in the list.
A note about the Terminal
The Terminal application comes pre-installed with OS X, and can be found in the Applications -> Utilities folder. You can also quickly access it using Spotlight.
Ssh Into Mac
The terminal has a variety of uses, but for the purposes of this tutorial we’ll be using a syntax/command set called Bash. Terminal is already configured to use this syntax.
When you enter a command and press return/enter, often times the terminal will execute it and complete the task immediately.
Sometimes it will log information in the window while it’s working, but other times you might feel like it isn’t doing anything at all.
Some of the commands later in this tutorial can take a few seconds (or minutes) to complete, so don’t type anything into the terminal window or close the terminal window until you see it present you with a fresh prompt ending in
yourusername$ .
For the purposes of this tutorial, commands that I intend for you to type will be preceded with
$ , but don’t include that symbol when you enter the commands. It’s purely meant as an indicator and reference to the $ that appears in your terminal prompt.
Lines that contain comments/notes from me to will be preceded with
# and will be dimmed. Don’t type these either.
Make sure to press return after typing a command before you enter the next one.
Installing Git
“Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.”
We need to install Git onto your computer. It won’t have an icon in your dock, but it can be used by the Terminal (and other applications, more on that later).
OS X comes with a fairly old version of Git pre-installed, so we’ll want to make sure that your terminal is using a more updated version.
One specific reason you’ll want to have a newer version of Git than the one that ships with OS X is to take advantage of a nice authentication feature that allows you to seamlessly interact with Github.
Configuring Git identification
Now let’s configure your Git installation so other folks who might be working on projects with you know who’s doing all of the great work coming from your computer.
Setup Github
“GitHub is a web-based hosting service for software development projects that use the Git revision control system.”
Go to Github.com and create a free account if you haven’t already.
Github Keychain Helper
To save time in the future, we’ll install a utility that will allow your computer to authenticate with Github automatically instead of having to enter your username/password during each session.
First, check if the helper is installed by typing
git credential-osxkeychain into the terminal.
If the helper is installed, the terminal will give you instructions on how to use it:
If see the above message, you are now able to access Git repositories using the HTTPS method. There’s a very good chance that this is the only method you will need to access repositories and you can move on to my final notes.
If you don’t have the keychain helper already installed, you’ll see this instead:
To install the keychain helper, execute the following commands:
Once again, if the helper has been installed successfully, the terminal will give you instructions on how to use it:
If see the above message, you are now able to access Git repositories using the HTTPS method. There’s a very good chance that this is the only method you will need to access repositories and you can move on to my final notes.
If you don’t see the above message, you hit a snag along the way. Try going through the keychain helper install steps again.
Otherwise, if you have a specific reason that you need to access Git repositories using SSH, proceed to SSH Keys.
SSH Keys (optional step)
“SSH uses public-key cryptography to authenticate the remote computer and allow it to authenticate the user, if necessary. There are several ways to use SSH; one is to use automatically generated public-private key pairs to simply encrypt a network connection, and then use password authentication to log on.”
An SSH key basically lets your computer uniquely identify itself when it connects to servers. If Github is aware of the key your computer is using, you won’t have to enter your Github username/password every time you connect.
Check for pre-existing SSH keys on your computer
Let’s see if your computer has one or more keys already installed:
If you get the response “No such file or directory”, skip to Generate a new SSH Key.
Otherwise, you’ll need to backup and remove your existing SSH keys.
Backup and remove your existing SSH keys.Generate a new SSH key
Now we’ll create a new SSH key to use with Github.
When it asks you to enter a file name in which to save the key, just press return/enter (leave the prompt blank).
You will then be asked to enter a passphrase and confirm it. Don’t make this blank, and don’t make it an easily guessable. This prevents someone from easily acquiring and using your SSH key to impersonate you. Don’t worry, you won’t have to enter this key much (if at all) after initial setup.
Press return after each time you’ve entered your selected passphrase. You won’t see the characters or bullets, the cursor will stay in the same spot as if you aren’t typing.
If you make an error entering your password one of the times, just press return and it will prompt you to try again.
Once you’ve successfully set your passphrase, the terminal will report that your key has been saved and will present you with some sweet ASCII art.
Add your SSH key to Github
In order for your computer to access Github without you having to enter your username/password all the time, Github needs to know the contents of the SSH key you just generated.
Now we’ll add your key to Github:
Now let’s test that it all worked.
Congratulations!
Your Mac is now up and running with both Git and Github. I intend to write another post about some of the commonly used commands I always find myself looking up syntax for, as well as those that members on the team had to learn in order to effectively take part in the production process.
Recommended toolsText Editors
If you’re just getting your feet wet with writing code, you’ll want to look into a text editor that is purpose built for that task.
My hardcore colleagues wouldn’t leave me alone if I didn’t also mention command-line editors like Vim and Emacs, but I’d recommend one of the previously listed apps for getting started.
I don’t recommend using TextEdit as it doesn’t offer syntax highlighting, and I’m personally not fond of Dreamweaver for writing code as I feel it allows its WYSIWYG mode to be used as a crutch. That said, Dreamweaver’s predecessor4 in Adobe’s product lineup was what I learned to write HTML on, so there’s that.
However with the explosion of online code teaching platforms out there (and Firebug/DOM inspector tools), I don’t see the need to use a WYSIWYG editor anymore.
Git GUI Tools
When I first started dabbling with Git, I used the popular Tower app to manage my repositories. It has a fantastic interface and offers most of the features of the command line app.
However when we began this endeavor at my past job, the development team and I wanted to ensure that all persons with access to the codebase thought about what the actions they were going to take, and deliberately execute commands.
GUI tools are great, but they can sometimes allow disastrous things to happen with the push of a button. Additionally they can abstract away the syntax of the language/protocol they are built upon, and as a result leave users dependent on the GUI rather than knowledgeable about the underlying technology.
If you must use a GUI tool, by all means do. However in the circumstances I mentioned, it wasn’t an option we wanted to offer.
Terminal Configuration
I’ve been enjoying iTerm2 for a few small perks it offers, mainly the ability to have perfect representation of the Solarized Dark theme.
Feedback
If there are any steps/instructions I’ve written that have been outdated by newer information/technology, are simply wrong, or could be explained better please feel free to contact me on Twitter where I’m @burnedpixel.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2020
Categories |