JSTS update for React, Angular, Vue (#8457)

* F1 keyword edits

* tweak

* tweak

* tweak

* unit testing updates

* freshness checks

* freshness checks

* Updated freshness

* Visualizer updates

* minor edits

* link fix

* Angular project

* Angular updates

* Vue.js project

* edits

* edits

* fixed blocking issues

Author: Mikejo5000

docs/javascript/TOC.yml

@@ -14,6 +14,12 @@
     href: ../ide/quickstart-nodejs.md?toc=%252fvisualstudio%252fjavascript%252ftoc.json
   - name: Create a Vue.js project
     href: quickstart-vuejs-with-nodejs.md
+  - name: Create a React app
+    href: tutorial-create-react-app.md
+  - name: Create an Angular app
+    href: tutorial-create-angular-app.md
+  - name: Create a Vue.js app
+    href: tutorial-create-vue-app.md
 - name: Tutorials
   items:
   - name: Create a Node.js app with Express

docs/javascript/create-application-with-vuejs.md

@@ -12,6 +12,7 @@ dev_langs:
   - JavaScript
 ms.workload:
   - "nodejs"
+monikerRange: '<= vs-2019'
 ---
 
 # Create a Vue.js application using Node.js Tools for Visual Studio

docs/javascript/media/vs-2022/angular-additional-info.png

@@ -12,6 +12,7 @@ dev_langs:
   - JavaScript
 ms.workload:
   - "nodejs"
+monikerRange: '<= vs-2019'
 ---
 # Quickstart: Use Visual Studio to create your first Vue.js app
 

docs/javascript/media/vs-2022/angular-choose-debugger.png

@@ -36,11 +36,11 @@ Make sure to have the following installed:
 
 1. In the New Project Dialog, select **Create a new project**. 
 
-   :::image type="content" source="media/vs-2022/asp-net-core-create-new-project.png" alt-text="Create a new project":::
+   :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Create a new project":::
 
 1. Search for Angular in the search bar at the top and then select **Standalone Angular Template**.
 
-   :::image type="content" source="media/vs-2022/asp-net-core-with-angular-choose-template.png" alt-text="Choose a template":::
+   :::image type="content" source="media/vs-2022/angular-choose-template.png" alt-text="Choose a template":::
 
 1. Give your project and solution a name. When you get to the **Additional information** window, be sure to check the **Add integration for Empty ASP.NET Web API Project** option. This option adds files to your Angular template so that it can be hooked up later with the ASP.NET Core project.
 

docs/javascript/media/vs-2022/asp-net-core-with-angular-choose-template.png renamed to docs/javascript/media/vs-2022/angular-choose-template.png

@@ -22,7 +22,7 @@ Currently, Visual Studio includes ASP.NET Core Single Page Application (SPA) tem
 Starting in Visual Studio 2022 Preview 2, you can use the method described in this article to create ASP.NET Core Single Page Applications that:
 
 - Put the client app in a separate project, outside from the ASP.NET Core project
-- Create the client project based on the framework cli installed on your computer
+- Create the client project based on the framework CLI installed on your computer
 
 ## Prerequisites
 
@@ -35,11 +35,11 @@ Make sure to have the following installed:
 
 1. In the New Project Dialog, select **Create a new project**. 
 
-   :::image type="content" source="media/vs-2022/asp-net-core-create-new-project.png" alt-text="Create a new project":::
+   :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Create a new project":::
 
 1. Search for React in the search bar at the top and then select **Standalone JavaScript React Template**. (The standalone TypeScript React Template is not currently supported in this tutorial.)
 
-   :::image type="content" source="media/vs-2022/asp-net-core-with-react-choose-template.png" alt-text="Choose a template":::
+   :::image type="content" source="media/vs-2022/react-choose-template.png" alt-text="Choose a template":::
 
 1. Give your project and solution a name. When you get to the **Additional information** window, be sure to check the **Add integration for Empty ASP.NET Web API Project** option. This option adds files to your React template so that it can be hooked up later with the ASP.NET Core project.
 

docs/javascript/media/vs-2022/asp-net-core-create-new-project.png renamed to docs/javascript/media/vs-2022/create-new-project.png

@@ -11,12 +11,16 @@ dev_langs:
   - JavaScript
 ms.workload:
   - "nodejs"
-monikerRange: '<= vs-2019'
 ---
 # Tutorial: Create an ASP.NET Core app with TypeScript in Visual Studio
 
 In this tutorial for Visual Studio development ASP.NET Core and TypeScript, you create a simple web application, add some TypeScript code, and then run the app.
 
+::: moniker range=">=vs-2022"
+
+Starting in Visual Studio 2022, see [Create an ASP.NET Core app with Angular in Visual Studio](../javascript/tutorial-asp-net-core-with-angular.md) to create an ASP.NET Core app with Angular and TypeScript.
+::: moniker-end
+
 ::: moniker range="vs-2017"
 
 If you haven't already installed Visual Studio, go to the [Visual Studio downloads](https://visualstudio.microsoft.com/vs/older-downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=vs+2017+download) page to install it for free.

docs/javascript/media/vs-2022/react-additional-info.png

@@ -0,0 +1,65 @@
+---
+title: "Create an Angular app"
+description: In this tutorial, learn how to create a simple Angular application in Visual Studio.
+ms.date: 07/30/2021
+ms.custom: vs-acquisition
+ms.topic: tutorial
+ms.devlang: javascript
+author: mikejo5000
+ms.author: mikejo
+manager: jmartens
+dev_langs:
+  - JavaScript
+ms.workload:
+  - "nodejs"
+monikerRange: '>= vs-2022'
+---
+# Create an Angular app
+
+In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple Angular frontend web application.
+
+## Prerequisites
+
+Make sure to have the following installed:
+
+- npm ([https://www.npmjs.com/](https://www.npmjs.com/)) 
+- Angular CLI ([https://angular.io/cli](https://angular.io/cli))
+  This can be the version of your choice
+
+## Create your app
+
+1. In the New Project Dialog, select **Create a new project**.
+
+   :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Create a new project":::
+
+1. Search for Angular in the search bar at the top and then select **Standalone Angular Template**.
+
+   :::image type="content" source="media/vs-2022/angular-choose-template.png" alt-text="Choose a template":::
+
+1. Give your project and solution a name. 
+
+   When you get to the Additional information window be sure NOT to check the **Add integration for Empty ASP.NET Web API Project** option. This option adds files to your Angular template so that it can be hooked up with the ASP.NET Core project, if an ASP.NET Core project is added.
+
+   :::image type="content" source="media/vs-2022/angular-additional-info.png" alt-text="Additional information":::
+
+## Set the project properties
+
+1. In Solution Explorer, right-click the Angular project, select **Properties**, and then go the **Debugging** section.
+
+1. Change the Debugger to launch to the **launch.json** option.
+ 
+   :::image type="content" source="media/vs-2022/angular-choose-debugger.png" alt-text="Choose the debugger (launch.json)":::
+
+## Build Your Project
+
+Choose **Build** > **Build Solution**  to build the project.
+
+Note, the initial build may take a while, as the Angular CLI will run the npm install command.
+
+## Start Your Project
+
+Press **F5** or select the **Start** button at the top of the window. You see a command prompt appear:
+
+- The Angular CLI running the ng start command
+
+Next, you should see the base Angular app appear!

docs/javascript/media/vs-2022/react-choose-debugger.png

@@ -0,0 +1,64 @@
+---
+title: "Create a React app"
+description: In this tutorial, learn how to create a simple React application in Visual Studio.
+ms.date: 07/30/2021
+ms.custom: vs-acquisition
+ms.topic: tutorial
+ms.devlang: javascript
+author: mikejo5000
+ms.author: mikejo
+manager: jmartens
+dev_langs:
+  - JavaScript
+ms.workload:
+  - "nodejs"
+monikerRange: '>= vs-2022'
+---
+# Create a React app
+
+In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple React frontend web application.
+
+## Prerequisites
+
+Make sure to have the following installed:
+
+- npm ([https://www.npmjs.com/](https://www.npmjs.com/)) 
+- npx ([https://www.npmjs.com/package/npx](https://www.npmjs.com/package/npx))
+
+## Create your app
+
+1. In the New Project Dialog, select **Create a new project**.
+
+   :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Create a new project":::
+
+1. Search for React in the search bar at the top and then select **Standalone JavaScript React Template** or **Standalone TypeScript React Template**, based on your preference.
+
+   :::image type="content" source="media/vs-2022/react-choose-template.png" alt-text="Choose a template":::
+
+1. Give your project and solution a name. 
+
+   If you previously selected Standalone JavaScript React Template, when you get to the Additional information window be sure NOT to check the **Add integration for Empty ASP.NET Web API Project** option. This option adds files to your React template so that it can be hooked up with the ASP.NET Core project, if an ASP.NET Core project is added.
+
+   :::image type="content" source="media/vs-2022/react-additional-info.png" alt-text="Additional information":::
+
+   Please note that creation of the React project takes a moment because the create-react-app command that runs at this time also runs the npm install command
+
+## Set the project properties
+
+1. In Solution Explorer, right-click the React project, select **Properties**, and then go the **Debugging** section.
+
+1. Change the Debugger to launch to the **launch.json** option.
+ 
+   :::image type="content" source="media/vs-2022/react-choose-debugger.png" alt-text="Choose the debugger (launch.json)":::
+
+## Build Your Project
+
+Choose **Build** > **Build Solution**  to build the project.
+
+## Start Your Project
+
+Press **F5** or select the **Start** button at the top of the window. You see a command prompt appear:
+
+- npm running the react-scripts start command
+
+Next, you should see the base React app appear!

docs/javascript/media/vs-2022/asp-net-core-with-react-choose-template.png renamed to docs/javascript/media/vs-2022/react-choose-template.png

@@ -0,0 +1,59 @@
+---
+title: "Create a Vue.js app"
+description: In this tutorial, learn how to create a simple Vue.js application in Visual Studio.
+ms.date: 07/30/2021
+ms.custom: vs-acquisition
+ms.topic: tutorial
+ms.devlang: javascript
+author: mikejo5000
+ms.author: mikejo
+manager: jmartens
+dev_langs:
+  - JavaScript
+ms.workload:
+  - "nodejs"
+monikerRange: '>= vs-2022'
+---
+# Create a Vue.js app
+
+In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple Vue.js frontend web application.
+
+## Prerequisites
+
+Make sure to have the following installed:
+
+- npm ([https://www.npmjs.com/](https://www.npmjs.com/)) 
+- Vue.js ([Installation | Vue.js (vuejs.org)](https://v3.vuejs.org/guide/installation.html#npm))
+- Vue.js CLI ([(Installation | Vue.js (vuejs.org)](https://v3.vuejs.org/guide/installation.html#cli))
+
+## Create your app
+
+1. In the New Project Dialog, select **Create a new project**.
+
+   :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Create a new project":::
+
+1. Search for Vue in the search bar at the top and then select **Standalone JavaScript Vue Template** or **Standalone TypeScript Vue Template**, based on your preference.
+
+   :::image type="content" source="media/vs-2022/vue-choose-template.png" alt-text="Choose a template":::
+
+1. Give your project and solution a name. 
+
+## Set the project properties
+
+1. In Solution Explorer, right-click the Vue.js project, select **Properties**, and then go the **Debugging** section.
+
+1. Change the Debugger to launch to the **launch.json** option.
+ 
+   :::image type="content" source="media/vs-2022/vue-choose-debugger.png" alt-text="Choose the debugger (launch.json)":::
+
+## Build Your Project
+
+Choose **Build** > **Build Solution**  to build the project.
+
+## Start Your Project
+
+Press **F5** or select the **Start** button at the top of the window. You see a command prompt appear:
+
+- npm running the vue-cli-service start command
+
+Next, you should see the base Vue.js app appear!