Setting up Web Development environment in WinNux (Windows + Linux)
Tags: webdev, tooling, programming, beginners
Published: 2022-03-14 17:21:20

In a previous blog, I shared some amazing [online playgrounds](https://dev.to/itsrakesh/online-playgrounds-for-every-technology-5e6j) to quickly start your dev environment. But we all need a local setup at some point. Development with windows is not that great. When working with large projects you have to use Linux for some stuff. For this, we need a virtual machine and a Linux distro. But windows introduced **Windows Subsystem for Linux**(WSL) so that we can do Linux stuff inside windows. In this blog, let's set up a Web Development environment to build production-level applications.

## Let's get started

![Let'SGetStartedGIF](https://cdn.hashnode.com/res/hashnode/image/upload/v1647239378215/Ya5oHErz7.gif)

## Frontend
Setting frontend tools like editor, browser etc.

### Setup VSCode
**Visual Studio Code** is so far the best code editor for Front-end development. So, let's install it from [here](https://code.visualstudio.com)

![Visual Studio Code](https://cdn.hashnode.com/res/hashnode/image/upload/v1647241450646/_eDxpoKE4.png)

**Recommended extensions:**
- Auto Rename Tag [#](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- Beautify [#](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
- ESLint [#](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- Prettier - Code formatter [#](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- Babel JavaScript [#](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)

**Optional extensions:**
- Image preview [#](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
- Color Highlight [#](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- Material Icon Theme [#](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

### Browser
Recommended browser for JavaScript debugging - [Google Chrome](https://www.google.com/intl/en_in/chrome)

![Google Chrome Browser](https://cdn.hashnode.com/res/hashnode/image/upload/v1647242741778/Nqr3SxrZt.png)

Recommended browser for design and CSS - [Firefox developer edition](https://www.mozilla.org/en-US/firefox/developer)

![Firefox Browser Developer Edition](https://cdn.hashnode.com/res/hashnode/image/upload/v1647243118668/E3YpejxcB.png)

This browser is the ultimate weapon for all the design stuff.
![itsrakesh.co](https://cdn.hashnode.com/res/hashnode/image/upload/v1647243807191/BkNEJ1V8U.png)

Some main features I like in this- 
- **Style Editor** - Firefox made it really easy to test CSS quickly with style editor. You can write all the CSS for an element in this editor and if you are satisfied just copy and use it in your project. This way you don't need to reload the page every time you make changes to your CSS.

![Firefox style editor](https://cdn.hashnode.com/res/hashnode/image/upload/v1647244452622/BDW8sflTs.png)

- **Visual Editing** - Firefox made this tool to help animators and visual designers.

![Firefox visual editing](https://cdn.hashnode.com/res/hashnode/image/upload/v1647244915217/XOZLILjTM.png)

Recommended browser extensions-
- Debug CSS [#](https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj)
- JSON Viewer Pro [#](https://chrome.google.com/webstore/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc)

## Backend
For the backend, VSCode is fine for small projects. But for large projects [Jet brains](https://www.jetbrains.com) IDEs will be useful.

### Setting up WSL2
Windows Subsystem for Linux(WSL) is a feature Windows introduced to do Linux things inside Windows. WSL2 is a faster version of WSL1 with added features. This is not a simulation it's a real Linux kernel inside Windows.

Requirements,
- You must be running Windows 10 version 2004 and higher (Build 19041 and higher) or Windows 11.

To install WSL,
- Make sure your Windows updates are done.
- Open Powershell and run
```bash
wsl --install
```
- Now you have to enable the WSL feature, to do so,
  - In the search bar, type "Turn Windows features on or off"
  - Search for "Windows Subsystem for Linux" and enable it by checking the box.
  - Now restart. That's it we now enabled WSL.
**Tip**: Alternatively you can just run this command.
```bash
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```
We now need to download a Linux distro to use with WSL. You can install any distro but I recommend Ubuntu because it has special support.
To install the Ubuntu distro,
- Open Microsoft store search for "Ubuntu 20.04.4" -> Click "Get" -> Install

### Upgrade to WSL2
To upgrade just run this command,
```bash
wsl --set-version <distro-name> 2
```
Replace `<distro-name>` with your distro. In our case,
```bash
wsl --set-version Ubuntu-20.04.4 2
```

**Tip**: If you want to go through the Windows file system. You have to mount the directory.
```bash
$ cd ~
$ cd /mnt/c
```

![Ubuntu wsl](https://cdn.hashnode.com/res/hashnode/image/upload/v1647272375403/SdDpgO9d5.png)

That's it! Now you can do all the cool Linux stuff inside Windows.

**Optional**
- **Windows terminal [#](https://www.microsoft.com/store/productId/9N0DX20HK701)** - With Windows terminal, you can open different instances of different terminals like browser tabs.

![windows terminal](https://cdn.hashnode.com/res/hashnode/image/upload/v1647272122508/25unrabQt.png)

- **Oh my zsh [#](https://ohmyz.sh)** - If you want to be cooler, then you can use zsh and install this.

![oh my zsh](https://cdn.hashnode.com/res/hashnode/image/upload/v1647272481087/zvUIfUq9Y.png)

- **Remote - WSL [#](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)** - This is a VSCode extension to open WSL in integrated terminal.

### Docker and docker desktop

![docker desktop](https://cdn.hashnode.com/res/hashnode/image/upload/v1647275339979/x3tY-zG_6.png)

Docker is a tool to build, ship and share software easily. It is widely used in large projects. But it may not make sense for small projects.

That's it! This setup is enough for building full-stack websites.

---

You may also like these blogs,
- [Best productivity tools for web developers](https://dev.to/itsrakesh/best-productivity-tools-for-web-developers-1e7g)
- [Tools I use from design to deployment](https://dev.to/itsrakesh/tools-i-use-from-design-to-deployment-testing-and-setting-up-analytics-2akd)

---

What other things do you want to add? Do share in the comments.

---

Follow for more. Have a nice day!!!