Skip to content

Commit 3719916

Browse files
ghogendenrea
ghogen
and
denrea
authored
Remove VS 2022 version of React tutorial (#14113)
* Remove VS 2022 version of React tutorial * Remove index entry * Add note * Update docs/containers/container-tools-react.md * Remove inoperable moniker-specific redirect * Fix link * Bullet single-step procedure --------- Co-authored-by: Dennis Rea <[email protected]>
1 parent 27e30e6 commit 3719916

File tree

2 files changed

+6
-187
lines changed

2 files changed

+6
-187
lines changed

‎docs/containers/container-tools-react.md

Lines changed: 6 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,34 @@ titleSuffix: ""
44
author: ghogen
55
description: Learn how to create a containerized React SPA app with Visual Studio Container Tools and Docker
66
ms.author: ghogen
7-
ms.date: 05/30/2024
7+
ms.date: 7/24/2025
88
ms.subservice: container-tools
99
ms.topic: quickstart
10+
monikerRange: vs-2019
1011
---
1112

1213
# Quickstart: Use Docker with a React Single-page application in Visual Studio
1314

1415
With Visual Studio, you can easily build, debug, and run containerized ASP.NET Core apps, including those with client-side JavaScript such as React.js single-page application (SPA), and publish them to Azure Container Registry, Docker Hub, Azure App Service, or your own Container Registry. In this article, we publish to Azure Container Registry.
1516

17+
> [!NOTE]
18+
> This article applies to Visual Studio 2019. If you're using Visual Studio 2022, new JavaScript project templates exist which make the scenario much easier. See [Tutorial: Create an ASP.NET Core app with React in Visual Studio - Docker](../javascript/tutorial-asp-net-core-with-react.md?view=vs-2022&preserve-view=true#docker).
19+
1620
## Prerequisites
1721

18-
::: moniker range="vs-2019"
1922
- [Docker Desktop](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
2023
- [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/?cid=learn-onpage-download-cta) with the **Web Development**, **Azure Tools** workload, and/or **.NET Core cross-platform development** workload installed
2124
- [.NET Core 3.1 Development Tools](https://dotnet.microsoft.com/download/dotnet-core/3.1) for development with .NET Core 3.1.
2225
- To publish to Azure Container Registry, an Azure subscription. [Sign up for a free trial](https://azure.microsoft.com/offers/ms-azr-0044p/).
2326
- [Node.js](https://nodejs.org/en/download/)
2427
- For Windows containers, Windows 10 version 1809 or later, to use the Docker images referenced in this article.
25-
::: moniker-end
26-
::: moniker range=">=vs-2022"
27-
- [Docker Desktop](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
28-
- [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/?cid=learn-onpage-download-cta) with the **Web Development**, **Azure Tools** workload, and/or **.NET Core cross-platform development** workload installed
29-
- To publish to Azure Container Registry, an Azure subscription. [Sign up for a free trial](https://azure.microsoft.com/offers/ms-azr-0044p/).
30-
- [Node.js](https://nodejs.org/en/download/)
31-
- For Windows containers, Windows 10 version 1809 or later, to use the Docker images referenced in this article.
32-
33-
::: moniker-end
3428

3529
## Installation and setup
3630

3731
For Docker installation, first review the information at [Docker Desktop for Windows: What to know before you install](https://docs.docker.com/docker-for-windows/install/#what-to-know-before-you-install). Next, install [Docker Desktop](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
3832

3933
## Create a project and add Docker support
4034

41-
::: moniker range="vs-2019"
42-
4335
1. Create a new project using the **ASP.NET Core with React.js** template.
4436

4537
![Screenshot of creating a new React.js project.](media/container-tools-react/vs-2019/create-reactjs-project.png)
@@ -75,7 +67,7 @@ If you're targeting .NET 8 or later, the default Dockerfile that Visual Studio c
7567

7668
For all .NET versions, use the following steps to update the Dockerfile to install Node.js:
7769

78-
1. Add the following lines to install curl, Node.js 14.x, and certain required Node libraries in the container. Be sure to add these lines both in the first section, to add the installation of the Node package manager `npm.exe` to the base image, as well as in the `build` section.
70+
- Add the following lines to install curl, Node.js 14.x, and certain required Node libraries in the container. Be sure to add these lines both in the first section, to add the installation of the Node package manager `npm.exe` to the base image, as well as in the `build` section.
7971

8072
```dockerfile
8173
RUN apt-get update
@@ -194,147 +186,15 @@ Update the Dockerfile by adding the following lines. These lines will copy Node
194186

195187
1. Update the `.dockerignore` file by removing the `**/bin`.
196188

197-
::: moniker-end
198-
::: moniker range=">=vs-2022"
199-
200-
Follow these steps if you're using Visual Studio 2022 version 17.8 or later:
201-
202-
1. Create a new project using the **React and ASP.NET Core** template.
203-
204-
:::image type="content" alt-text="Screenshot of creating a new React and ASP.NET Core project." source="media/container-tools-react/vs-2022/react-and-asp-net-core.png" lightbox="media/container-tools-react/vs-2022/react-and-asp-net-core.png" :::
205-
206-
1. On the **Additional information** screen, select **Enable container support**. Be sure to select **Dockerfile** option, since you'll need to manually make changes to that file.
207-
208-
:::image type="content" alt-text="Screenshot of creating a React and ASP.NET Core project - Additional information screen." source="media/container-tools-react/vs-2022/additional-information-net-8.png" lightbox="media/container-tools-react/vs-2022/additional-information-net-8.png" :::
209-
210-
> [!NOTE]
211-
> In some versions of Visual Studio 2022, this option is not enabled, but you can add that support later.
212-
213-
Visual Studio creates two projects - one for the React JavaScript client code, and another for the ASP.NET Core C# server code.
214-
215-
1. If you didn't add Docker container support during project creation, right-click on the server project node, and choose **Add** > **Docker Support** and be sure to choose the Dockerfile option to create a Dockerfile.
216-
217-
:::image alt-text="Screenshot of Add Docker support menu item." type="content" source="media/container-tools-react/vs-2022/add-docker-support.png" lightbox="media/container-tools-react/vs-2022/add-docker-support.png" :::
218-
219-
1. Select the container type.
220-
221-
Use the following steps for Visual Studio 2022 version 17.0 to 17.7:
222-
223-
1. Create a new project using the **ASP.NET Core with React.js** template.
224-
225-
![Screenshot of creating a new React.js project.](media/container-tools-react/vs-2022/create-reactjs-project.png)
226-
227-
1. On the **Additional information** screen, you can't select **Enable Docker Support**, but don't worry, you can add that support later.
228-
229-
![Screenshot of creating a new React.js project - Additional information screen.](media/container-tools-react/vs-2022/react-project-additional-information.png)
230-
231-
1. Right-click on the project node, and choose **Add** > **Docker Support** to add a Dockerfile to your project.
232-
233-
![Screenshot of Add Docker support menu item.](media/container-tools-react/vs-2022/add-docker-support.png)
234-
235-
1. Select the container type.
236-
237-
:::moniker-end
238-
239189
## Debug
240190

241-
:::moniker range=">=vs-2022"
242-
With Visual Studio 2022 version 17.9 or later and the **React and ASP.NET Core** template that uses `vite.js`, the projects are already configured to start both the client and server projects with debugging support, but you need to set up the right port for the single-page application (SPA) proxy to use to access the ASP.NET Core server running in the container. You can get the host port from the **Containers** window in Visual Studio and set it in the React project as described in [Create a React app - Docker](../javascript/tutorial-asp-net-core-with-react.md#docker).
243-
244-
You can also disable the launch in the browser for the server, which is set up to open with Swagger, which is not required for this scenario. To disable the browser launch, open the **Properties** (**Alt**+**Enter**), go to the **Debug** tab, and click on the link **Open debug launch profiles UI**, and clear the **Launch browser** checkbox.
245-
246-
If you're using an earlier version of Visual Studio 2022, continue reading to set up debugging with the single-page application (SPA) proxy server.
247-
248-
The project uses the SPA Proxy during debugging. See [Improved single-page app (SPA) templates](https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-preview-4/#improved-single-page-app-spa-templates). When debugging, the JavaScript client runs on the host machine, but the ASP.NET Core server code runs in the container. When published, the proxy isn't run, and the client code runs on the same server as the ASP.NET Core code. You already have a Debug profile **Docker* that you can use to debug the server code. To debug the JavaScript client code, you can create an additional debug profile. You also need to start the proxy manually from a command prompt when debugging JavaScript. You can leave it running through multiple debug sessions.
249-
250-
1. Build the project, if not already built.
251-
252-
1. Open a Visual Studio dev command prompt, go to the ClientApp folder in your project, and then give the command, `npm run start`. You should see something like this:
253-
254-
```output
255-
Compiled successfully!
256-
257-
You can now view project3_spa in the browser.
258-
259-
Local: https://localhost:44407
260-
On Your Network: https://192.168.1.5:44407
261-
262-
Note that the development build isn't optimized.
263-
To create a production build, use npm run build.
264-
265-
webpack compiled successfully
266-
```
267-
268-
> [!NOTE]
269-
> Note the local URL. You need to provide this in a debug launch profile, which is stored in your `launchSettings.json` file.
270-
271-
1. Open the dropdown list that contains debug profiles (next to the green triangle icon or **Start** button), and choose **{ProjectName} Debug Properties**, and choose the **Docker** profile.
272-
1. Check the **Environment variables** section and add the following environment variables if not already present:
273-
274-
`ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy`
275-
276-
1. Set the **URL** to `https://localhost:{proxy-port}` where `{proxy-port}` is the port from the proxy server (from step 1).
277-
278-
![Screenshot of Debug Launch Profile settings for client debugging.](./media/container-tools-react/vs-2022/launch-profiles-debugging.png)
279-
280-
This action changes the Docker entry in the `launchSettings.json` file and launches the correct URL for the local proxy running on the host. Find the `launchSettings.json` file in **Solution Explorer** under **Properties**.
281-
282-
1. You should see something like the following code:
283-
284-
```json
285-
"profiles": {
286-
"Docker": {
287-
"commandName": "Docker",
288-
"launchBrowser": true,
289-
"environmentVariables": {
290-
"ASPNETCORE_ENVIRONMENT": "Development",
291-
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
292-
},
293-
"launchUrl": "https://localhost:44407",
294-
"useSSL": true
295-
}
296-
}
297-
```
298-
299-
> [!IMPORTANT]
300-
> Do not set the launch settings option `publishAllPorts` to `true` if you're using a proxy. That option publishes all exposed ports to a random port, which won't work when you set a specific port in the SPA proxy.
301-
302-
1. Open the file *ClientApp/src/setupProxy.js* and change the line that sets the target to use the `localhost` address and port on the container. You can find the port on the **Ports** tab of the **Containers** window.
303-
304-
```javascript
305-
const target = 'https://localhost:{container-port}';
306-
```
307-
308-
If you're using HTTPS, be sure to choose the right port for HTTPS, which is 443 in this tutorial.
309-
310-
1. Launch the app with debugging (**F5**).
311-
312-
![Screenshot of running app.](media/container-tools-react/vs-2022/client-app-page.png)
313-
314-
If you get a build error trying to write the output assemblies, you might have to stop a previously running container to unlock the files.
315-
316-
1. Verify that you can hit a breakpoint in client-side JavaScript code by setting a breakpoint in **ClientApp/src/components/Counter.js** in the **incrementCounter** function, and then try hitting the breakpoint by clicking the **Increment** button on the Counters page.
317-
318-
![Screenshot showing ebugging client-side JavaScript.](./media/container-tools-react/vs-2022/debugging-client-javascript.png)
319-
320-
1. Next, try hitting a breakpoint in the server-side ASP.NET Core code. Set a breakpoint in `WeatherController.cs` in the `Get` method and try appending `/weatherforecast` to the base `localhost` and port URL to activate that code.
321-
322-
![Screenshot showing debugging server-side ASP.NET Core code.](./media/container-tools-react/vs-2022/debugging-aspnet-core.png)
323-
324-
1. If the container port changes, which can happen if you make a significant change, such as updating `launchSettings.json` or updating the debug launch profile in the IDE, you need to update the port in `setupProxy.js` and also restart the proxy. Terminate the current proxy (**Ctrl**+**C** in the command window where it's running), and then restart it using the same command `npm run start`.
325-
326-
:::moniker-end
327-
328-
:::moniker range="vs-2019"
329-
330191
Select **Docker** from the debug dropdown list in the toolbar, and start debugging the app. You might see a message with a prompt about trusting a certificate; choose to trust the certificate to continue. The first time you build, Docker downloads the base images, so it might take a bit longer.
331192

332193
The **Container Tools** option in the **Output** window shows what actions are taking place. You should see the installation steps associated with *npm.exe*.
333194

334195
The browser shows the app's home page.
335196
336197
![Screenshot of running app.](media/container-tools-react/vs-2019/running-app.png)
337-
:::moniker-end
338198
339199
## Containers window
340200
@@ -357,8 +217,6 @@ You can also view the images and inspect information about them. Choose the **Im
357217
358218
Once the develop and debug cycle of the app is completed, you can create a production image of the app.
359219
360-
:::moniker range="vs-2019"
361-
362220
1. Change the configuration dropdown list to **Release** and build the app.
363221
1. Right-click your project in **Solution Explorer** and choose **Publish**.
364222
1. On the publish target dialog, select **Docker Container Registry**.
@@ -391,43 +249,6 @@ Once the develop and debug cycle of the app is completed, you can create a produ
391249
![Screenshot showing successful publish.](media/container-tools-react/vs-2019/publish-finished.png)
392250

393251
To start again using the **Publish** dialog, delete the publish profile by using the **Delete** link on this page, and then choose **Publish** again.
394-
:::moniker-end
395-
396-
:::moniker range=">=vs-2022"
397-
398-
1. Change the configuration dropdown list to **Release** and build the app.
399-
1. Right-click your project in **Solution Explorer** and choose **Publish**.
400-
1. On the publish target dialog, select **Docker Container Registry**.
401-
402-
![Screenshot showing Choose Docker Container Registry.](media/container-tools-react/vs-2022/publish-dialog-1.png)
403-
404-
1. Next, choose **Azure Container Registry**.
405-
406-
![Screenshot showing Choose Azure Container Registry.](media/container-tools-react/vs-2022/publish-dialog-azure-container-registry.png)
407-
408-
1. Choose **Create a new Azure Container Registry**.
409-
1. Fill in your desired values in the **Create new Azure Container Registry** screen.
410-
411-
| Setting | Suggested value | Description |
412-
| ------------ | ------- | -------------------------------------------------- |
413-
| **DNS Prefix** | Globally unique name | Name that uniquely identifies your container registry. |
414-
| **Subscription** | Choose your subscription | The Azure subscription to use. |
415-
| **[Resource Group](/azure/azure-resource-manager/resource-group-overview)** | myResourceGroup | Name of the resource group in which to create your container registry. Choose **New** to create a new resource group.|
416-
| **[SKU](/azure/container-registry/container-registry-skus)** | Standard | Service tier of the container registry |
417-
| **Registry Location** | A location close to you | Choose a Location in a [region](https://azure.microsoft.com/regions/) near you or near other services that use your container registry. |
418-
419-
![Screenshot of Visual Studio's create Azure Container Registry dialog.](media/container-tools-react/vs-2022/azure-container-registry-details.png)
420-
421-
1. Select **Create**, and then select **Finish**.
422-
423-
![Screenshot showing Select or create a new Azure Container Registry.](media/container-tools-react/vs-2022/publish-dialog-2.png)
424-
425-
When the publish process ends, you can review the publish settings, and edit them, when needed, or publish the image again using the **Publish** button.
426-
427-
:::image type="content" alt-text="Screenshot showing successful publish" source="media/container-tools-react/vs-2022/publish-succeeded.png" lightbox="media/container-tools-react/vs-2022/publish-succeeded.png":::
428-
429-
To start again using the **Publish** dialog, delete the publish profile by using the **Delete** link on this page, and then choose **Publish** again.
430-
:::moniker-end
431252

432253
## Next steps
433254

‎docs/containers/index.yml

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ landingContent:
4141
links:
4242
- text: Multicontainer app with Docker Compose
4343
url: tutorial-multicontainer.md
44-
- text: React.js app in a container
45-
url: container-tools-react.md
4644
- text: Debugging Docker apps
4745
url: edit-and-refresh.md
4846

0 commit comments

Comments
 (0)