Run and debug apps enabled for Azure Developer CLI

Run and debug apps on your local machine using the Visual Studio Code extension for Azure Developer CLI (azd). In this guide, you'll use the React Web App with Node.js API and MongoDB on Azure template. You can apply the principles you learn in this article to any of the Azure Developer CLI templates.

Prerequisites

• Install azd
• Run azd with the Node.js template
• Node.js with npm (v 16.13.1 LTS)

Install the Visual Studio Code extension for Azure Developer CLI

Via Visual Studio Code

1. Open Visual Studio Code.

2. From the View menu, select Extensions.

3. In the search field, enter Azure Developer CLI.

4. Select Install.

Via Marketplace

1. Using your browser, go to the Azure Developer CLI - VS Code Extension page.

2. Select Install.

Initialize a new app

1. Create and open a new directory in Visual Studio Code.

2. From the View menu, select Command Palette....

3. Type and pick Azure Developer: init.

   

4. Select the template Azure-Samples/todo-nodejs-mongo.

   

Explore the following files included in the .vscode directory:

File	Description
launch.json	Defines the debug configurations such as Debug Web and Debug API. to see the debug configuration options, select Run from the View menu. The available debug configurations are listed at the top of the pane. To learn more about debugging in Visual Studio Code, see Debugging.
tasks.json	Defines the configurations to start the web or API server. To see these configuration options, open the Command Palette and run Task: run task. To learn more about Visual Studio Code Tasks, see Integrate with External Tools via Tasks.

Note

If you're using the C# SWA-func MS SQL template, you'll need to manually start the Start API task and then Debug API (F5). When asked to pick from a list of running .NET processes, search for the name of your application and select it.

Provision the Azure resources

Before you start debugging, provision the necessary Azure resources.

1. Open Command Palette.

2. Enter Azure Developer: provision Azure resources.

   

Debug an API

The debug configuration Debug API automatically runs the API server and attaches the debugger. To test this pattern, do the following steps:

1. From your project's src/api/src/routes directory, open lists.ts.

2. Set a breakpoint at line 16.

3. In the Activity Bar, select Run and Debug > Debug API debug configuration > Start Debugging arrow.

   

4. From the View menu, select Debug Console.

5. Wait for the message indicating the debugger is listening on port 3100.

   

6. In your preferred terminal shell, enter the following command: curl http://localhost:3100/lists

   

7. When the breakpoint you set earlier is hit, app execution will pause. At this point, you can perform standard debugging tasks, such as:

   • Inspect variables
   • Look at the call stack
   • Set other breakpoints.

8. Press <F5> to continue running the app. The sample app returns an empty list.

Debug a React Frontend app

To use the Debug Web configuration, you must start both:

• The API server
• The development web server

To test this pattern, do the following steps:

1. Open the Command Palette and run Task: Run task.

   

2. Enter and select Start API and Web

   

   You can check if the local web server is running by navigating to the following URL in a web browser: http://localhost:3000.

3. In your project's src/web/src/components directory, open todoItemListPane.tsx.

4. Set a breakpoint on line 150 (the first line of the deleteItems function).

5. In the Activity Bar, select Run and Debug > Debug Web debug configuration > the Start Debugging arrow.

   

6. Running the web app will cause your default browser to open the following URL: http://localhost:3000. You can now debug the app by adding an item, selecting it from the list, and selecting Delete.

   

7. When the breakpoint you set earlier is hit, app execution will pause. At this point, you can do standard debugging tasks, such as:

   • Inspect variables
   • Look at the call stack
   • Set other breakpoints

8. Press <F5> to continue running the app and the selected item will be deleted.

Run and debug apps built on your local machine using Visual Studio and Azure Developer CLI (azd). In this guide, you'll use the React Web App with C# API and MongoDB on Azure template. You can apply the principles you learn in this article to any of the Azure Developer CLI templates.

Prerequisites

• Install azd
• Run azd with the Node.js template
• .NET SDK 6.0

Install and enable the preview feature

1. Install Visual Studio Preview

   Note

   This is different from Visual Studio. If you have the non-preview version of Visual Studio, you still need to install this.

2. Open Visual Studio Preview.

3. From the Tools menu, select Options > Preview Features.

4. Make sure Integration with azd, the Azure Developer CLI is enabled.

   

Open the API solution

1. Open the Todo.Api.sln solution in the /src/api directory.

   If you've enabled the azd integration feature, the azure.yaml file is detected. Visual Studio automatically initializes the app model and runs azd env refresh.

2. Expand Connected Services to see all the dependencies.

   While the web front-end running on Azure App Service isn't part of the API solution, it's detected and included under Service Dependencies

   

Run and debug

1. From your project's src/api directory, open ListController.cs.

2. Set a breakpoint at line 20.

   

3. Press <F5>.

4. Wait for the message indicating the web server is listening on port 3101.

   

5. In your preferred browser, enter the following address: https://localhost:3101/lists

6. When the breakpoint you set earlier is hit, app execution will pause. At this point, you can perform standard debugging tasks, such as:

   • Inspect variables
   • Look at the call stack
   • Set other breakpoints

7. Press <F5> to continue running the app.

   The sample app returns a list (or an empty list [] if you haven't launched the web front-end before):

   [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
   

Other azd integrations

Manage azd environment

To manage the azd environment:

1. Select ... in the upper-right corner of the Service Dependencies pane.

2. Select one of the following options in the dropdown menu:

   • Create a new environment
   • Select and set a specific environment as the current active environment
   • Deprovision an environment

   

Provision environment resources

You can provision Azure resources to your environment.

1. In Connected Services, click the icon at the top right to restore/provision environment resources.

   

2. Confirm the environment name, subscription, and location.

Publish your app

If you make any updates, you can publish your app by doing the following steps:

1. In the Solution Explorer, expand Connected Services.

2. Select Publish.

3. Select Add a publish profile.

4. Select a Target of Azure, and select Next.

5. Select Azure Developer CLI Environment, and select Next.

   

6. Select the environment.

7. Select Finish.

Other resources

• Visual Studio Connected Service
• Overview of Publish Tool in Visual Studio

Request help

For information on how to file a bug, request help, or propose a new feature for the Azure Developer CLI, please visit the troubleshooting and support page.

Next steps

Configure a pipeline and push updates using GitHub Actions