You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
RUN dotnet restore "ProjectSPA1/ProjectSPA1.csproj"
230
229
COPY . .
231
-
WORKDIR"/src/WebApplicationReact1"
232
-
RUN dotnet build "WebApplicationReact1.csproj" -c Release -o /app/build
230
+
WORKDIR"/src/ProjectSPA1"
231
+
RUN dotnet build "ProjectSPA1.csproj" -c Release -o /app/build
233
232
234
233
FROM build AS publish
235
-
RUN dotnet publish "WebApplicationReact1.csproj" -c Release -o /app/publish
234
+
RUN dotnet publish "ProjectSPA1.csproj" -c Release -o /app/publish
236
235
237
236
FROM base AS final
238
237
WORKDIR /app
239
238
COPY --from=publish /app/publish .
240
-
ENTRYPOINT ["dotnet", "WebApplicationReact1.dll"]
239
+
ENTRYPOINT ["dotnet", "ProjectSPA1.dll"]
241
240
```
242
241
243
242
:::moniker-end
244
243
:::moniker range=">=vs-2022"
245
244
```Dockerfile
246
-
# escape=`
245
+
#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
246
+
247
247
#Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
248
248
#For more information, please see https://aka.ms/containercompat
249
-
FROM mcr.microsoft.com/powershell AS downloadnodejs
249
+
# escape=`
250
+
FROM mcr.microsoft.com/powershell:nanoserver-1809 AS downloadnodejs
RUN dotnet restore "Project1-SPA-Windows/Project1-SPA-Windows.csproj"
267
266
COPY . .
268
-
WORKDIR"/src/WebApplicationReact1"
269
-
RUN dotnet build "WebApplicationReact1.csproj" -c Release -o /app/build
267
+
WORKDIR"/src/Project1-SPA-Windows"
268
+
RUN dotnet build "Project1-SPA-Windows.csproj" -c Release -o /app/build
270
269
271
270
FROM build AS publish
272
-
RUN dotnet publish "WebApplicationReact1.csproj" -c Release -o /app/publish
271
+
RUN dotnet publish "Project1-SPA-Windows.csproj" -c Release -o /app/publish /p:UseAppHost=false
273
272
274
273
FROM base AS final
275
274
WORKDIR /app
276
275
COPY --from=publish /app/publish .
277
-
ENTRYPOINT ["dotnet", "WebApplicationReact1.dll"]
276
+
ENTRYPOINT ["dotnet", "Project1-SPA-Windows.dll"]
278
277
```
279
278
280
279
::: moniker-end
@@ -284,76 +283,103 @@ Update the Dockerfile by adding the following lines. This will copy node and npm
284
283
## Debug
285
284
286
285
:::moniker range=">=vs-2022"
287
-
Set the launch properties for debugging. You can use the dropdown menu next to the Start button, and choose **Debug properties**. In the **Launch profile** dialog comes up, choose **Docker**.
286
+
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 is not 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'll also need to start the proxy manually from a command prompt when debugging JavaScript. You can leave it running through multiple debug sessions.
287
+
288
+
1. Build the project, if not already built.
288
289
289
-
Set **Environment variables** to the following. Your SSL port number should match the HTTPS **Host Port** from the **Ports** tab of the **Containers** window.
290
+
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:
Note the local URL. You'll need to provide this in a debug launch profile, which is stored in your *launchSettings.json* file.
307
+
308
+
1. Open the dropdown that contains debug profiles (next to the green triangle icon or **Start** button), and choose **{ProjectName} Debug Properties**, and choose the **Docker** profile.
309
+
1. Check the **Environment variables** section and add the following environment variables if not already present:
This action changes the Docker entry in the *launchSettings.json* file and enables the SPA Proxy to work correctly. Find the *launchSettings.json* file in **Solution Explorer** under **Properties**. You should see something like this, but with your app's assigned port numbers:
Select **Docker**from the debug drop-down 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.
316
+
1. Set the **URL** to `https://localhost:{proxy-port}` where `{proxy-port}` is the port from the proxy server (from step 1).
317
317
318
-
:::moniker range=">=vs-2022"
319
-
The project uses the SPA Proxy. If the browser loads the front page before the proxy is ready, you might see a page that says you will automatically redirected when the proxy is ready.
318
+
320
319
321
-
If the page never redirects, check that you are able to run the proxy. 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:
320
+
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**.
> Do not set the launch settings option `publishAllPorts` to `true` if you are 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.
i ｢wds｣: Project is running at https://0.0.0.0:44445/
333
-
i ｢wds｣: webpack output is served from
334
-
i ｢wds｣: Content not from webpack is served from c:\Users\ghogen\source\repos\ProjectSpa1\ProjectSpa1\ClientApp\public
335
-
i ｢wds｣: 404s will fallback to /
336
-
Starting the development server...
337
-
Compiled successfully!
338
-
```
342
+
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.
343
+
344
+
```JavaScript
345
+
consttarget='https://localhost:{container-port}';
346
+
```
347
+
348
+
If you're using HTTPS, be sure to choose the right port for HTTPS.
349
+
350
+
1. Launch the app with debugging (**F5**).
351
+
352
+
353
+
354
+
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.
355
+
356
+
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.
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.
361
+
362
+
363
+
364
+
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'll 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`.
339
365
340
-
If that succeeds, try starting the app again in the browser. If it doesn't succeed, check again that everything is correct in your *launchSettings.json* file.
341
366
:::moniker-end
342
367
368
+
:::moniker range="vs-2019"
369
+
370
+
Select **Docker** from the debug drop-down 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.
371
+
343
372
The **Container Tools** option in the **Output** window shows what actions are taking place. You should see the installation steps associated with *npm.exe*.
344
373
345
374
The browser shows the app's home page.
346
375
347
-
::: moniker range="vs-2019"
348
-
349
-
::: moniker-end
350
-
::: moniker range=">=vs-2022"
351
-
352
-
::: moniker-end
353
-
376
+
377
+
:::moniker-end
354
378
355
379
:::moniker range=">=vs-2019"
356
380
381
+
## Containers window
382
+
357
383
Open the **Containers** tool window. You can find it on the menu under **View** > **Other Windows** > **Containers**, or press **Ctrl**+**Q** and start typing `containers` in the search box, then choose **Containers** window from the results. When the window comes up, dock it on the bottom under the editor pane.
358
384
359
385
The **Containers** window shows the running containers and lets you view information about them. You can view the environment variables, labels, ports, volumes, the file system, and logs. The toolbar buttons let you create a terminal (shell prompt) inside the container, attach the debugger, or prune unused containers. See [Use the Containers window](view-and-diagnose-containers.md).
@@ -375,7 +401,6 @@ You can also view the images and inspect information about them. Choose the **Im
375
401
376
402
Once the develop and debug cycle of the app is completed, you can create a production image of the app.
377
403
378
-
379
404
:::moniker range="vs-2019"
380
405
381
406
1. Change the configuration drop-down to **Release** and build the app.
0 commit comments