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 is an Open Source PWA for eCommerce. As its name suggest its based on Vue.js and it uses its own Node.js 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 trackAs per this 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”.
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 and activate the WSL2 option as shown.
Next go to the Resources tab and choose the distro you installed on the previous step and enable the integration.
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 with the name of your distro. you can check the installed ones if you run wsl --list. More information can be found here.
To check your WSL version type
wsl -l -v.
Now if you open your terminal and choose the Linux version you installed you should be good to go.
That’s it 🎉 🎊 . You have successfully installed WSL2 and have enabled its features on your default distro. You can also follow this video by Scott Hanselman which I found super useful.
From here you can just follow the default instruction found on the Vue Storefront docs. 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 🍀
Top comments (2)
You don't actually need Windows Insider for this. You can install a Linux distro with WSL 2 to use for Vue development projects and Vue Storefront just with normal Windows 10. docs.microsoft.com/windows/wsl/ins...
Highly recommend using VS Code with the Remote Dev Environment extension for WSL to make things easier though: docs.microsoft.com/windows/wsl/tut...
You also should make sure that you are creating your project files on the virtual Linux files system, the same one that you install Vue and any tools on, not the mounted Windows C-drive file system... or else your build and installs will go REALLY slow because they are crossing file systems. Just use the command
explorer.exe .(be sure to include the period at the end) to open your current file system from your command line in Windows File Explorer.docs.microsoft.com/windows/wsl/faq...
That actually makes things easier! At that time I really thought you needed to be an insider to access WSL2. Thanks for taking the time to comment, that was really helpful!