The Onist

The Onist


Tags


Setting up Windows for Modern JavaScript Development

Developing JavaScript on Windows has always been incredibly painful, but not anymore! Learn how to setup a full fledged, Unix based development environment on Windows using WSL Terminal, ZSH, NVM, Yarn and more!


Introduction

Writing JavaScript on Windows PCs has historically felt more like much more like a chore than our a fun day of hacking. This is because almost all online tutorials, project README's, 3rd party dependencies, etc. almost always assume you are working on a Unix based machine (Linux or Mac). This proves challenging for Windows developers since until recently Windows has had near zero support for Unix without the help of clunky 3rd party add-on environments.

Thankfully over the past few years Microsoft has done a complete 180 on this and now Windows 10 actually supports native Unix environemnts with a bit of setup. Setting this up will allow you to copy and paste basically every command you see on the internet as it relates to JavaScript to help you write your applications faster. Today I am going to show you how to setup your Windows PC for JavaScript development, the correct and modern way! Let's get started!

Setting up Windows Terminal

Open up the Microsoft app store and search for "Windows Terminal". It should be the first result and look something like this.

windows-terminal-install

After it is installed, run the application and notice that it by default is running Windows PowerShell which doesn't support Unix commands. We will fix this momentarily.

powershell-1

Next we are going to enable WSL (Windows Subsystem for Linux) that comes installed but not enabled on your PC. This will allow our new termial to understand Unix and Linux-like commands.

To install, search for "turn Windows features on or off" or open this via your Control Panel. Scroll down in the feature list and check the box to enable Windows Subsystem for Linux. You will need to restart your computer for the changes to take effect.

WSL-enable

Installing Ubuntu and Enabling it in Windows Terminal

After WSL is enabled and your system has rebooted, open up the Microsoft and search for "Ubuntu". Locate, download and install the application.

ubuntu-install

After the install is complete, run the application to start the setup. Ubuntu will ask you for a new UNIX username and password. Be sure to enter credentials that you will remember. Once that is complete you should see a screen similar to below with the username that you selected.

ubuntu-setup

Now that Ubuntu is setup, close the application and open Windows Terminal. By default, the terminal will still start with PowerShell. To fix this, open up the settings by pressing the down arrow icon in the header and selecting Settings from the dropdown. A JSON file will be opened that should look something like this.

{
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "defaultProfile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
    "copyOnSelect": false,
    "copyFormatting": false,
    "profiles": {
        "defaults": {},
        "list": [{
            "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
            "name": "Windows PowerShell",
            "commandline": "powershell.exe",
            "hidden": false
        },
        {
            "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
            "name": "Command Prompt",
            "commandline": "cmd.exe",
            "hidden": false
        },
        {
            "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
            "hidden": false,
            "name": "Azure Cloud Shell",
            "source": "Windows.Terminal.Azure"
        },
        {
            "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
            "hidden": false,
            "name": "Ubuntu",
            "source": "Windows.Terminal.Wsl"
        }]
    },
    "schemes": [],
    "actions":
....
}

Notice that the defaultProfile has a guid value that matches Windows PowerShell for the profiles list. Copy and paste the guid from Ubuntu and paste that into the defaultProfile. In the example about it would look like this, "defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}".

Save the settings.json file, close and reopen your terminal and you should now see Ubuntu load by default.

Customizing our new Linux Terminal

Before we begin customizing our new terminal, let's ensure our Ubuntu has the latest and greatest updates installed. To do this run sudo apt-get update and enter your password. This will grab, but not yet install, all of the latest updates.

ubuntu-update

After a few minutes when the above command has completed, let's now actually install the update. To do this simply run sudo apt-get upgrade. You may be asked a few times to approve a few of the installed, if so just press Enter or Y to continue through.

ubuntu-upgraded

Once this is completed, the fun really begins. By default our shell will be running Bash. This is fine for some but most developers including myself install ZSH and set that as our default shell. You may skip this next part of the tutorial if Bash is your preferred shell.

To install ZSH, run sudo apt-get install zsh and approve the on screen prompts. Once it is installed let's actually installed another package called [Oh-My-Zsh]https://ohmyz.sh/). To install copy and run the following command sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)". Allow the install to continue and then also set OMZSH to be the default shell.

omzsh-install

Once this is installed we can now begin to configure the rest of our development environment. A quick callout here however is that OMZSH is super powerful and is used to create beautiful terminal expiriences. I will cover more on the topic in a future post but if you are ancy to further customize your new shell, now would be a good time! Powerlevel10k is a great one stop shop to really take your new ZSH terminal to the next level.

Installing Node.js via Node Version Manager

Node Version Manager (NVM), it helps you install and manage multiple versions of node installations on your computer. It is really handy when you have multiple projects that each require a different version of Node to able to run. With NVM, its as simple as a few commands to switch between these versions.

To install NVM, let's go out to their GitHub repo and scroll down to the installation section and copy the curl or wget command. As of this writing the current command is

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Copy and paste that into your new ZSH terminal to download and install. Now type in nvm into the terminal and you should get a long list of options printed out. If you do not see this, or more likely, get the nvm: command not found response. Try closing and reopening your terminal or simply run source ~/.zshrc to resource our profile. If you are still having issues, most likely your .zshrc file did not get updated with the NVM autoload snippets. You can find the script in the Github repo linked above, open and ensure your profile has the snippet added.

Now that we have NVM installed, we can use it to install any and all versions of Node we desire. For this tutorial lets install the current LTS (Long Term Support) version of Node which is version 14. To install and set as the default version, simply run nvm install 14 && nvm alias default 14. This will install and to set it Node 14 as the default version for all projects.

NVM is super useful and I encourage you to learn more about it via their documentation.

Further Customization Options

Now that we have a Linux VM, a powerful new Terminal and Node installed, we have all the peices to start developing JS like a pro. There are a ton of further personalizations that I like to make but they may not be for everyone depending on your preferences. With that being said, I am going to list the further customizations that I usually take with a quick explanation of each.

Yarn

Yarn is a package manager alternative to NPM which comes bundled with Node. Package managers nowadays dont differ too much but they are required to setup and install dependencies of projects. I have been using Yarn for years and still prefer it over NPM (even though NPM has mostly caught up to it in recent years). If you would like to setup Yarn, you can follow their setup guide.

GitHub

Most projects that you will interact with with be based in GitHub and therefore getting setup with GitHub is usually worthwhile. If you don't already have an account, I would reccomend signing up and then following their great documentation on how to integreate your account with your Termimal.

IDE

Most developers are super opinionated when it comes to their prefered IDE. I personally prefer the WebStorm product offered by IntelliJ. This is not free and therefore I wouldn't recommend for everyone. Other popular choices are VSCode and Atom. You can't really go wrong with any of these options nowaways as they all are super powerful and extremely customizable.

Conclusion

If you made it all the way to the end, you now have a solid setup to develop JavaScript on your Windows machine. Windows has really come a very long way in recent years in terms of Linux support and their efforts can truly be felt here.

Thanks for following along and if you found this tutorial helpful, please share and let me know about it down in the comments!

Share Post
View Comments