Installing Vue Storefront in Windows via WSL2
Tags: vue, pwa
Published: 2020-03-20 16:22:35

# Introduction

If you are reading this, I am assuming you already know what Vue Storefront is, but for those who don’t let me explain.

[Vue Storefront](https://www.vuestorefront.io/) is an Open Source PWA for eCommerce. As its name suggest its based on Vue.js  and it uses its own Node.js [API](https://github.com/DivanteLtd/storefront-api) or any other really, to fetch data from the backend of your desire. The most popular choice right now is Magento 2 but there are other options too and a lot more coming on the way. The community is super friendly and I really encourage you to join the Slack channel if you find this interesting!

# Preparation

Okay let’s focus on the installation. You will need some stuff installed beforehand. Let’s 
have a look: 

- ~~Windows Insider - Slow or Fast track~~ As per [this](https://dev.to/mattwojo/comment/1bm5i) comment you can now skip this step! Matt also gives some great suggestion for your setup there! 
- Linux distro e.g Ubuntu-18.04 
- Docker for Windows 

Let’s start enabling the WSL2 features on our Windows machine. In order to do so we have to make sure that we have a Windows 10 build of 18917 or higher. Press `win + r` and type `winver` to see your current version. If you have a build version greater that the required  you are good to go. If not you’ll have to register for the Windows Insiders Program. 

Before doing so please make sure you enable the additional required features for the WSL2 which are **Windows Subsystem for Linux** and **Virtual Machine Platform**. Both of these can be found if you search for *Turn Windows features on and off*. Now let’s try register for the Insiders program. Type *Settings* on the start menu and under Update & Security locate Windows Insider Program.

After you successfully enroll to the slow or fast track the first part is complete.

Moving on to the second part which is installing a Linux distro. Open **Microsoft Store** and search for “Linux”. 

![Microsoft Store - Linux options](https://paper-attachments.dropbox.com/s_84E7DE6440936B0CDC2873BC2EAC0FDDD453238A448633273C10D0BC8529B9FE_1584718846025_image.png)

There some great options there but for the sake of this tutorial we will choose Ubuntu 18.04. Install the Linux version of your choice like you would do with a regular app. Moving on with docker, [install docker](https://docs.docker.com/docker-for-windows/wsl-tech-preview/) and activate the WSL2 option as shown.

![Docker general tab](https://paper-attachments.dropbox.com/s_84E7DE6440936B0CDC2873BC2EAC0FDDD453238A448633273C10D0BC8529B9FE_1584718329446_image.png)

Next go to the **Resources** tab and choose the distro you installed on the previous step and enable the integration.

![Docker resources tab](https://paper-attachments.dropbox.com/s_84E7DE6440936B0CDC2873BC2EAC0FDDD453238A448633273C10D0BC8529B9FE_1584718373382_image.png)

By now we have enrolled to the insiders program, installed docker with WSL2 features enabled, installed a linux distro and the last thing to do is actually enable WSL2.

In order to do so we have to run `wsl --set-version <Distro> 2` to the command line. I installed the new Microsoft terminal but you can do that with pre-installed Powershell too. 

*Remember to change <Distro> with the name of your distro. you can check the installed ones if you run* `wsl --list`. More information can be found [here](https://docs.microsoft.com/en-us/windows/wsl/wsl2-install).

> To check your WSL version type `wsl -l -v`. 

![WSL list with version](https://paper-attachments.dropbox.com/s_84E7DE6440936B0CDC2873BC2EAC0FDDD453238A448633273C10D0BC8529B9FE_1584719638405_image.png)

Now if you open your terminal and choose the Linux version you installed you should be good to go. 

![Ubuntu 18.04 root directory on Windows Terminal](https://paper-attachments.dropbox.com/s_84E7DE6440936B0CDC2873BC2EAC0FDDD453238A448633273C10D0BC8529B9FE_1584720072846_image.png)

That’s it 🎉 🎊 . You have successfully installed WSL2 and have enabled its features on your default distro. You can also follow this [video](https://www.youtube.com/watch?v=A0eqZujVfYU) by Scott Hanselman which I found super useful.

From here you can just follow the default instruction found on the Vue Storefront [docs](https://docs.vuestorefront.io/guide/installation/linux-mac.html). You are in a Linux OS now after all 🙂 (kinda)

Quick tip before I let you go. 
I find that running this command `echo "sync && echo 3 > /proc/sys/vm/drop_caches" | sudo sh` fixes some issues with memory the Vmmem process is having. It can be really memory hungry!

Please let me know if there’s anything I can improve on this mini - guide. You can also find me on the VSF Slack channel. 

Vue Storefront is really promising and the community is super friendly. It’s how open source should be. It’s a great place to be in if you are interested in finding more. 

Good luck with your adventures 🍀