DEV Community

Adebare Amos
Adebare Amos

Posted on

2022 JAVASCRIPT DEVELOPMENT SETUP ON WINDOWS (PART 1)

#javascript #beginners #tutorial #node

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 ChromeImage description

2.
Image description

3.
Image description

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
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
Image description

Open Microsoft store and search for Windows Terminal
Image description

Click get to download and click open when downloading is done
Image description

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
Image description

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

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

..... 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

Image description

👉 Click Open to start Ubuntu
👉 Setup your username (use small letter; e.g: adeinfo) and press Enter
Image description
👉 Setup Password (Note: password will not be visible when typing) - Type password and press Enter.
Image description

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

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
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
👉 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 fullscreen mode Exit fullscreen mode

Enter password and press enter

sudo apt upgrade
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

.
.
.

Do you want to continue? [Y/n}]
Enter fullscreen mode Exit fullscreen mode

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)"
Enter fullscreen mode Exit fullscreen mode

Press enter...

Do you want to change your default shell to zsh? [Y/n]
Enter fullscreen mode Exit fullscreen mode

press y and press enter to continue
Input your password and press enter to continue
Image description
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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

  • Press ctrl + X to exit

  • This will install the latest LTS node version

nvm install --lts
Enter fullscreen mode Exit fullscreen mode
  • To check the node version installed 
node -v
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Restart your terminal
  • yarn --version to see the version installed

Install Code Editor (VSCODE)

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

🤜 What's Next 🤔🤔

Git & Github

Link VsCode with WSL

Others PART 2 - 2022 JAVASCRIPT DEVELOPMENT SETUP ON WINDOWS

Top comments (1)

Collapse
 
43kae profile image
43kae •

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

Read next

dailysandbox profile image

A step-by-step guide to setting up a Puppeteer screenshot API on Ubuntu

Art -

hax profile image

OWASP Juice Shop DOM XSS Walkthrough

haXarubiX -

moh_moh701 profile image

C# Clean Code: Commenting Conventions

mohamed Tayel -

mukarramjavid profile image

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid -