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