2022 JAVASCRIPT DEVELOPMENT SETUP ON WINDOWS (PART 1)
Tags: javascript, beginners, tutorial, node
Published: 2022-03-05 12:47:34

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![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibvxrpv5m3nu9i9ndk3z.PNG)

2.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqo5ayrmd5qormdgucnj.PNG)

3.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je61k28kqwxg3befmmgg.PNG)

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.*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk6yvg4j01vyfamvfhka.PNG)
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](https://www.microsoft.com/store/productId/9N0DX20HK701), the app is free, don't worry.

Click your windows button and search for store
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ywjxaejq3l80kk0xk1o.png)

 Open Microsoft store and search for Windows Terminal
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrb53kpk1mwuawckcxko.png)

Click **get** to download and click **open** when downloading is done
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvkej4xb6vuy2vi1peom.png)
 
 

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](https://docs.microsoft.com/en-us/windows/wsl/)

>> **Turn on WSL feature on Windows**
...... Tap Windows button and search Windows features
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttbmg7wwirbm1ngiegxh.png)

..... Scroll down to where you have Windows Subsystem for Linux and check the box
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si5ah86tde8qjmad2sr0.png)

..... If you are doing this for the first time your windows will run few installations
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmf42fc5d5ifasq6dhpo.png)

..... 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)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l80d39q9h3rlflwl0o9b.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkf0a2v71bm72fa99mns.png)
 
👉 Click **Open** to start Ubuntu
👉 Setup your username (use small letter; e.g: adeinfo) and press Enter
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chvtmm6rvz7pj83wbm1l.PNG)
👉 Setup Password (Note: password will not be visible when typing) - Type password and press Enter.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz1z9qgszxjtlrcvir74.PNG)

👉 Once you are done, you should see something like this 👇👇👇 with other information.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76uz1hzs4zdjnbzkp7l9.PNG)
 

> **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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6kbmdfdpmvn2ah3emi3.png)
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'
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atl86sbvabitl0qonxuk.PNG)
👉 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](https://en.wikipedia.org/wiki/Z_shell).
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](https://ohmyz.sh/)
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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18hkb12x392oc1o5bbmw.PNG)
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](https://code.visualstudio.com/download)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uppic1camdmlu146jvct.PNG)
* Open download folder and Install. 
* Choose next till finish
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x764bxm7lqtssrxmp5o.PNG)

🤜 What's Next 🤔🤔
### Git & Github
### Link VsCode with WSL
### Others [PART 2 - 2022 JAVASCRIPT DEVELOPMENT SETUP ON WINDOWS](https://dev.to/adeinfo/part-2-2022-javascript-development-setup-on-windows-474j)