Docker Development Environment With Windows Pt 1

Hello there. Who follows me on mastodon and who read my blog may know I returned to windows from Linux. Until now I had both OS, windows on my desktop and Linux on my notebook. I like Linux if you want you can have it looks the same as macOS or Windows. But I found myself doing too much tweaking which takes me time for important things. 2nd thing why I go back it's that I m a heavy Microsoft environment user (partly because of work) and have my email and data on Microsoft 365. I syncing them between all my devices (windows, android, and iOS) which is not that easy on Linux and I had to install 3rd party app.

The main reason why I was using Linux was that I had the same development environment on my computer as the production server but I see lights on the end of the tunnel when the Docker desktop was released. The first versions used a virtual machine on Hyper-V, it was slow and not that easy to manage. Then Microsoft release WSL which was a big thing and I told myself "wow I can have Linux on my windows machine?" it was nice and now we have WSL in V2 which using full Linux kernel. Docker Desktop for windows switched to WSL2 and I finally can run here Postgres, MySQL, and almost any dockerized app I want. I think this is a game-changer. Windows and Linux are no longer enemies and I'm glad for it.

Another awesome piece of software is Visual studio code and together with the right plugin, you can run the development environment you want. So I want you to show how easy is to create an environment for Hugo. This is what I using when I writing my blog.

Hugo has windows executables which you need just copy and this solution is maybe overkilling but as a demonstration, it's nice, and I believe you're looking for how to create a development environment with docker desktop on windows you not finding this just for Hugo. I have installed DD on all my machines so it's easier for me just press one button and I can write my blog without checking if I have the right version of Hugo, or creating paths on all my computers.

So what's you will need?

• Windows 10 with WSL v2
• Docker Desktop
• Visual studio code with required plugins.
• few minutes of time :)

OK lets start:

I count on that You have all prerequisites already installed and configured. If no, then You can Enable WSL v2 following this guide. How to install docker desktop on windows you can find on this page and VS code is here.

VS Code remote development plugin

For our solution we need to install ms-vscode-remote.vscode-remote-extensionpack plugin. VSCode Marketplace.

After installation You can see on the left bottom corner of your VS code new button - (Let's call it Remote Button). By clicking on it you can run your code in contaienr but first of all you will need new configuration. One way is to do this by clicking on that button and than select from menu "Add development container configuration files", the second one is to do this manually.

Development configuration files

Lets to do this the 2nd way.

• create .devcontainer folder in root folder of your project
• create devcontainer.json in it.

Content of devcontainer.json looks as follows

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.183.0/containers/alpine
{
	"name": "Hugo",
	"build": {
		"dockerfile": "Dockerfile",
		// Update 'VARIANT' to pick an Alpine version: 3.10, 3.11, 3.12, 3.13
		"args": { 
			"VARIANT": "0.83.1" 
		}
	},
	
	// Set *default* container specific settings.json values on container create. 
	"settings": {},

	// Add the IDs of extensions you want installed when the container is created.
	// Note that some extensions may not work in Alpine Linux. See https://aka.ms/vscode-remote/linux.
	"extensions": [],

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "uname -a",

	// Uncomment when using a ptrace-based debugger like C++, Go, and Rust
	// "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "root"
}

We have there name of our container (you can use any you want). In the build section we can tell VS code how it can build our container, You can also add your loved extensions there and vscode will install them on first container start. Next we need to add Dockerfile. Here is content:

ARG VARIANT="0.83.1"
FROM ghcr.io/maymeow/hugo/hugo:${VARIANT}

Put this file right next to devcontainer.json in the .devcontainer folder. I using my own custom images, you are free to use them too or you can chose any other image you want. Source code for the one from config you can find here on my GitHub.

Running in container

Ok back to the button on left bottom coner. Click on it and then select from menu "Reopen in container". Vscode now run docker build and creates new container from Dockerfile,W then open your source code in it. When you are running from container you can open console (like anytime on vscode) by pressing Ctrl+` and you are inside container. May be you noticed the button on left bottom corner are now changed and it showwing you that you running in the container. This way you can create any environment you want.

• When your project have devcontainer configuration in it and you have installed required plugin VS Code detects it ans ask you to open project in that container
• When you edit Docker file or configuraton you can rebuild the container by clicking on Remote button and select rebuild.
• If you want to go back to local, click on the remote button and select "Reopen in local".

At the end

So this way you can have any environment you want, you can have python, php, node, ruby or any other container. You can install all tools on it when you building it from Dockerfile, or you can perpare and buld it with Ci/CD and then just pull it anytime you want.

This is the way you have same environment on literally any computer (linux, Windows, Mac) you have. Maybe Windows isn't that fast as Linux but its nice to have access to all your application like Photoshop and still can run Linux without the need to install Linux dualboot or using virtual machines.

Next time i will show you something more complex so stay tuned 😎.