Quickstart: Create a Kubernetes dev space with Azure Dev Spaces (.NET Core and VS Code)

In this guide, you will learn how to:

  • Set up Azure Dev Spaces with a managed Kubernetes cluster in Azure.
  • Iteratively develop code in containers using VS Code and the command line.
  • Debug the code in your dev space from VS Code

Note

If you get stuck at any time, see the Troubleshooting section, or post a comment on this page. You can also try the more detailed tutorial.

Prerequisites

  • An Azure subscription. If you don't have one, you can create a free account.
  • Visual Studio Code.
  • Azure CLI version 2.0.43 or higher.
  • A Kubernetes cluster running Kubernetes 1.9.6 or later, in the EastUS, EastUS2, CentralUS, WestUS2, WestEurope, SoutheastAsia, CanadaCentral, or CanadaEast region, with Http Application Routing enabled.

    az group create --name MyResourceGroup --location <region>
    az aks create -g MyResourceGroup -n MyAKS --location <region> --kubernetes-version 1.11.2 --enable-addons http_application_routing --generate-ssh-keys
    

Set up Azure Dev Spaces

The Azure CLI and the Azure Dev Spaces extension can be installed and run on Windows, Mac, or Linux machines. For Linux, the following distributions are supported: Ubuntu (18.04, 16.04, and 14.04), Debian 8 and 9, RHEL 7, Fedora 26+, CentOS 7, openSUSE 42.2, and SLES 12.

Follow these steps to set up Azure Dev Spaces:

  1. Set up Dev Spaces on your AKS cluster: az aks use-dev-spaces -g MyResourceGroup -n MyAKS
  2. Download the Azure Dev Spaces extension for VS Code. Click Install once on the extension's Marketplace page, and again in VS Code.

Build and run code in Kubernetes

  1. Download sample code from GitHub: https://github.com/Azure/dev-spaces
  2. Change directory to the webfrontend folder: cd dev-spaces/samples/dotnetcore/getting-started/webfrontend
  3. Generate Docker and Helm chart assets: azds prep --public
  4. Build and run your code in AKS. In the terminal window from the webfrontend folder, run this command: azds up
  5. Scan the console output for information about the URL that was created by the up command. It will be in the form:

    (pending registration) Service 'webfrontend' port 'http' will be available at <url>\r\nService 'webfrontend' port 80 (TCP) is available at http://localhost:<port>

    Open this URL in a browser window, and you should see the web app load.

    Note

    On first run, it can take several minutes for public DNS to be ready. If the public URL does not resolve, you can use the alternative http://localhost: URL that is displayed in the console output. If you use the localhost URL, it may seem like the container is running locally, but actually it is running in AKS. For your convenience, and to facilitate interacting with the service from your local machine, Azure Dev Spaces creates a temporary SSH tunnel to the container running in Azure. You can come back and try the public URL later when the DNS record is ready.

Update a content file

  1. Locate a file, such as ./Views/Home/Index.cshtml, and make an edit to the HTML. For example, change line 70 that reads <h2>Application uses</h2> to something like: <h2>Hello k8s in Azure!</h2>
  2. Save the file. Moments later, in the Terminal window you'll see a message saying a file in the running container was updated.
  3. Go to your browser and refresh the page. You should see the web page display the updated HTML.

What happened? Edits to content files, like HTML and CSS, don't require recompilation in a .NET Core web app, so an active azds up command automatically syncs any modified content files into the running container in Azure, so you can see your content edits right away.

Update a code file

Updating code files requires a little more work, because a .NET Core app needs to rebuild and produce updated application binaries.

  1. In the terminal window, press Ctrl+C (to stop azds up).
  2. Open the code file named Controllers/HomeController.cs, and edit the message that the About page will display: ViewData["Message"] = "Your application description page.";
  3. Save the file.
  4. Run azds up in the terminal window.

This command rebuilds the container image and redeploys the Helm chart. To see your code changes take effect in the running application, go to the About menu in the web app.

But there is an even faster method for developing code, which you'll explore in the next section.

Debug a container in Kubernetes

In this section, you'll use VS Code to directly debug your container running in Azure. You'll also learn how to get a faster edit-run-test loop.

Initialize debug assets with the VS Code extension

You first need to configure your code project so VS Code will communicate with the dev space in Azure. The VS Code extension for Azure Dev Spaces provides a helper command to set up debug configuration.

Open the Command Palette (using the View | Command Palette menu), and use auto-complete to type and select this command: Azure Dev Spaces: Prepare configuration files for Azure Dev Spaces.

This adds debug configuration for Azure Dev Spaces under the .vscode folder. This command is not to be confused with the azds prep command, which configures the project for deployment.

Select the AZDS debug configuration

  1. To open the Debug view, click on the Debug icon in the Activity Bar on the side of VS Code.
  2. Select .NET Core Launch (AZDS) as the active debug configuration.

Note

If you don't see any Azure Dev Spaces commands in the Command Palette, ensure you have installed the VS Code extension for Azure Dev Spaces. Be sure the workspace you opened in VS Code is the folder that contains azds.yaml.

Debug the container in Kubernetes

Hit F5 to debug your code in Kubernetes.

As with the up command, code is synced to the dev space, and a container is built and deployed to Kubernetes. This time, of course, the debugger is attached to the remote container.

Tip

The VS Code status bar will display a clickable URL.

Set a breakpoint in a server-side code file, for example within the Index() function in the Controllers/HomeController.cs source file. Refreshing the browser page causes the breakpoint to be hit.

You have full access to debug information just like you would if the code was executing locally, such as the call stack, local variables, exception information, etc.

Edit code and refresh

With the debugger active, make a code edit. For example, modify the About page's message in Controllers/HomeController.cs.

public IActionResult About()
{
    ViewData["Message"] = "My custom message in the About page.";
    return View();
}

Save the file, and in the Debug actions pane, click the Refresh button.

Instead of rebuilding and redeploying a new container image each time code edits are made, which will often take considerable time, Azure Dev Spaces will incrementally recompile code within the existing container to provide a faster edit/debug loop.

Refresh the web app in the browser, and go to the About page. You should see your custom message appear in the UI.

Now you have a method for rapidly iterating on code and debugging directly in Kubernetes!

Next steps

Learn how Azure Dev Spaces helps you develop more complex apps across multiple containers, and how you can simplify collaborative development by working with different versions or branches of your code in different spaces.