Skip to content

Commit 54b9c61

Browse files
Jak-MSJak-MS
authored
Merge pull request #8374 from MicrosoftDocs/main637963743458820632sync_temp
Repo sync for protected CLA branch
2 parents 539621a + 535a273 commit 54b9c61

File tree

3 files changed

+105
-15
lines changed

3 files changed

+105
-15
lines changed

‎docs/javascript/tutorial-asp-net-core-with-angular.md

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Create an ASP.NET Core app with Angular"
33
description: In this tutorial, you create an app using ASP.NET Core and Angular
4-
ms.date: 06/17/2022
4+
ms.date: 08/17/2022
55
ms.topic: tutorial
66
ms.devlang: javascript
77
author: mikejo5000
@@ -27,9 +27,6 @@ Starting in Visual Studio 2022 Preview 2, you can use the method described in th
2727
- Put the client app in a separate project, outside from the ASP.NET Core project
2828
- Create the client project based on the framework CLI installed on your computer
2929

30-
>[!NOTE]
31-
> Currently, the front-end project must be published manually (not currently supported with the Publish tool). For additional information, see [https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135](https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135).
32-
3330
## Prerequisites
3431

3532
Make sure to install the following:
@@ -124,7 +121,40 @@ Before you start the project, make sure that the port numbers match.
124121
>[!NOTE]
125122
> Check console output for messages, such as a message instructing you to update your version of Node.js.
126123
127-
You should see an Angular app appear, that is populated via the API.
124+
You should see an Angular app appear, that is populated via the API. If you don't see the app, see [Troubleshooting](#troubleshooting).
125+
126+
## Publish the project
127+
128+
Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the Visual Studio Publish tool.
129+
130+
>[!NOTE]
131+
> To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later.
132+
133+
1. In Solution Explorer, right-click the ASP.NET Core project and choose **Add** > **Project Reference**.
134+
135+
1. Select the Angular project and choose **OK**.
136+
137+
1. Right-click the ASP.NET Core project in Solution Explorer and choose **Unload Project**.
138+
139+
This opens the *.csproj* file for the project.
140+
141+
1. In the *.csproj* file, update the project reference and add `<ReferenceOutputAssembly>` with the value set to `false`.
142+
143+
When you've updated the reference, it should look like this (substituting your own project folder and project name).
144+
145+
```xml
146+
<ProjectReference Include="..\angularprojectfolder\angularprojectname.esproj">
147+
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
148+
</ProjectReference>
149+
```
150+
151+
1. Right-click the ASP.NET Core project and choose **Reload Project**.
152+
153+
1. To publish, right click the ASP.NET Core project, choose **Publish**, and select options to match your desired publish scenario, such as Azure, publish to a folder, et al.
154+
155+
The publish process takes more time than it does for just an ASP.NET Core project, since the `npm run build command` gets invoked when publishing.
156+
157+
You can modify the `npm run build` command using the **Production Build Command** in the Angular project properties. To modify it, right-click the Angular project in Solution Explorer and choose **Properties**.
128158

129159
## Troubleshooting
130160

‎docs/javascript/tutorial-asp-net-core-with-react.md

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Create an ASP.NET Core app with React"
33
description: In this tutorial, you create an app using ASP.NET Core and React
4-
ms.date: 06/17/2022
4+
ms.date: 08/17/2022
55
ms.topic: tutorial
66
ms.devlang: javascript
77
author: mikejo5000
@@ -27,9 +27,6 @@ Starting in Visual Studio 2022 Preview 2, you can use the method described in th
2727
- Put the client app in a separate project, outside from the ASP.NET Core project
2828
- Create the client project based on the framework CLI installed on your computer
2929

30-
> [!NOTE]
31-
> Currently, the front-end project must be published manually (not currently supported with the Publish tool). For additional information, see [https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135](https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135).
32-
3330
## Prerequisites
3431

3532
Make sure to install the following:
@@ -122,7 +119,40 @@ Make sure to install the following:
122119
>[!NOTE]
123120
> Check console output for messages, such as a message instructing you to update your version of Node.js.
124121
125-
You should see an React app appear, that is populated via the API.
122+
You should see a React app appear, that is populated via the API. If you don't see the app, see [Troubleshooting](#troubleshooting).
123+
124+
## Publish the project
125+
126+
Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the Visual Studio Publish tool.
127+
128+
>[!NOTE]
129+
> To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later.
130+
131+
1. In Solution Explorer, right-click the ASP.NET Core project and choose **Add** > **Project Reference**.
132+
133+
1. Select the React project and choose **OK**.
134+
135+
1. Right-click the ASP.NET Core project in Solution Explorer and choose **Unload project**.
136+
137+
This opens the *.csproj* file for the project.
138+
139+
1. In the *.csproj* file, update the project reference and add `<ReferenceOutputAssembly>` with the value set to `false`.
140+
141+
When you've updated the reference, it should look like this (substituting your own project folder and project name).
142+
143+
```xml
144+
<ProjectReference Include="..\reactprojectfolder\reactprojectname.esproj">
145+
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
146+
</ProjectReference>
147+
```
148+
149+
1. Right-click the ASP.NET Core project and choose **Reload Project**.
150+
151+
1. To publish, right click the ASP.NET Core project, choose **Publish**, and select options to match your desired publish scenario, such as Azure, publish to a folder, et al.
152+
153+
The publish process takes more time than it does for just an ASP.NET Core project, since the `npm run build command` gets invoked when publishing.
154+
155+
You can modify the `npm run build` command using the **Production Build Command** in the React project properties. To modify it, right-click the React project in Solution Explorer and choose **Properties**.
126156

127157
## Troubleshooting
128158

‎docs/javascript/tutorial-asp-net-core-with-vue.md

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Create an ASP.NET Core app with Vue"
33
description: In this tutorial, you create an app using ASP.NET Core and Vue
4-
ms.date: 06/17/2022
4+
ms.date: 08/17/2022
55
ms.topic: tutorial
66
ms.devlang: javascript
77
author: mikejo5000
@@ -27,9 +27,6 @@ Starting in Visual Studio 2022 Preview 2, you can use the method described in th
2727
- Put the client app in a separate project, outside from the ASP.NET Core project
2828
- Create the client project based on the framework CLI installed on your computer
2929

30-
> [!NOTE]
31-
> Currently, the front-end project must be published manually (not currently supported with the Publish tool). For additional information, see [https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135](https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135).
32-
3330
## Prerequisites
3431

3532
Make sure to install the following:
@@ -132,7 +129,40 @@ Once the project is created, you see some new and modified files:
132129
>[!NOTE]
133130
> Check console output for messages, such as a message instructing you to update your version of Node.js.
134131

135-
You should see the Vue app appear, that is populated via the API.
132+
You should see the Vue app appear, that is populated via the API. If you don't see the app, see [Troubleshooting](#troubleshooting).
133+
134+
## Publish the project
135+
136+
Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the Visual Studio Publish tool.
137+
138+
>[!NOTE]
139+
> To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later.
140+
141+
1. In Solution Explorer, right-click the ASP.NET Core project and choose **Add** > **Project Reference**.
142+
143+
1. Select the Vue project and choose **OK**.
144+
145+
1. Right-click the ASP.NET Core project in Solution Explorer and choose **Unload project**.
146+
147+
This opens the *.csproj* file for the project.
148+
149+
1. In the *.csproj* file, update the project reference and add `<ReferenceOutputAssembly>` with the value set to `false`.
150+
151+
When you've updated the reference, it should look like this (substituting your own project folder and project name).
152+
153+
```xml
154+
<ProjectReference Include="..\vueprojectfolder\vueprojectname.esproj">
155+
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
156+
</ProjectReference>
157+
```
158+
159+
1. Right-click the ASP.NET Core project and choose **Reload Project**.
160+
161+
1. To publish, right click the ASP.NET Core project, choose **Publish**, and select options to match your desired publish scenario, such as Azure, publish to a folder, et al.
162+
163+
The publish process takes more time than it does for just an ASP.NET Core project, since the `npm run build` command gets invoked when publishing.
164+
165+
You can modify the `npm run build` command using the **Production Build Command** in the Vue project properties. To modify it, right-click the Vue project in Solution Explorer and choose **Properties**.
136166

137167
## Troubleshooting
138168

0 commit comments

Comments
 (0)