Developer onboarding experience with CodeSpaces

Introduction

The project needs to increase velocity and a new developer arrives in the team. Now is typically the time where all chaos begins, as this person needs to be onboarded with the full toolchain linked to the project. Sound familiar? It does to me at least. Which is one of the reasons why I love CodeSpaces! Here you can have a development environment for VS Code full configured, which can then be leveraged in a cloud hosted manner. Even with having a secure connection to your locally installed VS Code. Sounds too good to be true? Let us take a look at the step-by-step experience of onboarding a new developer!

Resources

In today’s post, we’ll be using some resources to get us started…

Step-by-Step Experience

For today’s scenario, we’re joining the team that is developing a back-end API using Azure Functions. The team is using GitHub CodeSpaces for development, and has foreseen a template for developing .NET based Functions with CodeSpaces. Where we can even see that the template was pinned (in the middle) on the organization’s page.

As the developer is going to start a new project, (s)he will start from this template…

Before we actually use the template, let us look at the ‘devcontainer.json’ file to see what is included…

Here we notice that a lot of tooling will be installed out of the box, like ; Azure Functions, dotnet tools, GitHub CoPilot, etc. All the things this team will need to get started! So let us start with “Use this template”. Where we will be prompted to create a new repository…

(Do note, that where the demo used a personal account… The best approach here would have been to create the repository within the organization!)

Once the repository has been created, let us go to “Code”, and select “Codespaces”, and then “New codespace”.

Which will trigger the build of a new development environment for me…

This environment is linked to the given branch of the repository and will be built using the devcontainer.json configuration. Once the container build is completed and it has been started… You will see your own CodeSpaces development environment.

Now let us go to the terminal, and leverage the Azure Functions CLI to create a new project.

Let us select ‘dotnet’ here…

And then an “HttpTrigger”, as we want to build and API.

And there we go…

A new function has been created inside of our project.

Now let us boot up the function so that we can test it “locally”.

The function CLI is starting up inside of our development environment. Thus, it is starting up in the container construction inside of the CodeSpaces service.

And it is started! Typically we can see the various ‘HttpTrigger’-endpoints we can access in the terminal. As you can notice here, the environment has automatically forwarded the needed ports. And if we click on a link, it will automatically translate the URLs to one which we can resolve ourselves! Let us give that one a try…

And yes, we can access it! Now let us give it a proper query string…

Works awesome! Let us go back to our development environment, were we will see the log of the two events that were triggered.

Last but not least… We had Co-Pilot installed too. So let us add a function called “RandomNumber”. As we start typing, Co-Pilot will make suggestions, where you can see here that it actually suggested a full function.

Just press “TAB”, and the function is “typed”… 😉

Closing Thoughts

Bootstrapping new developers in project can be cumbersome… The following flow helps to greatly ease up on the pain of doing so. Next to that, ad hoc contributors can also be easily hooked into the process. Where handling small changes suddenly does not come with a huge overhead.

Do note, that Co-Pilot is (at the time of posting) still in preview… and that CodeSpaces is heavily tied to Visual Studio Code. If you are using a different editor or IDE, then this setup might not be technically possible.