• Home
  • Blog

My Web Development Environment on Windows

Updated on May 30, 2019

Note: I am eagerly awaiting Windows Terminal, WSL2, and the Remote Development Extension Pack for VS Code. This post will be outdated very soon!

After trying out Linux and Windows separately and via dual booting, I finally tried out the Windows Subsystem for Linux and worked out a setup that I feel is the best of both worlds. This is the latest iteration of that setup.

Windows Subsystem for Linux

I absolutely love WSL. It's not without its issues, but I am now using it exclusively for my dev environment. I get the Linux command line I love and also get to separate my tooling from Windows.

Enable the "Windows Subsystem for Linux" feature by opening PowerShell as Administrator and running:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

After rebooting, open the Microsoft Store to find and install your preferred flavor of Linux. I like and am used to Ubuntu, so the instructions henceforth will reflect that.

Fira Code

Font choice is very subjective of course, but I like Fira Code's aesthetics and it supports ligatures and all the miscellaneous characters in my setup without needing to install multiple fonts.

Check out and download Fira Code.

After unzipping the file, open the ttf folder, double-click each font file, and click Install Font.

Hyper

Although I’m often using VS Code’s integrated terminal, I still use my dedicated terminal app Hyper for SSH and scripting. I’ve found Windows-native terminals like ConEmu to be faster on startup, but didn’t notice any performance hits on my machines otherwise and prefer Hyper's beautiful themes and extensions.

Download the Hyper installer.

Hyper defaults to PowerShell. To change that to WSL, launch Hyper, hit ctrl + comma to edit preferences, and change the following:

shell: `C:\\Windows\\System32\\wsl.exe`,
shellArgs: [],

I also change my font to Fira Code by adding:

fontFamily: '"Fira Code", "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

ZSH and Oh-My-Zsh

While bash works fine, I can't live without all the quality of life improvements in themes and plugins from ZSH and the Oh-My-ZSH framework to manage the ZSH config.

ZSH can be installed in Ubuntu by running:

sudo apt-get install zsh # install ZSH
chsh -s $(which zsh) # set ZSH as default shell

Restart Ubuntu and test that it worked with echo $SHELL.

Oh-My-ZSH can be installed by running:

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

I make regular use of two Oh-My-ZSH plugins - zsh-autosuggestions and zsh-syntax-highlighting. They are both self explanatory in their purpose.

To install both, first run:

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Then edit ~./zshrc to include the following:

plugins=(
  git
  zsh-autosuggestions
  zsh-syntax-highlighting
)

I also customize further by again opening ~./zshrc and adding:

ZSH_DISABLE_COMPFIX=true # suppress warnings from the installed plugins
ZSH_THEME="agnoster" # change theme to Agnoster
DEFAULT_USER="" # add your username in quotes to remove username from prompt
prompt_dir() {
  prompt_segment blue black '%2~'
} # trim prompt to show only 2 directories in path
LS_COLORS="ow=01;36;40" && export LS_COLORS # fix default directory colors

n

N is an installation manager for Node.js that makes it easy to switch between versions. I've been using this instead of NVM which gave me significant performance issues and added half a minute to my terminal startup time.

N can be installed by running:

curl -L https://git.io/n-install | bash

Run n --help to see syntax and usage. It automatically installs the most recent LTS version with the above instructions.

Visual Studio Code

I can't recommend Visual Studio Code enough. It feels light and performant even though it's an Electron app. The extension library is top notch and I've been able to remove or disable any feature I'm not interested in like the Git tab or feedback smiley face. The developers are somehow cranking out new updates every month and interact directly with the dev community on Github.

Download the Visual Studio Code installer.

To set the integrated terminal to WSL, hit ctrl + comma and add:

"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe"

Then switch fonts to Fira Code by adding:

  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",

Docker

Linux containers with Docker seem much more efficient than full-blown virtual machines and I am using them exclusively right now for development and deployment.

There was a bit of a learning curve, but I love not having to install multiple language environments or worry about dependencies between projects on the same machine. I also know if it runs in my containers, it will run just the same when deployed using those same containers in a Docker image.

Note: If you are on Windows 10 Home, you will have to use Docker Toolbox since Docker for Windows requires Hyper-V virtualization which is only available on Pro and Enterprise editions. The directions below may not work for this version.

Download the Docker for Windows installer.

After installing, open up the general settings and expose the daemon without TLS. This will allow WSL to connect to the Docker daemon running on Windows.

Then open up ~./zshrc and add the following:

export DOCKER_HOST=tcp://localhost:2375

Additional Resources