Workflow

Gone are the days when Macbooks were seen as a pivot in Front End Development world. At this moment, Front End Development spectrum is blessed where Windows has improved to the point that you no longer need to seek for expensive Mac machines. You could get away with buying a minimal configured machine from Kijiji or eBay, that can run a WSL and continue to build on your next startup idea.

There are only 3 main things you would require on your Windows machine:

• Visual Studio Code
• WSL (Recommended: Ubuntu)
• Hyper (Recommended)
• Cascadia Font (Recommended)

Step 1 (Clean up)

• Update Windows 10 to the latest patches.
• Use dark mode in Windows for toned display. (FLUX App is recommended for developers who have eye sensitivity problems. You can download FLUX using choco install f.lux once you have setup Chocolatey)
• Restart the machine and move on to Step 2.

Step 2 (Apps)

• Download and install Chocolatey: https://chocolatey.org/install. Think of this as BREW or a package handler for your OS like Yarn.
• See list of all available packages here: https://chocolatey.org/packages.
• Install and activate WSL. See docs: https://docs.microsoft.com/en-us/windows/wsl/install-win10.
• Install VS Code using choco install vscode. Recommended extension: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync, which allows you to download your preferred workstation extensions locally in one go.
• Install Hyper terminal using choco install hyper.

Step 3 (Clean up)

• Configure VS Code terminal and Hyper to use Bash (WSL).
• VS Code will install specific extensions like "Remote WSL for Ubuntu", please complete those processes.
• Download and install Cascadia font: https://github.com/microsoft/cascadia-code. Set that as default font in Hyper.
• Restart the machine.

Step 4 (WSL Clean up)

• Update and clean up the Ubuntu WSL distro using: sudo apt update && sudo apt upgrade && sudo apt dist-upgrade && sudo apt autoclean && sudo apt autoremove && sudo apt purge.

Step 5 (Apps)

• Clone the following repository and copy only bash files to your home location in WSL. Command: cd ~ && mkdir Sites && cd Sites && git clone https://github.com/tpkahlon/source-files && cd source-files && cp .bash* ~. Run source ~/.bashrc to restart terminal process to apply changes. In the .bashrc file, you can add aliases specific for your daily development. Only make modifications to .bashrc file as needed in future.
• Install git using sudo apt install curl git.
• Set up username and email for Git: git config --global user.name "Xyz" and `git config --global user.email "xyz@xyz.com".
• Follow the steps to generate and store SSH key in your Github account. Link: https://help.github.com/en/articles/connecting-to-github-with-ssh.
• Install NodeJS. Link: https://github.com/nodesource/distributions/blob/master/README.md#debinstall.
• Install Yarn. Link: https://yarnpkg.com/lang/en/docs/install/#debian-stable.

Step 6 (Revision)

Let us pause here and see what we have achieved so far. All your project dependencies like Node, Git etc. stay within your WSL machine. Your Windows machine only holds VS Code and Hyper apps. This setup is so clean, has less clutter and easy to maintain. Going forward, initialize all your projects in WSL. Let's see a sample below.

Step 7 (Typical Workflow)

• Add a Sites directory in home location using cd ~ && mkdir Sites.
• Clone a sample project here: git clone https://github.com/taniarascia/react-hooks && cd react-hooks && yarn && yarn start.
• Run code . to open the source files from WSL to VS Code in Windows.
• You can see the testing environment running on your Windows machine via WSL.

Step 8 (Maintenance)

Run u in the WSL. It is an alias available in .bashrc file that will update/prune all necessary/outdated packages in WSL.

We have done it! Hopefully, you have got your development environment successfully setup in Windows. It is clean, minimal and tasks are distributed across WSL and Windows. Stay hassle free and have fun coding amazing apps. Set the trend: #MacIsOptionalIn2019.

Goodies

• Check out my Settings sync gist to get up and running with all necessary VS Code extensions for React development. Link: https://gist.github.com/tpkahlon/8c22c8f1929c37ecf7d8c7ba1ee4eb2f.