2022 JAVASCRIPT DEVELOPMENT SETUP ON WINDOWS (PART 1)

I have always enjoyed using Linux because of the look and feel of customized terminal and using commands for almost everything.

Recently I moved to windows operating system (Windows10) and it look impossible to start coding, why! Simply because windows looks more like a graphics design/gamming environment. I got frustrated reading windows doc on how to setup JavaScript on windows.

I searched google and found different approaches to setting up development environment on windows but none was satisfying 😎.

So, I will be sharing the best solution I found from my research and thanks to Techno Tim for helping out.

Who is this post for?
It simply for every frontend and backend developer using windows as their development workspace/environment.

“The secret to getting ahead is getting started.” ― Mark Twain

Ok then, Let jump right in!

Prerequisites: A working pc pre-installed with windows 10 . Windows 11 is out yea I know... this should still work with windows 11.

Browser
As a developer the first thing you need to install is internet browser
Head straight to google and search your favourite internet browser (e.g Firefox developer edition, Chrome, Edge, Internet Explorer)

1.
For this post we will stick to Google Chrome

2.

3.

Before we move ahead if you are a newbie you can stick to Chrome but if you feel invisible like to explore you download Firefox Browser Developer Edition - The browser made for developers
All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector.

For Firefox developer edition 👆👆👆

Windows terminal
Once you are done installing your favourite internet browser we will be installing an application from Microsoft store called Windows Terminal

What is Windows Terminal: this is a modern, fast, efficient, powerful, and productive terminal application for users of command-line tools and shells like Command Prompt, PowerShell, and WSL. Its main features include multiple tabs, panes, Unicode and UTF-8 character support, a GPU accelerated text rendering engine, and custom themes, styles, and configurations.
LINK for Windows Terminal, the app is free, don't worry.

Click your windows button and search for store

Open Microsoft store and search for Windows Terminal

Click get to download and click open when downloading is done

The next to do is 👇

SETTING UP WSL
You might be wondering what is WSL? It is simple. WSL is Windows Subsystem for Linux. Not to bore you with many definition, it is simply having a virtual machine that runs Linux Operation system on your Microsoft windows. Hope that was helpful 🤔🤔🤔.
For more info you can check WSL Documentation on Microsoft website
WSL

Turn on WSL feature on Windows
...... Tap Windows button and search Windows features

..... Scroll down to where you have Windows Subsystem for Linux and check the box

..... If you are doing this for the first time your windows will run few installations

..... Reboot or Restart once the installation is done.

Download and install Linux (ubuntu)
There are multiple distro of Linux but for this tutorial we will stick to ubuntu with LTS (Long Term Support)

👉 Open Microsoft Store and search for ubuntu (Click get for it to start downloading)

👉 Click Open to start Ubuntu
👉 Setup your username (use small letter; e.g: adeinfo) and press Enter

👉 Setup Password (Note: password will not be visible when typing) - Type password and press Enter.

👉 Once you are done, you should see something like this 👇👇👇 with other information.

Setup Windows Terminal to Run Ubuntu
We are going to set our Windows Terminal to Open Ubuntu by default without running ubuntu from the Windows App list.
😎 Open Windows Terminal and click the little drop down menu by the right as shown below

You can open any of the terminal listed below but our aim is to open Ubuntu by default when we start our Windows Terminal.

👉 Click 'setting', Change default profile to 'Ubuntu' and hit 'save'

👉 Restart Windows Terminal (Close and Open it again)

Setup Development Tools
Open Windows Terminal (It should open ubuntu by default)
Run the Following command;

sudo apt update

Enter password and press enter

sudo apt upgrade

Select yes if requested for any permission

Install ZSH
If you are fine with the Linux default terminal which is bash you can skip this part. To know what ZSH is you can follow this link. ZSH.
Run the below command on your ubuntu to install ZSH

sudo apt-get install zsh

.
.
.

Do you want to continue? [Y/n}]

press y and press enter to continue

Once ZSH is done installing, we will install OHMYZSH
Use this command to clone OHMYZSH

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Press enter...

Do you want to change your default shell to zsh? [Y/n]

press y and press enter to continue
Input your password and press enter to continue

That's it. 😓OHMYZSH has installed😓
Restart Windows Terminal

Installing NodeJs

There are many ways to install node but for this post we will be using NVM.
What is NVM: NVM is an acronym that means never mind🤦‍♂️, Oh sorry that's not related. NVM is Node Version Manager and it is a tool used to manage multiple active Node.js versions.

Let's install Nodejs

• Copy and paste the below code on your terminal

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

• Press Enter and restart terminal once installation is done
• After restart type nvm and press enter. If you get an error it simply means nvm was not installed or was not installed properly but if you see nvm commands listed then you have NVM installed. 🅵🅾🆁 🅽🆅🅼 🅴🆁🆁🅾🆁 - Check if NVM config was added to your zshrc. Copy and paste the below code nano ~/.zshrc Scroll down to see the below config;

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

• Press ctrl + X to exit

• This will install the latest LTS node version
  

nvm install --lts

• To check the node version installed

node -v

Installing Yarn

Some developers enjoy using yarn instead of node. So let's install yarn. Yes, you can use both on your PC without conflicts

• Copy and paste code on your terminal (Ubuntu / Windows Terminal)

curl -o- -L https://yarnpkg.com/install.sh | bash

• Restart your terminal
• yarn --version to see the version installed

Install Code Editor (VSCODE)

• Goto VS Code
• Open download folder and Install.
• Choose next till finish

🤜 What's Next 🤔🤔

Git & Github

Link VsCode with WSL

Others PART 2 - 2022 JAVASCRIPT DEVELOPMENT SETUP ON WINDOWS

Comments

[43kae]

This was so helpful, and I can't wait for part 2