Hướng dẫn tạo project front end trong visual studio 2023

Hãy nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, bản cập nhật bảo mật và hỗ trợ kỹ thuật.

Set multiple startup projects

  • Bài viết
  • 11/03/2023

Trong bài viết này

Applies to:

Hướng dẫn tạo project front end trong visual studio 2023
Visual Studio
Hướng dẫn tạo project front end trong visual studio 2023
Visual Studio for Mac
Hướng dẫn tạo project front end trong visual studio 2023
Visual Studio Code

Visual Studio allows you to specify how more than one project is run when you press F5 (Start with Debugging), or Ctrl+F5 (Start without debugging), or use the toolbar button to launch your application. In this way, you could start multiple sites, apps, or services that depend on each other to work correctly during a debug session or just running and testing locally.

Some project templates include multiple projects that are already configured to all be started when launched; for example, the React and ASP.NET Core project type includes both a client-side JavaScript project and a server-side ASP.NET Core project that both start when launched.

To set multiple startup projects

  1. In Solution Explorer, select the solution (the top node).
  2. Choose the solution node's context (right-click) menu and then choose Properties. The Solution Property Pages dialog box appears.
    Hướng dẫn tạo project front end trong visual studio 2023
  3. Expand the Common Properties node, and choose Startup Project.
  4. Choose the Multiple Startup Projects option and set the appropriate actions.

With Docker Compose

When you're using Docker Compose to launch containerized projects on a local machine, you use a different method (launch profiles) to start multiple projects.

The following example shows a solution WebFrontEndA with three projects, a front-end web site, a Web API project, and a Docker Compose project. The following screenshot shows how to start two of the three projects, one with debugging and one without:

Hướng dẫn tạo project front end trong visual studio 2023

In this example and any other Docker Compose scenario, you choose docker-compose as the single startup project, but then you'll use a different way of specifying which projects or services to start. You'll use a Docker Compose launch profile to determine what services to start, and whether or not to attach the debugger, and there's a different dialog in Visual Studio for configuring it. See Start a subset of services. The Solution Property Pages dialog is only used for non-containerized solutions, or when you are not using Docker Compose to manage startup.

Hãy nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, bản cập nhật bảo mật và hỗ trợ kỹ thuật.

Create a canvas app front end for your ASP.NET web API (preview)

  • Bài viết
  • 06/15/2023

Trong bài viết này

[This article is pre-release documentation and is subject to change.]

Power Platform enables web API developers to quickly build mobile or web applications using a Power Apps canvas app as a front end. With the Power Platform connected service in Visual Studio 2022, ASP.NET web API developers can easily create a custom connector for use with Power Apps and Power Automate.

You can use Visual Studio to create a canvas app before you publish your API to a public endpoint. Dev tunnels create an ad-hoc connection between your web API running locally and your Power Apps. You can use them to locally test and debug your web API in the context of the Power Platform in real-time (inner loop).

This tutorial uses the sample ASP.NET Weather web API to add a connection to a canvas app. It's based on the Create a web API with ASP.NET Core tutorial.

Prerequisites

  • Visual Studio 2022 version 17.6 Preview 2 with the ASP.NET and web development workload installed. You need to be signed in to Visual Studio to create and use dev tunnels. The feature isn't available in Visual Studio for Mac.
  • A Power Platform developer environment with permission to create custom connectors

Create an ASP.NET project in Visual Studio

  1. Create an ASP.NET Core web API project.
  2. Select Next.
  3. Enter WeatherSample for the Project name, and then select Next.
  4. Select Create.

The WeatherSample project contains an example controller for a RESTful HTTP service.

Add Power Platform as a connected service

  1. In Solution Explorer, right-click the Connected Services node and select Manage Connected Services from the context menu.
  2. In the Connected Services tab, select the + icon for Service Dependencies.
  3. On the Add dependency dialog, type Power Platform into the search box.
  4. Select Microsoft Power Platform, and then select Next. If you aren't signed in already, sign into your Microsoft Power Platform account. If you don't have a Power Platform account, Create a Developer Environment.
  5. In the Connect to Microsoft Power Platform screen: select your developer environment.
  6. In Custom connectors name, the value WeatherSample_Connector should already be set.
  7. In Select a public dev tunnel, select the + icon.
    1. In the field Name, type SampleTunnel.
    2. Select Tunnel Type: Persistent.
    3. Select Access : public.
    4. Select OK.
  8. Select Finish
  9. Once the connected service is configured, select Close.

Create a canvas app with the custom connector

When Visual Studio runs a web app and a tunnel is active, the web browser opens to a tunnel URL instead of a localhost URL.

  1. Run your Visual Studio solution and start debugging.
  2. When the browser opens, a warning page opens with the first request sent to the tunnel URL. Select Continue.
  3. With the web API running, open Power Apps in a new browser tab.
  4. Select your developer environment in the upper-right corner.
  5. Create a blank canvas app with Phone as the format.
  6. In the top menu, select Add data.

Search for and select the WeatherSample_Connector, and then select Connect. More information: Add connections to your canvas app