This post is the third of a series of four. You might have missed the two essential steps to guide you by preparing a unique, modern, multi-purpose and tidy software development environment. In the first one, we explain what Docker, docker container,  WSL are. How to install them, and all benefits we can get from having such a hybrid and powerful machine. In the second one, We help you set things up to make the most of this current post. But if you have been following me, congrats, we will see more cool stuff now!!

First, let’s define what we will use to demonstrate Docker and containerized applications’ power.

There are many software frameworks, architectures and platforms we could use to show off our new development environment, but there is one I want to focus on, ASP.Net Core, which is currently in version 3.1 at the time of this post.

Asp.NET Core - Sharing

Why ASP.Net Core?

Because it’s is the open-source version of ASP.NET, which runs on macOS, Linux, and Windows. ASP.NET is a popular web development framework for building web apps on the .NET platform. Over 60,000 developers and 3,700 companies have already contributed to .NET on GitHub.

It’s faster than other popular web frameworks based on the independent TechEmpower benchmarks.

Lifecycle and reliable support policy

Its modern and innovative design allow runtime components, APIs, compilers and languages evolve rapidly while still providing a supported and stable platform to keep apps running.

On the same server, multiple versions of ASP.NET Core will exist side by side. That means the new release can be adopted by one app, while other apps continue to run on the version on which they were tested.

To meet the needs of your app, ASP.NET Core offers different support lifecycle options. If you commit to updating more often, you can select a long-term support release or run with the new update.

Having said that, with all the above-described concerns a good developer needs to address, let’s pick one application to containerize using Docker. Therefore we chose eShopOnWeb, a sample ASP.NET Core 3.1 reference application, powered by Microsoft, demonstrating a layered application architecture with a monolithic deployment model using the SQL Server database persistence.

Let’s clone the eShopOnWeb application using git.

Git - Sharing

If you don’t know what git is, here is the most straightforward way to tell you. Git is a version control system (VCS) type that makes it easier to monitor file modifications. When you edit a file, git will help you decide what has changed, who has changed it, and why. Git isn’t the only system out there for version control, but it’s by far the most popular among developers.

Furthermore, besides all of that, it has a useful command called git clone that magically downloads everything you need about the project.

Click here to download git for Windows, click on the downloaded executable and follow the instruction. Go all the way to the end by clicking the Next button and keeping all default options as they appear.

Open Powershell or Windows Terminal (recommended), go to a directory of your preference and type git clone as shown below.

git clone eShopOnWeb

You will have all source code right in your local machine in less than a minute, ready for the entire software development workflow in a containerized environment.

git clone eShopOnWeb ready

Go to eShopOnWeb newly created folder by typing cd .\eShopOnWeb\ and hit Enter.

eShopOnWeb folder

To open the Visual Studio Code (VSCode) in a stylish mode, type code . and hit Enter.

open vscode

It will open VSCode with two notifications, as shown below.

open vscode

First, click on the “Install” button to install all recommended extensions for this repository. It is going to take a couple of minutes to install the following:

  1. C# for Visual Studio Code (powered by OmniSharp) with the following features:
    • Lightweight development tools for .NET Core.
    • Comprehensive C# editing support, including Syntax Highlighting, IntelliSense, Go to Definition, Find All References, etc.
    • Debugging support for .NET Core (CoreCLR). NOTE: Mono debugging is not supported. Desktop CLR debugging has limited support.
    • Support for project.json and csproj projects on Windows, macOS and Linux.
  2. Test Explorer for .NET Core
    • Use Test Explorer to run unit tests from Visual Studio or third-party unit test projects. You can also use Test Explorer to group tests into categories, filter the test list, and create, save, and run playlists of tests. You can also analyze code coverage and debug unit tests.
  3. Azure Tools for Visual Studio Code
    • Microsoft Azure support for Visual Studio Code is provided through a rich set of extensions that make it easy to discover and interact with the cloud services that power your applications. Click here for more details.
  4. Visual Studio Code Kubernetes Tools
    • They are intended for developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications. Work with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more!). Click here for more details.
  5. YAML Language Support by Red Hat
    • This extension provides a comprehensive YAML Language support to Visual Studio Code, via the yaml-language-server, with built-in Kubernetes syntax support. Supports JSON Schema 7 and below. Click here for more details.

After installing all extensions, you will see another notification.

vscode with all extensions installed

Click on “Restore” to resolve all dependencies for this solution (eShopOnWeb.sln). Dependencies are all required pieces of software to run the solution. A solution is a name given to a structure for organizing projects.

Wait for less than a minute to finish the restoring process and close VSCode. Open it again via Powershell or Windows Terminal, typing code . and hitting Enter.

You will see the last notification related to the Dev Container configuration file.

Dev Container for VSCode

If you choose the “Don’t show again” button, it will use your Windows with all extensions and dependencies already installed and ready to go. If you go with the “Clone in volume” button, it will save them in a Docker volume for persistence purposes.

For now, click on “Reopen in Container” and wait a couple of minutes until it creates a docker container for your development environment with all extensions and dependencies running in Ubuntu 18.04.5 LTS.

VSCode Dev Container in Ubuntu

You can tell it’s running on a container by the green indication saying “Dev Container: eShopOnWeb” in the left bottom corner at the status bar.

Now go to the Run menu and select the “Run Without Debugging” option.

Run eShopOnWeb

It will restore, build into the Linux container and automatically run the application in your preferred web browser on http://localhost:5001 in your local machine (host).

eShopOnWeb running

Software development in a docker container

What they did was it, they allowed you to develop inside this docker container. Type docker ps and hit Enter to see all your running containers.

VSCode Dev Container

This container is a runtime instance of this docker image. Type docker images and hit Enter to see all your built images.

If we dive into the image, we will see that it contains all the dependencies installed in Ubuntu, as we talked about earlier to make what we call a Dev Container.

Dive Dev Container

As a full-featured development environment, the VSCode Remote-Containers extension enables you to use a Docker container. It lets you open any folder inside or mounted into a docker container and take advantage of the full feature set of VS Code. In your project, the devcontainer.json file tells VS Code how to access or create a development container with a well-defined runtime stack and tool. This container can run an application or run the required sandbox tools, libraries, or runtimes for a codebase to work correctly.

Workspace files are placed or copied, or cloned from the local file system into the container. Extensions are mounted and run within the container, where the tools, software, and file system are entirely accessible. It means that only by connecting to a separate container can you effortlessly alter your entire development environment, which makes a huge difference when working on many different projects requiring various dependencies.

Architecture Containers VSCode

All of this allows VS Code to provide a development experience of local consistency, including complete IntelliSense for code completion, code navigation and debugging, no matter where your tools or code are located.

Congratulations, you have finally set up an exquisite software development environment to improve your productivity and provide you with a local-quality development experience.

Do you want to know more about us and our mission? Click here, and don’t forget to subscribe!

We also have pro bono projects just in case you are interested in learning more about them.

Be aware of why we started this project by clicking here.

Learn more about other posts here.

Contact us for any suggestions. And follow us on FacebookInstagram and Twitter.

If you are a good reader like myself, I recommend the following readings:

  • Docker Quick Start Guide: Learn Docker like a boss, and finally own your applications
  • Docker for Developers: Develop and run your application with Docker containers using DevOps tools for continuous delivery

See you in the next post!