Azure Dev Spaces - Demo Script

Create an AKS cluster to test out Azure Dev Spaces:

az group create --name devspaces --location australiaeast
az aks create -g devspaces -n devspaces --location australiaeast --generate-ssh-keys

Register for Helm 3 preview (unless it has since gone GA) for Dev Spaces: https://docs.microsoft.com/en-us/azure/dev-spaces/how-to/helm-3

Install Dev Spaces in your cluster:

az aks use-dev-spaces -g devspaces -n devspaces --space dev --yes
azds show-context
azds space list

Clone Azure Dev Spaces Samples repository

git clone https://github.com/Azure/dev-spaces
cd dev-spaces

Demo 1 - Team development on AKS

• Deploy bikesharingapp to dev namespace

cd samples/BikeSharingApp/
azds show-context
# Edit samples/BikeSharingApp/charts/values.yaml and replace placeholder with HostSuffix
cd charts/
helm install bikesharingsampleappsampleapp . --dependency-update --namespace dev --atomic

• Create child dev spaces

azds space select -n dev/azureuser1 -y
azds space select -n dev/azureuser2 -y
azds space list

• Change into a service directory and make code changes

vim samples/BikeSharingApp/BikeSharingWeb/components/Header.js

• Deploy private changes to AKS

azds space select -n dev/azureuser2
cd ../BikeSharingWeb/
azds up
# CTRL+C to stop streaming logs

• View the modified web app in yor local dev space:

http://azureuser2.s.dev.bikesharingweb.XXXXXX.XXXXX.azds.io/

• Verify existing web app in dev dev space is unchanged:

http://dev.bikesharingweb.XXXXXX.XXXXX.azds.io/

• Cleanup

azds down # cleanup child dev space

Demo 2 - Single nodeJS service

azds space select -n dev/azureuser2 -y

cd samples/nodejs/getting-started/webfrontend
code .

Open Command Palette (CTRL+SHIFT+P):

• Select Azure Dev Spaces: Prepare configuration files for Azure Dev Spaces
• Choose Yes for public endpoint

Debug app:

• Debug with configuration - Launch Server (AZDS)
• Examine generated files (Helm, Dockerfile, azds.yaml)
• Access website URL

Update code - server.js, line 13:

• Stop Debugging
• res.send('Hello from webfrontend in Azure');
• Launch Server (AZDS)
• Test changed in app
• NOTE: Can also Restart Debugging (CTRL+SHIFT+F5) without stopping and relaunching server

Set breakpoint:

• Toggle breakpoint (F9)
• Test app, see breakpoint hit
• Examine vars, callstack
• Toggle breakpoint (F9)
• Continue debugging (F5)

Live reload:

• Stopping Debugging
• Debug with configuration - Attach to a Server (AZDS)
• Edit code, save file
• See changes in browser

Cleanup:

# cd dev-spaces/samples/nodejs/getting-started/webfrontend
azds down
rm .dockerignore azds.yaml Dockerfile
rm -rf charts

Demo 3 - Multiple dependent services

azds space select -n dev/azureuser2 -y

Open follow two projects in VSCode windows:

• samples/nodejs/getting-started/mywebapi
• samples/nodejs/getting-started/webfrontend

In webapi vscode:

• Select from Command Palette: Azure Dev Spaces: Prepare configuration files for Azure Dev Spaces
• Set a breakpoint in the GET / handler
• Debug with F5 - Launch Server (AZDS)

In webfrontend vscode:

• Comment/uncomment sections of code in server.js
• Uncomment var request = require('request');
• Comment the existing code line: app.get('/api', ...
• Uncomment the follow code snippet:

app.get('/api', function (req, res) {
   request({
      uri: 'http://mywebapi',
      headers: {
         /* propagate the dev space routing header */
         'azds-route-as': req.headers['azds-route-as']
      }
   }, function (error, response, body) {
       res.send('Hello from webfrontend and ' + body);
   });
});

Here we are propagating the azds-route-as HTTP header so that we can route to another service running in our child space.

• Set breakpoint in the GET / handler callback
• Debug with F5 - Launch Server (AZDS)

Stop debugging both apps.

Cleanup:

• Run azds down in both app directories (if required).
• In dev-spaces/samples/nodejs/getting-started/webfrontend, run:

rm .dockerignore azds.yaml Dockerfile
rm -rf charts

Commands

• azds show-context
• azds list-uris
• azds list-uris --all
• azds space list
• azds space select -n <space_name> -y
• azds list-up
• azds controller list

Upgrading CLI

Upgrade azds on Linux:

curl -L https://aka.ms/get-azds-linux | bash

References / Credits

• Official Azure Dev Spaces docs - most of this demo is based on the official Azure Dev Spaces docs
• How Routing Works with Azure Dev Spaces