{"id":22348611,"url":"https://github.com/mvelosop/explore-docker-vscode","last_synced_at":"2025-07-30T04:33:46.517Z","repository":{"id":40874437,"uuid":"256277592","full_name":"mvelosop/explore-docker-vscode","owner":"mvelosop","description":"Very simple Web App + REST API applications, to explore development and containerization using VS Code","archived":false,"fork":false,"pushed_at":"2022-12-08T10:27:12.000Z","size":1024,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-19T19:52:15.370Z","etag":null,"topics":["csharp","docker","docker-compose","netcore31","vscode"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mvelosop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-16T17:00:35.000Z","updated_at":"2025-02-06T04:21:13.000Z","dependencies_parsed_at":"2023-01-25T09:45:55.347Z","dependency_job_id":null,"html_url":"https://github.com/mvelosop/explore-docker-vscode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mvelosop/explore-docker-vscode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvelosop%2Fexplore-docker-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvelosop%2Fexplore-docker-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvelosop%2Fexplore-docker-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvelosop%2Fexplore-docker-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvelosop","download_url":"https://codeload.github.com/mvelosop/explore-docker-vscode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvelosop%2Fexplore-docker-vscode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267809734,"owners_count":24147522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csharp","docker","docker-compose","netcore31","vscode"],"created_at":"2024-12-04T10:24:06.176Z","updated_at":"2025-07-30T04:33:46.050Z","avatar_url":"https://github.com/mvelosop.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# explore-docker-vscode\n\nIn this repo we explore Docker-related development with VS Code.\n\n- [Overview](#overview)\n- [Details](#details)\n  - [1 - Set up the environment](#1---set-up-the-environment)\n  - [2 - Create the base applications](#2---create-the-base-applications)\n  - [3 - Run both applications from VS Code](#3---run-both-applications-from-vs-code)\n    - [Configure ports for WebApp and WebApi](#configure-ports-for-webapp-and-webapi)\n    - [Install build and debug assets](#install-build-and-debug-assets)\n    - [Update `tasks.json`](#update-tasksjson)\n    - [Update `launch.json`](#update-launchjson)\n  - [4 - Update the WebApp to consume the WebApi endpoint](#4---update-the-webapp-to-consume-the-webapi-endpoint)\n  - [5 - Containerize the applications with docker-compose](#5---containerize-the-applications-with-docker-compose)\n  - [6 - Debugging the multi-container application with docker-compose](#6---debugging-the-multi-container-application-with-docker-compose)\n- [Additional resources](#additional-resources)\n\n## Overview\n\nIn this repo we create a trivial application consisting of a Web Api back-end and a Web App front-end, to focus on the docker-related tasks when using VS Code.\n\nWe're going to:\n\n1. Set up the environment.\n2. Create the base Web + API applications.\n3. Have both apps running at the same time from VS Code.\n4. Update the WebApp to consume the WebApi endpoint.\n5. Containerize the applications with docker-compose.\n6. Debugging the containerized application.\n\n## Details\n\n### 1 - Set up the environment\n\n- Install the [Microsoft C# extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp).\n- Install the [Microsoft Docker extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker).\n- Install [Docker Desktop](https://docs.docker.com/get-docker/).\n\nSee the [Working with C#](https://code.visualstudio.com/docs/languages/csharp) documentation page for details.\n\n### 2 - Create the base applications\n\nCreate `src`, `src\\WebApi`, and `src\\WebApp` folders\n\n```powershell\nmd src\nmd src/WebApi\nmd src/WebApp\n```\n\nCreate `WebApi` and `WebApp` .NET Core applications using default dotnet templates.\n\n```powershell\ncd src\ndotnet new webapi --name WebApi --output WebApi\ndotnet new webapp --name WebApp --output WebApp\n```\n\nCreate a solution file in the src folder and add both projects to the solution.\n\n```powershell\ndotnet new sln -n explore-docker-vscode\ndotnet sln explore-docker-vscode.sln add WebApi/WebApi.csproj\ndotnet sln explore-docker-vscode.sln add WebApp/WebApp.csproj\n```\n\nThe project should look similar to this:\n\n![](media/initial-project-setup.png)\n\nIn this case the repo was created first in GitHub, that's why it has the `.gitignore`, `LICENSE` and `README.md` files.\n\n### 3 - Run both applications from VS Code\n\n#### Configure ports for WebApp and WebApi\n\nUpdate the **`applicationUrl`** properties in `Properties/launchSettings.json` for both applications so they use different ports, as shown next:\n\nFor the **`WebApi`** application:\n\n```json\n{\n  //...\n    \"WebApi\": {\n      \"commandName\": \"Project\",\n      \"launchBrowser\": true,\n      \"launchUrl\": \"weatherforecast\",\n      \"applicationUrl\": \"https://localhost:51443;http://localhost:51080\",\n      \"environmentVariables\": {\n        \"ASPNETCORE_ENVIRONMENT\": \"Development\"\n      }\n    }\n  }\n}\n```\n\nFor the **`WebApp`** application:\n\n```json\n{\n  //...\n    \"WebApp\": {\n      \"commandName\": \"Project\",\n      \"launchBrowser\": true,\n      \"applicationUrl\": \"https://localhost:50443;http://localhost:50080\",\n      \"environmentVariables\": {\n        \"ASPNETCORE_ENVIRONMENT\": \"Development\"\n      }\n    }\n  }\n}\n```\n\n#### Install build and debug assets\n\nOpen the `src/WebApi/Program.cs` file, to get prompted to install the build and debug assets:\n\n![](media/install-build-and-debug-assets.png)\n\nRespond with `Yes`. If you miss the prompt you can run the command:\n\n`.NET: Generate Assets for Build and Debug`:\n\n![](media/install-build-and-debug-assets-manually.png)\n\nThen choose the `WebApi` project at the prompt, to create the initial `tasks.json` and `launch.json` files:\n\n![](media/vscode-build-and-debug-assets-project-prompt.png)\n\n#### Update `tasks.json`\n\nConfigure the `tasks.json` file in the `.vscode` folder so they work on the solution folder, that is, change the lines that show:\n\n```json\n\"${workspaceFolder}/src/WebApi/WebApi.csproj\",\n```\n\nTo point to the solution folder:\n\n```json\n\"${workspaceFolder}/src\",\n```\n\nThe above change will make the commands work on the solution, instead of just one project.\n\n#### Update `launch.json`\n\nWe'll now update the `launch.json` file to start both projects at the same time.\n\nAdd the `uriFormat` configuration to the `serverReady` section of the API project, to set the startup page for the `WebApi`:\n\n```json\n\"serverReadyAction\": {\n    \"action\": \"openExternally\",\n    \"uriFormat\": \"%s/WeatherForecast\",\n    \"pattern\": \"^\\\\s*Now listening on:\\\\s+(https?://\\\\S+)\"\n},\n```\n\nCopy the `.NET Core Launch (API)` configuration as `.NET Core Launch (Web)`, update the folder and .dll files to the `WebApp` project, and delete the `uriFormat` parameter, so you get to something like this:\n\n```json\n{\n    \"name\": \".NET Core Launch (Web)\",\n    \"type\": \"coreclr\",\n    \"request\": \"launch\",\n    \"preLaunchTask\": \"build\",\n    // If you have changed target frameworks, make sure to update the program path.\n    \"program\": \"${workspaceFolder}/src/WebApp/bin/Debug/netcoreapp3.1/WebApp.dll\",\n    \"args\": [],\n    \"cwd\": \"${workspaceFolder}/src/WebApp\",\n    \"stopAtEntry\": false,\n    // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser\n    \"serverReadyAction\": {\n        \"action\": \"openExternally\",\n        \"pattern\": \"^\\\\s*Now listening on:\\\\s+(https?://\\\\S+)\"\n    },\n    \"env\": {\n        \"ASPNETCORE_ENVIRONMENT\": \"Development\"\n    },\n    \"sourceFileMap\": {\n        \"/Views\": \"${workspaceFolder}/Views\"\n    }\n},\n```\n\nAdd a `compounds` object to start both `WebApi` and `WebApp` together, right after the `configurations` object. Actually, the VS Code extension should suggest the \"compounds\" object once you begin to write it:\n\n```json\n\"compounds\": [\n    {\n        \"name\": \"ASP.NET Core API+Web\",\n        \"configurations\": [\n            \".NET Core Launch (API)\",\n            \".NET Core Launch (Web)\"\n        ]\n    }\n]\n```\n\nAt this point you should be able to run both applications by selecting the debugging side panel and choosing the just created \"**ASP.NET Core API+Web**\" configuration:\n\n![](media/vscode-run-both-server-and-client-applications.png)\n\nBoth applications should be running with the corresponding browser windows open:\n\n- **WebApp**: \u003chttps://localhost:50433/\u003e\n- **WebApi**: \u003chttps://localhost:51443/WeatherForecast\u003e\n\nAlso, both applications should be visible in the debugging panel:\n\n![](media/vscode-server-and-client-appications-debugging-panel.png)\n\n**IMPORTANT**: keep in mind that now you have **two applications** to stop.\n\n### 4 - Update the WebApp to consume the WebApi endpoint\n\nWe won't go into the change details because they are pretty standard and very basic, and you can see them in the repo.\n\nAnyway these are changed files, with links to the source code:\n\n- **src/WebApp**\n  - [Startup.cs](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/Startup.cs)\n  - [WebApp.csproj](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/WebApp.csproj)\n- **src/WebApp/Pages**\n  - [Index.cshtml](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/Pages/Index.cshtml)\n- **src/WebApp/Pages/WeatherForecast**\n  - [Index.cshtml](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/Pages/WeatherForecast/Index.cshtml)\n  - [Index.cshtml.cs](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/Pages/WeatherForecast/Index.cshtml.cs)\n  - [WeatherForecast.cs](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/Pages/WeatherForecast/WeatherForecast.cs)\n  - [WeatherForecastApiClient.cs](https://github.com/mvelosop/explore-docker-vscode/blob/master/src/WebApp/Pages/WeatherForecast/WeatherForecastApiClient.cs)\n\nYou should now be able to run both applications and get views like these:\n\n- **Web App Home page** - \u003chttps://localhost:50433/\u003e\n\n  ![Home page with link to Forecast page](media/webapp-home-page.png)\n\n- **Web App Weather Forecast** - \u003chttps://localhost:50433/WeatherForecast\u003e\n\n  ![Forecast table](media/webapp-weather-forecast.png)\n\n- **Web API Weather Forecast** - \u003chttps://localhost:51443/WeatherForecast\u003e\n\n  ![Forecast json](media/webapi-weather-forecast.png)\n\n- **Web App Weather Forecast with Web API shut down**\n\n  ![Forecast page with error message](media/webapp-weather-forecast-failure.png)\n\n### 5 - Containerize the applications with docker-compose\n\nAdd the docker files to the workspace, by running the command\n\n`Docker: Add Docker Files to Workspace`\n\n![](media/add-docker-files-to-workspace.png)\n\nYou'll have to enter/select the following parameters:\n\n| Parameter                     | Value                        |\n|-------------------------------|------------------------------|\n| Application Platform          | .NET: ASP.NET Core           |\n| Operating System              | Linux                        |\n| Include Docker Compose files? | Yes                          |\n| Ports lo expose               | 80, 443                      |\n| Project                       | src/WebApi/**WebApi**.csproj |\n\nThis process adds/updates a few files:\n\n- Adds the **Dockerfile** file to the **WebApi** project\n- Adds the **.dockerignore** file.\n- Adds the **docker-compose.debug.yml** file.\n- Adds the **docker-compose.yml** file\n- Updates **tasks.json** to add the `docker-build` and `docker-run` tasks for `debug` and `release` configurations.\n- Updates **launch.json** to add a `Docker .NET Core launch` setting.\n\nThe updates to **tasks.json** and **launch.json** are only useful for running a single container application, but not so in a multi-container application.\n\nNow let's repeat the process for the **WebApp** project and answer **NO** when the process asks to overwrite the **tasks.json**, **launch.json** and **.dockerignore** files.\n\nThe process also generates the **docker-compose1.yml** and **docker-compose.debug1.yml** files for the **WepApp** project, that you'll have to merge manually into the **docker-compose.yml** and **docker-compose.debug.yml** files generated previously.\n\nYou also have to add a few configuration parameters to:\n\n- Expose WebApi on port 51080\n- Expose WebApp on port 50080\n- Configure WebApp with the WebApi's internal base address to access the endpoint.\n\nSo the docker-compose.yml file finally gets to this:\n\n```yml\nversion: '3.4'\n\nservices:\n  webapi:\n    image: webapi\n    build:\n      context: .\n      dockerfile: src/WebApi/Dockerfile\n    ports:\n      - 51080:80\n    environment:\n      - ASPNETCORE_ENVIRONMENT=Development\n      - ASPNETCORE_URLS=http://+:80\n\n  webapp:\n    image: webapp\n    build:\n      context: .\n      dockerfile: src/WebApp/Dockerfile\n    ports:\n      - 50080:80\n    environment:\n      - ASPNETCORE_ENVIRONMENT=Development\n      - ASPNETCORE_URLS=http://+:80\n      - WebApiBaseAddress=http://webapi\n```\n\n### 6 - Debugging the multi-container application with docker-compose\n\nTo debug the application running in the containers, we have to:\n\n- Configure the `docker-compose.debug.yml` file the same parameters we just added to `docker-compose.yml`.\n- Add a launch configuration to attach the debugger to a container.\n- Run docker-compose with the `docker-compose.debug.yml` file.\n- Install the .NET Core debugger in the development machine (this occurs the first time you debug).\n\nSo let's go with the details.\n\nThe `docker-compose.debug.yml` file has to be as shown next, notice the volume mounted from the file system, so the containers can use the debugger from the development machine.\n\n```yml\nversion: '3.4'\n\nservices:\n  webapi:\n    image: webapi\n    build:\n      context: .\n      dockerfile: src/WebApi/Dockerfile\n    ports:\n      - 51080:80\n    environment:\n      - ASPNETCORE_ENVIRONMENT=Development\n      - ASPNETCORE_URLS=http://+:80\n    volumes:\n      - ~/.vsdbg:/remote_debugger:rw\n\n  webapp:\n    image: webapp\n    build:\n      context: .\n      dockerfile: src/WebApp/Dockerfile\n    ports:\n      - 50080:80\n    environment:\n      - ASPNETCORE_ENVIRONMENT=Development\n      - ASPNETCORE_URLS=http://+:80\n      - WebApiBaseAddress=http://webapi\n    volumes:\n      - ~/.vsdbg:/remote_debugger:rw\n```\n\nTo add the launch configuration, go to the **Debug** tab and select the \"**Add Configuration...**\" option on the **Configuration** dropdown, and select the \"**Docker: .NET Core Attach (Preview)**\" template. This should add a configuration like the following:\n\n```json\n{\n    \"name\": \"Docker .NET Core Attach (Preview)\",\n    \"type\": \"docker\",\n    \"request\": \"attach\",\n    \"platform\": \"netCore\",\n    \"sourceFileMap\": {\n        \"/src\": \"${workspaceFolder}\"\n    }\n},\n```\n\nNow you have to run docker compose with the `.debug` file, and you can do that by right-clicking on the `docker-compose.debug.yml` file from the VS Code explorer view or from the command line:\n\n```powershell\ndocker-compose -f .\\docker-compose.debug.yml up -d\n```\n\nWhen all containers are up and running (it might take a little while), start the debugger with the newly added configuration (**Docker .NET Core Attach (Preview)**) and select the running container that you want to debug.\n\nThe first time you start the debugger you'll receive a message prompting you to install the debugger, like this:\n\n![](media/install-debugger-in-container.png)\n\nClick **Yes** to download the debugger to the `~\\.vsdbg` folder.\n\nWhen the download finishes (it can take a little while) you can start debugging as usual, setting breakpoints and inspecting variables in the source code, as shown in the next image.\n\n![](media/debugging-docker-ontainer-vscode.png)\n\nHope this helps 😊\n\n## Additional resources\n\n- **Integrate with External Tools via Tasks** \\\n  \u003chttps://code.visualstudio.com/docs/editor/tasks\u003e\n\n- **Debugging - Multi-target debugging** \\\n  \u003chttps://code.visualstudio.com/Docs/editor/debugging#_multitarget-debugging\u003e\n\n- **Configuring launch.json for C# debugging** \\\n  \u003chttps://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md#starting-a-web-browser\u003e\n\n- **Customize the Docker extension - Docker** \\\n  \u003chttps://code.visualstudio.com/docs/containers/reference#_build-task-reference\u003e\n\n- **Use Docker Compose - Visual Studio Code** \\\n  \u003chttps://code.visualstudio.com/docs/containers/docker-compose\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvelosop%2Fexplore-docker-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvelosop%2Fexplore-docker-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvelosop%2Fexplore-docker-vscode/lists"}