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 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.

    Screenshot of the option to initialize a new app.

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

    Screenshot of selecting the todo-nodejs-mongo sample template.

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.

    Screenshot of option to provision the Azure resources for a new app.

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.

    Screenshot of setting the debug configuration to Debug API.

  4. From the View menu, select Debug Console.

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

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

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

    Screenshot of using cURL to connect to the API server.

  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.

    Screenshot of running a Visual Studio Code Task.

  2. Enter and select Start API and Web

    Screenshot of selecting the option to 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.

    Screenshot of setting the debug configuration to Debug Web.

  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.

    Screenshot of the sample Node JS Mongo DB app.

  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 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.

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

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

    Screenshot of the message indicating the Azure Developer CLI is initialized.

Run and debug

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

  2. Set a breakpoint at line 20.

    Screenshot of the breakpoint set in the sample code.

  3. Press <F5>.

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

    Screenshot of the status bar message indicating the debugger 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

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

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.

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  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.

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. Select the environment.

  7. Select Finish.

Other resources

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