Developing a Vue.js Project with Docker Edge and Visual Studio Code on WSL2 under Windows Home
How-to develop a Vue.js SPA from scratch with Docker Edge and Visual Studio Code on WSL2 under Windows Home
Some weeks ago I published an update on how-to get Docker working with Windows Home, since the experimental channel added a dedicated support for it via WSL2 as a backend. Well, finally I had the opportunity to try it for my company’s infrastructure: it worked as I expected, although the CEO said otherwise. We chose the Vue.js framework to create our assets, so I’ll focus on it; I installed Ubuntu 20.04 LTS, because recently Canonical provided an optimized version of its distribution for WSL (Windows Subsystem for Linux).
WSL (Windows Subsystem for Linux)
Taking advantage of WSL2 new features isn’t difficult at all. I’ve ever said that I love this subsystem from the beginning… because it lets me get rid of the dual-boot on my machines. Or, at least, it would: my company still requires a full working Linux system — but I don’t agree with my colleagues and I’ve just shown them that our infrastructure works from Windows Home. Nevermind, I have lots of side projects to take care, so I’ll do this with the setup I’m going to share here; why it matters? I hate having two or more OSes.
WSL2 introduced several improvements to help developers dial with Linux and in general UNIX-like workflows from Windows. I explained how-to get it working already, but I think that repeating some concepts could help. I strongly recommend to install the latest version of Ubuntu from the Microsoft Store: as I’ve said above, it’s optimized to work with WSL2 and it supports the new subsystem kernel you have to download before it. Check how-to get it from my previous tutorial; sometimes I forget to install it on new machines.
> wsl --set-default-version 2
Docker Desktop Edge
Guess what? Even if you can skip the Docker installation, Node.js is still required to work on the Linux subsystem. In this case you have at least two options: Ubuntu comes with something called Snappy you may prefer to the standard APT way. That said, I don’t really like the Snap Store much and I followed the instructions for the official distribution’s repositories. I suggest to stay with version 12.x to ensure it works with Vue.js v2.x, although right now the framework is closer than ever to get an upgrade I’ll speak about very soon.
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install -y nodejs
Then, having Docker Desktop Edge active and running on Windows Home, from WSL2 you only have to bootstrap your Vue.js project as usual. I think that the actual process would change in the near future with version 3+, since React changed its own and Nuxt.js followed. Anyway, at the time of writing Vue CLI is the best way to do so: other dependencies belong to your stack. Mine, for example, includes Sass/SCSS and ESLint (both selectable from the bootstrapping configuration options). Be sure to install your CLI globally.
$ npm i -g @vue/cli
$ vue create foo
$ cd foo/
Visual Studio Code
It’s time to open Visual Studio Code from the Windows desktop. If you got the remote WSL extension, you can easily access files stored on the subsystem: otherwise, if you have an existing Vue.js project, you can start the environment from the WSL2 shell or better the new Windows Terminal. This is a cool hybrid able to execute both PowerShell and Bash commands; I haven’t tried it yet, but I guess it will soon replace my terminal emulator here. What about Docker Edge? Let me explain how-to better integrate it below.
Currently, I’m working for a company that uses a “dockerized” infrastructure of Vue.js built with Vue CLI: I haven’t spoken about how-to create a container from the SPA sources in the official way, but I needed to get a running workflow operated by Docker. Despite Ubuntu 20.04 LTS is now recommended to do so, my laptop crashed and I wasn’t able to install a Linux distribution on the other one I own. I succeded in getting it working with our environment from Windows, although they said it would have been broken.
It wasn’t. I’m the employee most aligned with newer technologies of my startup, so I was aware of the new WSL2 feature before they chose to get rid of Windows Home and move to a native Linux system: I worked with Ubuntu for a decade before it was adopted by my company earlier this year. I know that the previous version of WSL wasn’t able to do so and that Docker Desktop didn’t work without a Pro edition of Windows. Right now, you can forget these limitations and work even with a budget laptop! Cool, isn’ it?
You don’t have to “dockerize” your Vue CLI application to get it working on WSL2 at all. But, if you want to, now you can run a standard container from Docker Hub or a custom build: maybe, a WordPress environment managed by Docker Compose. The best is that you shouldn’t install it on the Linux system, once it’s up and running on Windows Home. Just invoke the required commands and start coding! That’s why, having to work daily with Office 365 and other Microsoft solutions, I prefer to avoid getting a native Linux system.
Don’t misunderstand me. I’m a Linux enthusiast from the beginnings: I’m simply forced to depend on software that Ubuntu itself can’t execute for my job, but I’ve never been a .NET developer, so this is actually the best solution to get the most out of both. Lastly, the official Docker extension for Visual Studio Code completes the toolchain you need. It gives you the ability to manage your containers right from the editor — and it’s available on Linux too. If you move to a different ecosystem, then you don’t have to change them.
So… I know that this guide still misses something: I haven’t shown how-to “dockerize” your application yet. There are different ways to do so, but I want to refer to the official one; Vue.js (the framework I work on daily) has a great tutorial on this and I like to follow the maintainers’ guidelines. I promise I’ll soon publish a story about, of course starting from a personal project and not my company’s assets. Not only because I signed an NDA. Waiting for the next Vue.js big upgrade, I guess it will include TypeScript as well — unfortunately.