Skip to content

New Developer Setup for Windows

Shannon Skinner edited this page Nov 28, 2021 · 18 revisions

This is the Windows-specific guide as a companion to the common New Developer Setup.

The common Shift72 development OS is Unix-based, so you'll need to install some extras to get started.

Windows Subsystem for Linux (WSL) and Ubuntu

WSL allows you to run a Linux distro inside Windows. WSL itself is a supported feature of Windows provided by Microsoft, while individual Linux distros are provided by their own vendors. If you are new to Linux, we recommend Ubuntu.

Follow the docs to enable WSL 2 and install Ubuntu.

Note: the Microsoft Store has a number of Ubuntu versions, e.g. 18.04, 20.04. Choose the one without the version number as it will be the latest version.

xdg-open

xdg-open is used to open your browser when starting the site. Verify that it is installed in Ubuntu by trying to run xdg-open from the command line. If not, when running a site with npm start you will hit "xdg-open": executable file not found in $PATH.

Install with sudo apt install xdg-utils and then npm start will be able to open your default Windows browser.

Tips

Get used to the Linux command line

There is only the command line, so you'll have to learn the Linux equivalent of Windows commands (e.g. ls instead of dir) and the Linux specific commands.

Stay clear of Windows drives

Store your files in the Linux file system.

If your terminal path starts with /mnt it's mounted a Windows drive (e.g. /mnt/c is your C: drive in Windows) and you should immediately change to your Linux home directory with cd ~.

Path environment variable

By default, WSL will append the Windows path environment variable to the Linux path environment variable (with the paths being Linuxified). Compare each OS variable:

  • From a Windows PowerShell: $Env:Path
  • From a Linux shell: echo $PATH

You might run into issues if your path chooses the wrong program. For example if you only had NPM installed in Windows, running a program in Linux that depends on NPM would use the Windows installation that could error if it is incompatible.

You can disable path appending (as well as a few other WSL options) with a wsl.conf file.

Visual Studio Code (VS Code) in WSL

Tutorial. Install - put on your PATH to be available to Linux.

Once installed, you can start VS Code from the command line in Linux and optionally a path to open, e.g.:

  • code to start VS Code with no files (you’ll have to browse to open something).
  • code . for the current folder.
  • code path/to/folder

Extensions

Remote - WSL

Install. After installing the extension, the next start of VS Code will set up a "remote" WSL server and you'll see it connected in the bottom left corner.

Installing other extensions in WSL

If you look at your other extensions you can see if they need to be installed in WSL as well.

Clone this wiki locally