hero image

docker

Getting started with Docker for Windows using wsl2 and VS code

Experiencing cross platform same developer experiance.

Ravish Kumar

Ravish Kumar

Tue Mar 07 2023 - 6 min read

Ravish Kumar

When it comes to development, Windows sucks a lot. It will take your whole day setting up your machine for the desired developing environments.


We all prefer Linux like developer experience and love the shell.

That's why Mac OS is the first choice for developers over Windows.


Docker technology provides a cross platform same developer environment whether it is Linux, Mac OS, Windows or cloud based developer infrastructure.


Now, you don’t need to spend your whole day downloading dependencies, compilers, programming languages and setup path variables and all the stuff. You can use a ready made solution from another developer and save your time. You just need to find the right docker container for your development needs and focus on writing apps.


You can learn more about Docker on their official website. I highly recommend you to check out their documentation.


https://www.docker.com/



Why you should switch to wsl2 based backend instead of default windows filesystem?


One of the most important reason is Linux containers only receive file change events (“inotify events”) if the original files are stored in the Linux filesystem.


For example, some web development workflows rely on inotify events for automatic reloading when files have changed. (source: docker.com)


If you are react developer, you may be using hot reloading features, which changes UI once you save the files. Or you maybe using any personal project and you may have set up task manager like gulp to automate the repeating stuff (Converting SCSS to CSS, or notifying browser on file change)


As, without Linux filesystem, it's unable to receive the file change events, you have to restart development server each time to see changes, which is overwhelming. I had same overwhelming experiance when I switched my Next.js project on windows machine and was unable to see the change in real time.


Barriers which stops developing with Docker on Windows


Yes, you may have guessed it right. Again setting Docker and wsl2 is hard for new developers.


You can’t simply store your workspace files in the Documents folder to work with wsl2. You have to make your workspace directories inside wsl2. Sound’s confusing, I agree it’s confusing. Be with me, you will get to know everything, at the end of this article.


I have spent a lot of time trying to understand it and fixing common bugs, this article will surely save you time. 


If you are new to the Windows subsystem for Linux. I have already written about it’s possibilities and experiences. Please go through the article below, and come back later. You can skip it for now and read it later.


https://dblogstream.com/posts/taking-advantage-of-wsl2-on-windows-for-software-development



First I will take you through a sample project, then I will answer all the reasons behind it.



Setting up wsl2 support on Windows.


Please go through Microsoft’s official documentation, it’s easy to follow and complete all the steps. Setup wsl2 and come back to this article.


https://docs.microsoft.com/en-us/windows/wsl/install-win10


Make sure to download your favorite Linux distribution, like Ubuntu from Microsoft store.


Setting up Docker in windows


Download Docker desktop using the link below and follow on screen instructions for setup. 


https://www.docker.com/get-started



Activating wsl2 for Docker.


Once Docker Desktop is installed, open the application, and tap on the settings icon on the navigation bar.


Tick the checkbox. Use the WSL 2 based engine


Now your Docker is ready to do the heavy lifting for you. Proceed to the next step.


Checkout below official documentation link, setting up wsl2 with Docker.


https://docs.docker.com/desktop/windows/wsl/


Setting up VS code.


If you don’t have VS code installed, please download and install from the link below. 


https://code.visualstudio.com/


Now, install some extensions which will enrich your experience using Docker with VS code.


Extensions to install.

  1. Docker
  2. Remote WSL






You can know more about using wsl2 with VS code in the article below.


https://code.visualstudio.com/blogs/2019/09/03/wsl2



Setting up your workspace folder.


As I already mentioned, wsl2 works differently. So you can’t make a folder inside your Document folder and start developing for better use of the intended technologies.


You have to make directories or keep files inside the wsl2 filesystem. It’s different from the Windows file system. It uses Linux kernel and has a Linux-like file system.


You will get to know in a few moments what I’m talking about. For now, just follow the steps. It's a single time setup. You don’t need to have all these steps multiple times.


Search for the Linux distribution in the taskbar and open it (say Ubuntu) which you installed earlier from Microsoft store. 


A Linux terminal will open. 


Now make a workspace directory by running below command.


mkdir /workspace


Open workspace directory in VS code using below steps.


cd /workspace && code .




After the above steps your folder will open in VS code editor. For first

time, it will take time as it has to download some server resources,





Create an app directory inside a workspace directory using VS code. And add a file test.js and fill it with below code.


console.log('Setup successful')


You can even save your code inside your GitHub repositories and access it anywhere and have the same developer environment on your friend's computer. 


Create a ‘dev’, directory inside your app directory, and inside dev directory create a ‘Docker file’ and fill it with below text


FROM node:latest


Now create a 'docker-compose.yml' file in your app directory

And paste below code (take care of indentations)



version: "3.9"

services:

  devenv:

    build: ./dev



Now our directory structure looks like this.





Now, open integrated terminal, and run below command


docker-compose build devenv


It will build the image based on our docker configuration files


Now, open shell inside docker container using below command.


docker-compose run devenv /bin/sh


To run the JavaScript file, we created it earlier. Run below command


node test.js


You will get the log in terminal.


Conclusion


Have you noticed you never downloaded node environment and set up manually for developing JavaScript powered apps.


It’s all pre configured in Docker image.

To know more about Docker, please go through official documentation from Docker. You will love it for sure.


For instance you need to build a python application, you don’t have to download python on your machine. You simply change some lines of code in the Docker file and it’s ready for development.


Feel free to comment down your experiance using Docker in windows. In case you get error, kindle let me know. If you need any type of assistance setting up this project and have queries which is not covered in this article, please let me know. Hope you love it.

Dblogstream © 2023