Web development with Windows 10
Tags: webdev, windows, environment, devlive
Published: 2020-03-21 16:23:59

I'm writing this post because every time I switched on my windows machine and felt the urge to code, something was missing.
 
I'm used to macOS and Linux systems like Arch, Ubuntu, so things like a proper terminal, a package manager, `bash`, `zsh`, `brew`, `docker`, ... are the universal tools I need. 

On Windows, I needed to deal with PowerShell, strange syntax compared to `POSIX`, no good package managers, weird `git` installations, and many more.

Web development felt like a huge bummer. 

Maybe you are thinking now: *"So why are you on Windows anyway if you don't like it?"*.

It is easy to answer that question. I'm also a gamer 🎮 , and despite all the improvements, Windows is still the king for gaming.

So I'm used to switching between environments, but there are moments when you don't want to change because you are just too lazy 😴.

## WSL to the rescue ⛑
When you have never heard of `WSL`, don't worry. WSL or Windows Subsystem for Linux is a compatibility layer for running Linux binaries natively on Windows 10.

So, in short, you have a lightweight Ubuntu within your Windows system that can talk and interact with each other.

If you are developing with `Visual Studio Code`, for example, we will make use of that functionality to be in a Linux world with all the benefits and still have Windows as our primary operating system. More about that later.

Sounds cool.

## Enable WSL

To get started with WSL, you need to enable it first. 

Open a PowerShell terminal in administrator mode and type. 
```
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
```
Afterward, restart your computer if prompted. 

For reference, you can visit the [official windows docs](https://docs.microsoft.com/en-us/windows/wsl/install-win10) 

## Choose a Linux Distribution

Next, we choose a Linux distribution for WSL.

Just open the Microsoft Store and search for `Ubuntu`.

![Microsoft Store](https://docs.microsoft.com/en-us/windows/wsl/media/store.png)

On the distro page, select `Get` and wait till you can `Launch` it.

![Ubuntu Microsoft Store](https://docs.microsoft.com/en-us/windows/wsl/media/ubuntustore.png)

>*Important: You must launch the distro once before you can get started with WSL.*

A terminal should pop up, where you create your first Linux user account.

![Ubuntu Install](https://docs.microsoft.com/en-us/windows/wsl/media/ubuntuinstall.png)

**If you elevate a process using `sudo`, you will need to enter your password, so make sure you choose a password you can easily remember!**

Now we are ready to go! 🎉

## Enhance WSL with the new Windows Terminal

The built-in terminal of Windows isn't wrong, but if you are used to `iTerm`, `hyper`, or any other terminal emulator, it isn't that good.

To get the new terminal by Microsoft, search for `Windows Terminal` in the [Microsoft Store](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701)

After launching, you should see something like

 ![Windows Terminal](https://dev-to-uploads.s3.amazonaws.com/i/c1zh3w0cmofo35gd0dad.PNG)

If you still encounter Powershell as your default terminal, go to the settings of the terminal (arrow down icon in the header) and search for

```
      {
        "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
        "hidden": false,
        "name": "Ubuntu",
        "source": "Windows.Terminal.Wsl"
      },
```
Copy that `guid` and paste it into the `defaultProfile` setting.

## Install `zsh`

This is pretty straight forward. First of all, update your packages with 
```
sudo apt-get update
```
After that, you can install `zsh` with
```
sudo apt-get install zsh
```
After installing, execute `zsh` in your terminal and create your preferred settings.

To set `zsh` as your default shell, just type
```
chsh -s $(which zsh)
```
The next time you open a new terminal or tab within your WSL, `zsh` should be started automatically.

I will not detail this post about how I configured my shell because this is very opinionated and depends on your current needs.

## Configure `git`

You usually don't need to configure much in `git` except your `username` and `email`, but I want to use Windows's built-in credential helper.

Make sure that `git` is installed in your Ubuntu environment.
```
sudo apt-get install git
```
Also, install [`git` for Windows](https://git-scm.com/download/win) (you need it for the credential helper)

If both are installed successfully, go into your shell and type
```
git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager.exe"
```
> If you have installed `git` for Windows in another directory, you need to change that path

When you clone a repository, which needs `HTTP` authentication, the Windows Credential Helper should pop-up.


## Enable `gpg`

Because I'm a fan of `gpg` signed commits, we should enable that.

You can install `gpg` in Ubuntu via 
```
sudo apt-get install gpg
```
The next step is creating a key; I will forward it to the excellent [GitHub documentation](https://help.github.com/en/github/authenticating-to-github/generating-a-new-gpg-key) about `gpg`.

If everything is set up, you only need to add a small change within your `.zshrc` profile because otherwise, you cannot enter the password if you sign something.
```
export GPG_TTY=$(tty)
```
To test that `gpg` is working correctly.
```
echo "test" | gpg --clearsign
```
should output something like
```
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

test
-----BEGIN PGP SIGNATURE-----
....
-----END PGP SIGNATURE-----
```

The last step is to configure `git` to use `gpg`. For that, we need our public key first
```
gpg --list-keys
```
This command should print 
```
pub   rsa3072 2020-02-29 [SC] [expires: 2022-02-28]
      YOUR_PUBLIC_KEY
uid           [ultimate] YOUR NAME
sub   rsa3072 2020-02-29 [E] [expires: 2022-02-28]
```
Copy your public key identifier and type 
```
git config --global user.signingkey YOUR_PUBLIC_KEY
```
`git` is signing your commits now via `gpg`!

## Install Visual Studio Code

I use [Visual Studio Code](https://code.visualstudio.com/) as an editor, and luckily with the [Remote Extension Pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack), it is a real pleasure to work with Windows + WSL. 

After installing `code` and the extension pack, go into your terminal and open a folder via
```
code .
```
Visual Studio Code should pop-up and prepare the connection to WSL.

If no errors are popping up, you are good to go.

 Code will use WSL everywhere, and you can enjoy your Windows + Linux development experience.

For troubleshooting, I recommend the "Getting Started Guide" of the [official WSL extension](https://code.visualstudio.com/remote-tutorials/wsl/getting-started)

## Conclusion

I hope this guide helps you set up a serene and productive environment for development on Windows 10.

If you need help or miss something important in this guide, let me know via the comments.

Happy developing! 😊👩‍💻