Using Windows 10 For Serious Web Development - A Quick Starter Guide

It's pretty funny because every other developer I meet is always wondering and asking me if (and how) it is really possible to work on a Windows machine as a JavaScript/Frontend Developer. And hell yeah, it is!

Let's start with a little bit of my personal history first.

I've been using Windows basically all my life (let's ignore C64 and Amiga 500 here). First I used my dad's Windows 3.11 machine from his work to play Minesweeper (without actually understanding how it works (which I still not do)). Later when I was 11 or 12 I got my first very own Windows 95 PC. Shortly after, I got a bit into gaming and so buying a Mac was not really an option for me. Not to mention that they were (and are) not affordable when you're 14-15 y/o and still going to school.

When I stopped playing games I was still in school so I still couldn't afford a Mac and when I later got my first real job in 2002, they provided me with a computer which was also running on Windows. I seriously considered switching to Mac in 2008 but I was doing a lot of hobby photography and image editing back then and I was using a legal(!) (student) copy of Photoshop which was valid for Windows only so I didn't make the switch. Thank you, Adobe!

I was thinking about switching to Mac again in 2013 (and I even bought my very first own Mac, a MacBook Air) but still sticked with my Windows PC for reasons I cannot recall.

And that's where I am today. I'm still using Windows as my primary operating system for my every day life as Javascript Developer and even though I learned how to type an @ on a Mac keyboard now, I'm not thinking about switching to Mac anymore. At least not anytime soon.

I have a keyboard that's working, a great selection of viable hardware and all that for a mostly reasonable price. Windows 10 keeps getting better and better, Microsoft has been doing an amazing job in the last couple of years and continues to do so.

So let's get back to the initial question: how is it possible to work on a Windows machine as a JavaScript Developer?

First things first: use the Professional Edition

Many PCs come with a Windows 10 Home Edition which is kind of useless for professionals because you have no support for Hyper-V which you need to use Docker and also no support for WSL, the Windows Linux Subsystem. So first of all: get the right version. If you bought a Windows PC with Windows 10 Home, don't worry: you can upgrade through the Windows Store pretty easily. I've done that once, don't remember how I did that but what I do remember is that it took me one Google search, five clicks and 15-20 minutes of my time and my system was upgraded from Home to Professional. So it's really easy.

Tools

That's the most essential part. The tools on Mac like iTerm or Homebrew are incredible. Windows can't quite keep up with that but there are alternatives which are - in my opinion - at least almost as good as their macOS equivalents.

Cygwin

Let's start with the console. Forget Powershell or the Windows Command Shell (cmd). I'm spending a fair amount of my time on the CLI and I haven't used either of them for years. Use Cygwin! It's a compatibility layer and gives you (their own words) "that Linux feeling on Windows". You cannot run native Linux binaries in Cygwin but the project ported a whole bunch of Unix tools to Windows and from my experience most of them look and feel like their native Unix counterparts. You even have a home folder which you can access just like on linux by typing cd ~ into your Cygwin CLI, you also have ls and cat and even rm (careful!).

Download the installer, run it, select a mirror to download the package list from, select all the Unix packages you like (e.g. vim or nano, openssh, wget, curl, …) and go! Do not install Git though. We'll do that manually later. There's Git for Windows which integrates better and causes less stress.

Hint: Unlike Linux, Windows is not case-sensitive when it comes to files and folders. I avoid to have spaces in paths and try to keep all paths lowercase to not get into trouble when working with the WSL Linux Shell or Git. My Cygwin installation is located in C:\cygwin64 for example. It can save you some additional headache.

Once Cygwin is installed, I recommend to install apt-cyg which, you might have guessed it, works pretty similar to apt-get on Debian. Once it's downloaded to your home folder (C:\cygwin64\home[username]) you can install packages as easy as apt-cyg install curl.

Note: Cygwin adds its bin folders to your system's PATH. If the system PATH is modified you must usually close all cmd.exe, powershell.exe, bash.exe and explorer.exe processes and restart them to have the updated PATH available everywhere. The easiest way is usually to restart the whole system (hey, it's still Windows …).

// edit: you can type refreshenv in your cmd, as @AkosLukacs pointed out!

95% of my everyday tasks when doing Node.js or React development work perfectly fine in Cygwin and they look and feel almost like a real Linux. Webpack, Yarn, NPM, Puppeteer, Node. I even regularly ssh into different servers using Cygwin's openssh.exe. You can mkdir ~/.ssh and put all your ssh keys there. Cygwin/openssh will automatically look for the keys if you try to connect to a server via SSH, just like on Mac or Linux!

I think Cygwin is responsible for not having missed a real unix based machine over all the years.

Windows Subsystem for Linux (WSL)

Sometimes (really rarely, at least in my case) the tools Cygwin provides aren't enough. Then it's time to install Windows Subsystem for Linux. It's a real Linux environment that's running on your Windows machine. Once you enabled the feature in the Control Panel you can choose your distribution from the Microsoft Store and run almost everything you can run on native Linux machines, except for GUI applications (although there are people who got this working). Currently you can choose between Ubuntu, Debian, SUSE, Kali, Pengwin and Alpine.

Caveat: By default all files and folders have root as owner and chmod 777 which, you know, is quite bad. You have to remount your drives to be able to use proper files and folders permissions. Read here how you can do that:

• https://devblogs.microsoft.com/commandline/chmod-chown-wsl-improvements/
• https://devblogs.microsoft.com/commandline/automatically-configuring-wsl/

WSL also comes with a binary called bash, exactly like Cygwin. To avoid confusion I added an alias for the WSL bash to my ~/.bash_profile:

alias lx=/cygdrive/c/Windows/System32/bash.exe

This allows me to type lx to start the WSL bash when I'm in my Cygwin bash.

/cygdrive/c/ is where all your file are, Cygwin mounts your drive to a unix-style filesystem where /cygdrive/c is equal to C:\\ in Windows.

Git

As I mentioned before, it sometimes leads to weird behavior and incompatibility between different programs when using the Git binary that comes with Cygwin so you better download Git for Windows.

The options during setup can be a bit overwhelming if you're new to Windows. You do not need the Windows Explorer Integration (we're using Cygwin with ConEmu here later) so you can go with the default components in the first screen. In the next screen you can select your favorite editor to use with Git. I go with the default which is nano because I never understood vim like so many others. Feel free to choose something else.

In the next screen you want to use "Git from the command line and also from 3rd-party software". And you want to use OpenSSH instead of TortoisePlink. The next important option is the line-ending conversion. Checkout as-is, commit Unix-style line endings (core.autocrlf=input) is what you want here or otherwise your colleagues get mad at you because GitHub marks all changes in line ending style as a change in Pull Requests. That's ugly and you really don't want that.

As terminal MinTTY is probably a better choice than cmd although I never use it anyway because of Cygwin. On the last screen, Extra Options, you should check all three: file system caching, git credential manager and symlinks. Once it's installed you can use all the commands you're used to. You can even put a .gitconfig file into your home folder in Cygwin and modify all your settings there. It also respects your ssh key in ~/.ssh - just like on Linux or Mac!

Terminal: ConEmu or Cmder

macOS has iTerm, which is beautiful but Windows has ConEmu and Cmder (which is using ConEmu under the hood). Personally I'm using ConEmu and it's just great. It gives you a lot of keyboard shortcuts, supports tabs for your console windows and just provides a lot of functions and features for your convenience. It's not quite as beautiful as iTerm but it offers a very similar functionality. I've setup ConEmu to be my default terminal application and within ConEmu I've made Cygwin's bash.exe my default shell. Cygwin detects all installed shells automatically and you can select the shell of your choice from a drop down menu!

You can also register ConEmu as menu option for files and folders and so every time you right click a file or folder anywhere in Windows you can select "Open ConEmu here" to start a new terminal Window pointing to the selected path. You can find it in the ConEmu settings in the "Integration" menu.

IDE/Editor

I'm using VSCode as my primary editor/IDE for development. Since VSCode is from Microsoft it works perfectly fine without any issues on Windows of course (who would've guessed?). If you want to use the integrated terminal with bash.exe from Cygwin (which I do, and I love it) you might first have to adjust a few settings though:

"terminal.integrated.shell.windows": "C:\\cygwin64\\bin\\bash.exe",
"terminal.integrated.env.windows": {
  "CHERE_INVOKING": "1"
},
"terminal.integrated.shellArgs.windows": [
  "-l"
],

This makes it possible to open the terminal in VSCode and having it pointed to the current project's root folder. It works very similarly in Atom which I was using before switching to VSCode.

If you're using Windows 10 Build 18309 or newer you can also set:

"terminal.integrated.windowsEnableConpty": true,

This makes VSCode use ConPTY instead of Winpty. Rich Turner tells you more about that.

Node.js

If you're working with Node.js, I recommend to use nvm-windows to install it. It works pretty much in the same way as nvm does on Unix based machines but a few commands are a little different (e.g. nvm list available instead of nvm ls-remote).

Download the installier from GitHub, install the tool and you can install Node.js from your commandline by typing nvm install 10.15.3 && nvm use 10.15.3.

Upgrading the pre-bundled npm version can sometimes be a bit tricky though. Many users (me including) are reporting a weird issue here. I worked around that by installing yarn globally (npm i -g yarn), adding yarn's global bin folder to the PATH (you can find it using yarn global bin) and installing npm via yarn global add npm. Works fine. Just make sure that the yarn bin folder has precedence over npm's bin folder (so move it higher up in the path).

Next you will need to install the Windows Build Tools. This allows you to install packages which need to be compiled/built on your machine using node-gyp. That's one of the really rare occasions where you really need Powershell. And you need an elevated Powershell with Admin permissions. In ConEmu you can press [win]+[shift]+[w] to open a "Create new console" dialog. There you can select Powershell and tick the "Run as administrator" checkbox at the very bottom of that dialog. If you're not using ConEmu, you can press [win]+[x] to open a menu from which you can start a Powershell window as Administrator.

Once the console is open, run yarn global add windows-build-tools. This might take a minute or two.

Docker

That's an easy one. There is Docker for Windows. Install it, run it, be happy.

Well, not quite. You need to have Hyper-V enabled first. Here is how you do that.

Attention: If Hyper-V is enabled, Virtual Box versions older than 6.0.0 don't work anymore. If you need Virtual Box 5.x you can't use Docker at the same time. Hyper-V and Docker or Virtual Box 5.x. Choose one.

Emojis

Very important, especially when you're coming from macOS. Emoji support on Windows is still pretty new and, admittedly, their Emojis are just plain ugly. In most applications you can press [win]+[.] to open an Emoji picker. It works great in "modern" applications like Chrome or VSCode, it works not so great (or even not at all) in other applications like the terminal, Notepad or WordPad.

Other unrelated tools

Tools that are worth taking a look at to improve your experience with Windows even more:

• Groupy - to organize your windows into tabs.
• IrfanView – great freeware to open (and convert) all different types of images
• Notepad 2 – as powerful, lightweight and fast replacement for Windows' native notepad.
• LockHunter – to find (and exit) processes which are locking files

There are probably many other things to know and do when you're setting up a Windows PC to use it for software development which I didn't mention here. If you have any questions, get in touch with me!