How to use Visual Studio Codespaces with Azure DevOps and SSH authentication
While offering a great out-of-the-box experience with repos in GitHub, setting up a cloud based dev environment with Visual Studio Codespaces and repos located in Azure DevOps requires some extra steps.
Intro
Visual Studio Codespaces provide a cloud based dev environment as a service and work with a lot of languages and runtimes like .NET Core, Node, Python and many other. Learn more about this service here: https://azure.microsoft.com/en-us/services/visual-studio-online/
I 💗 this service as I can work from any machine just with Visual Studio Code installed or even through the browser and connect to different development environments in the cloud!
All guides I’ve found so far assume the one uses GitHub as a repo host. While there is nothing wrong with GitHub I mostly use Azure DevOps for my work projects to host my repositories. It turns out that entering a DevOps git url when prompted for a repository during the creation process of the Codespace it fails as the extension is unable to authenticate.
It took my some trials to find the shortest way of connecting to Azure DevOps inside a Codespace. So here is a guide to save you some time.
Prerequisites
You will need to have the following set up:
- Azure Subscription to host a Codespace. If you need one, get one for free here: https://azure.microsoft.com/en-us/free/
- Azure DevOps organization with a project. If you need one, get one for free here: https://azure.microsoft.com/en-us/services/devops/
- Visual Studio Code. Download for free here: https://code.visualstudio.com/
Create a Codespace
Let’s start by installing the Codespaces extension in Visual Studio Code:
Now jump over to Codespaces and sign in:
This will open a browser window with a log in page. Once you have successfully logged in, go back to Code a select create new Codespace. Pick the default settings, select the subscription you want to use (if this fails you need to install the Azure Tools extension and sign in first).
Next is the step to provide a repository. This will not work with a Azure DevOps URL so leave this input blank and continue. Finally pick a name for your Codespace and wait for the Codespace to be prepared.
Once the Codespace is ready click on “Connect”.
Connect Codespace to a repo using SSH
First we need to turn our empty workspace into a git repository using the Terminal:
git init
Now let’s add the SSH url of the Azure DevOps repository we want to connect as a git remote to the workspace using the terminal:
git remote add origin git@ssh.dev.azure.com…
You can copy the SSH url from the repository’s website like this:
Since we don’t want to cache secrets on our dev environment and also don’t want to enter a password for each git operation let’s use SSH. Therefore we need to create SSH keys (Learn more here: https://docs.microsoft.com/en-us/azure/devops/repos/git/use-ssh-keys-to-authenticate) also using the Terminal:
ssh-keygen -t rsa -b 4096
Stick with the default file and also skip the passphrase. So use this key we need to add the public key’s data to our user profile in Azure DevOps. So open the key file in Code:
code /home/codespace/.ssh/id_rsa.pub
Copy everything without the trailing whitespace and linebreaks and add the key in DevOps (there is a “Manage SSH Keys” link on the same page than the SSH url). Pick any description that helps you identify the key later.
To test if this works we need to do a git operation like fetch in the Terminal. Since it’s the first time we call this endpoint, we to add the endpoint to the list of known hosts by typing yes:
Now that the connection is established we can perform any operation without entering any credentials. Now we are ready to code!
Summary
I would like to see “native” support to repositories in Azure DevOps in the Codespaces extension for Visual Studio Code to make things smoother. Given this is a new service that is still in preview I’m fine with these extra steps for now. Or do you know an easier way to do this? Let me know in the comments!
