loading...
Vets Who Code

Windows JS Dev in WSL Redux

heytimapple profile image Tim Apple ・5 min read

Back in September I did a post on setting up a JS dev environment in Windows using WSL (Windows Subsystem for Linux). Quite a bit has changed in the past couple months so I think we need to revisit and streamline it a bit. You can now get WSL2 in the Slow ring for insiders and a lot has changed in Microsofts new Terminal app.

So to start, we need to be Windows Insiders for this. You could skip the whole insider thing and use WSL v1, but your going to have a pretty big performance hit and things won't work just right.

So goto Settings -> Updates & Security -> Windows Insider Program. You will want to opt in and select your ring. For us today, the slow ring will get us everything we need.

Alt Text

You may need to run a few updates, what am I saying.. you will run some updates, reboot and maybe some more. The key is you want to be on build 19013. To verify you are on the right build Hit Start, type winver, and then press Enter. The second line in the “About Windows” box tells you which version and build of Windows 10.

Next we need to make sure we turn on 'Windows Subsystem for Linx'. Press the start key and start typing 'Turn Windows Features on or Off'. You should see it appear and select it. A dialog window will appear. You want to turn on 'Virtual Machine Platform' and 'Windows Subsystem for Linux' as you see below.

Alt Text

Next we want to get you the new Windows Terminal from the Store app. Just go in there and search 'Windows Terminal' and you should find it no problem. Install it.

Next we want to open your new terminal up. It will default to Powershell for now. That's fine, we want to run a commands in there for our setup.

Type wsl --set-default-version 2 in your terminal window. This will tell Windows we want any Linux distribution installed to use version 2 of WSL.

Now that we have done that we need to install a Linux distro. I recommend Ubuntu, mainly because I know everything works in it. You want to select the one without a version number (I'll visit why in another post)

Alt Text

To veryify it's installed and we have the WSL2 version we can type wsl -l -v in the terminal and you will get a list of distros you have installed and what version of WSL they are using.

Alt Text

The next piece of software I would like to see installed is Visual Studio Code. This is what I use for my main editor.

Now let's make Ubuntu the default when we open the Terminal App. Open your terminal app and goto settings.

Alt Text

This will open the profiles.json file in code. Here we will make our changes. Every profile has a GUID. We just make sure the one we want as our default is is set at the line "defaultProfile":

Alt Text

Now you can do this with whatever distro you want in the future, but our focus is on Ubuntu.

So now almost everything is installed. We just need to tweak things up a little. First off, I like to use the Zsh shell as my main shell. You by no means are required to use it. If you choose to stick with bash the only step you have is to make it your default shell in the Terminal App. But Zsh has some nice optimizations that I believe improve life a little.

You can install Zsh simply by typing sudo apt install zsh in your Ubuntu Terminal.

Next we are going to run just a couple more commands before we set up our zsh config.

  • We are going to install Oh-My-Zsh which they themselves describe as "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout... 'Oh My ZSH!'" and to do this you type the following in the terminal.

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

  • We'll add the plugin 'zsh-autosuggestions' this is very handy by using past commands to help you auto fill future ones. The command for install is..

git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

  • And finally zsh-nvm will help us keep a current node install and even change versions if needed.

git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Once you have done all of the above commands we will edit our .zshrc. First make sure your in your /home directory by typing cd and pressing enter. Next run nano .zshrc.

First you can change your theme if you want, I have 'bira' selected for myself at this time. You can see some of your options at https://zshthem.es/all/ .

Alt Text

Next we want to add the plugins we installed earlier. This is a little further down the config. Just enter them as I have in the picture below.

Alt Text

Once this is done you will press ctrl + o to write the file and ctrl + X to close nano.

Now type source .zshrc to load your plugins and theme.

And now we install the LTS version of node simply by typing nvm install --lts

Let's also make a directory for our future projects by typing mkdir Projects or whatever you would like to call it.

So now you can cd Projects which will put you in that directory. From there we can open that folder with VSCode by typing code . while we are in the working directory of our choice.

You should be able to 'Rock and Roll' at this point. Feel free to reach out with any questions.

WSL is changing pretty quick, along with Windows itself, so this post may go out of date fairly soon. I will try to link the most current version at the top in the future if that is the case.

Posted on by:

heytimapple profile

Tim Apple

@heytimapple

Developer, veteran, player of ukuleles, plant geek, Baha'i Faith, and Family guy. Re-educating myself via Udemy and @vetswhocode

Vets Who Code

Vets Who Code,is a veteran-operated distributed 501(c)(3) that teaches veterans how to program remotely in leveraging the Javascript ecosystem for free.

Discussion

pic
Editor guide
 

I guess you've also used Linux recently. What pros and cons do you consider of both sides?

 

I do use both. I think your good in whatever you choose in all reality. It's just preference. I've been a Linux user since the 90's. I just recently started playing with Windows more.

I would say the only real advantage to Windows would be some games, adobe products(I hate), Affinity Photo(I love), and maybe the office 365 ecosystem.

As far as Linux, it's fast, updates are quick, installs a quick, variety, major geek cred..double if you use Arch..lol

They are both good enough. Linux is really more than good enough, it's mainly some proprietary apps that make Windows desirable at all.

 

hm there is LibreOffice / OpenOffice on Linux so I don't see reason to use windows for office

It’s a matter of compatibility, 90% of the world does everything in msoffice. Libre office is is nice but not 100% compatible, or even as good in all honesty. There is free office and and a couple others that are a little better. But Linux has nothing to compare to the combo of word, excel, outlook(evolution is pretty darn close),powerpoint, share point, teams, active directory and the tight knit integration between it all. And there are a ton of other things that fall into the ecosystem beyond that list.

I myself am not dependent on them, but Linux doesn’t have anything that comes close for a major enterprise user.

 

Although I'm not OP, but I'm a Windows / Manjaro Linux user, here are my pros and cons:

Windows:

cons:

  • Fucked up FS
  • A lot of visual bugs
  • Memory is often filled with system modules which you can't disable even if you want
  • Malware
  • Hard to reinstall
  • Awful for development, except using WSL2 which is nice (was WSL user for half a year, pain I. the ass)
  • When you fuck up system it is hard to find a way to fix it
  • No customization
  • Paid
  • Incompatible with macOS and Linux, cannot run bash scripts with UNIX-specific commands

pros:

  • Adobe Suite
  • Games support

Linux

cons:

  • Decentralized system (and it is a pro too). Sometimes it is hard to find a way what's wrong
  • Poor games support, but a lot of are ported natively, others can be played on Wine
  • A very little amount of graphics editing software (Krita is nice tho)
  • Bullshit with network and GPU drivers (from my experience, you may not have such problems)
  • Takes a lot of time to learn if you pick a non-beginner distro like Arch

pros:

  • Full customization
  • Absolutely free
  • Perfect for any kinds of development (except C# I guess)
  • A lot of guides (like ArchWiki) to look for the best solutions of a problem
  • Mix system components as you like, pick any DE, WM, install custom shell etc

I'm currently using Manjaro as my main OS and my only complaint is that WiFi sometimes stops working, I'm already looking for a solution

 

Good comparisons, c# dev can be done under Linux. Microsoft says .net core and cross platform are the way these days.

 

C# is cross platform.