In a previous blog, I shared some amazing to quickly start your dev environment. But, we all need a local setup at some point. online playgrounds 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 (WSL) so that we can do Linux stuff inside windows. Windows Subsystem for Linux In this blog, let's set up a Web Development environment to build production-level applications. Frontend Setting frontend tools like editor, browser, etc. Setup VSCode is so far the best code editor for Front-end development. So, let's install it from Visual Studio Code here Recommended extensions: Auto Rename Tag # Beautify # ESLint # Prettier - Code formatter # Babel JavaScript # Optional extensions: Image preview # Colour Highlight # Material Icon Theme # Browser Recommended browser for JavaScript debugging - Google Chrome Recommended browser for design and CSS - Firefox developer edition This browser is the ultimate weapon for all the design stuff. Some main features I like in this- - 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. Style Editor - Firefox made this tool to help animators and visual designers. Visual Editing Recommended browser extensions- Debug CSS # JSON Viewer Pro # Backend For the backend, VSCode is fine for small projects. But for large projects IDEs will be useful. Jet brains 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 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. : Alternatively you can just run this command. Tip 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, wsl --set-version <distro-name> 2 Replace with your distro. In our case, <distro-name> wsl --set-version Ubuntu-20.04.4 2 : If you want to go through the Windows file system. You have to mount the directory. Tip $ cd ~
$ cd /mnt/c That's it! Now you can do all the cool Linux stuff inside Windows. Optional - With Windows terminal, you can open different instances of different terminals like browser tabs. Windows terminal # - If you want to be cooler, then you can use zsh and install this. Oh my zsh # - This is a VSCode extension to open WSL in an integrated terminal. Remote - WSL # Docker and Docker desktop 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. Conclusion That's it! This setup is enough for building full-stack websites. Also Published here

Google

Microsoft

Mozilla

8 Open-source Projects to Help Your Business Run Efficiently

A High Level Introduction to Web2.0 and Web3.0

Website

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

Easy Windows Subsystem for Linux(WSL) Setup to get you Building Apps in Minutes

Easy Windows Subsystem for Linux(WSL) Setup to get you Building Apps in Minutes

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Most Common Ways to Connect your Node and React Applications

The Noonification: The Sun Snarers (11/1/2022)

100 Days of Code: Death of Summer on the Island of NixOS

10+ Things I Love About Linux

10 Basic Tips on Working Fast in UNIX or Linux Terminal

The Noonification: Breaking Axioms in Program Execution (10/29/2023)

3 Most Common Ways to Connect your Node and React Applications

The Noonification: The Sun Snarers (11/1/2022)

100 Days of Code: Death of Summer on the Island of NixOS

10+ Things I Love About Linux

10 Basic Tips on Working Fast in UNIX or Linux Terminal

The Noonification: Breaking Axioms in Program Execution (10/29/2023)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps