Frontend development has become increasingly popular in recent years, and developers are constantly seeking efficient ways to streamline their workflows. One powerful solution is setting up Windows Subsystem for Linux (WSL) for it, coupled with popular integrated development environments (IDEs) such as Visual Studio Code, Fork, and software that don’t have any WSL integration.
This article will guide you through the process of configuring WSL and the software to enhance your frontend development workflow.
What is WSL?
WSL is a compatibility layer provided by Microsoft that allows users to run a Linux distribution directly on Windows 10 and 11. It provides a native Linux environment within Windows, enabling developers to utilize Linux tools, commands, and software without the need for dual-booting or virtual machines.
Why use WSL for frontend development?
Full Linux compatibility
WSL provides a full Linux compatibility layer, enabling you to use Linux-specific tools and commands directly within your Windows environment. This compatibility extends to package managers, scripting languages, text-processing utilities, and other prevalent tools in the Linux ecosystem.
Consistent environment
WSL ensures that the development environment is consistent across team members, regardless of the operating system they use. This eliminates potential compatibility issues and simplifies collaboration.
Flexibility and customization
WSL provides a high degree of flexibility and customization options. You can choose from a variety of Linux distributions available on the Microsoft Store, or import your own custom distribution. This flexibility allows you to select the Linux environment that best suits your development needs. Additionally, WSL supports the installation of various programming languages, frameworks, and tools, enabling you to tailor your environment to match your frontend development stack.
Resource isolation
It provides a separate Linux subsystem within your Windows system. This means that your main Windows environment remains unaffected, allowing you to keep it clean and free from clutter related to frontend development dependencies. WSL provides a sandboxed environment where you can install and manage your frontend tools and libraries without polluting your main system.
Learning and skill development
Embracing WSL expands your skill set as a developer. By immersing yourself in a Linux environment, you can gain familiarity with Linux-specific workflows, command-line tools, and best practices. This knowledge can prove invaluable, as Linux is widely used in server-side and cloud-based environments. It also enables you to tap into the vast Linux community, where you can seek support, learn from experts, and contribute to open-source projects.
Installing WSL
Enable WSL
Open PowerShell or Windows Terminal as an administrator and run the command wsl –install. This will install WSL 2 and Ubuntu as the default Linux distribution. Follow the on-screen instructions, including creating a username and password for the Linux environment.
Limiting Memory and Cores in WSL using .wslconfig:
The .wslconfig file allows you to set global resource limits for all your WSL distributions. Adjusting these limits ensures that your system resources won’t be fully occupied by the Linux Subsystem
Open a text editor and create a file named .wslconfig in your user directory (C:\\Users\\YourUserName\\.wslconfig).
Add the following configuration lines:
[wsl2]
memory=<memory limit>
processors=<CPU count>
Replace <memory limit> with the desired memory limit in bytes (e.g., 4G for 4 gigabytes), and <CPU count> with the desired number of CPU cores (e.g., 2 for two cores).
Save the .wslconfig file.
To apply the new configuration, you need to restart the WSL instance.
- Open PowerShell/Terminal as an administrator.
- Run the command wsl –shutdown to terminate all running WSL instances.
- Start a new WSL session, and the new memory and CPU limits will take effect.
Setting up the IDE’s outside the Linux Subsystem
One efficient approach to streamline your workflow is by setting up your integrated development environments (IDEs) outside of the Windows Subsystem for Linux (WSL) subsystem. This method allows you to use your IDEs across all subsystems without the need for individual setups. By configuring your IDEs outside of WSL, you can achieve a centralized and consistent development environment, saving time and effort in maintaining separate installations for each subsystem. This approach facilitates seamless collaboration and maximizes productivity when working across multiple subsystems within your development ecosystem.
Visual Studio Code (VS Code)
Visual Studio Code (VS Code) is widely regarded as one of the most user-friendly options for integrating with Windows Subsystem for Linux (WSL). Setting up VS Code with WSL is remarkably straightforward, as the program has been optimized for seamless compatibility. To get started, all you need to do is install the WSL extension and establish a connection.
If you prefer using graphical applications to manage your Git repositories, your best option is the built-in git management tools in Visual Studio Code (VS Code). However, it is worth noting that these tools can sometimes feel underwhelming and lacking polish. Alternatively, you can use WSLGit for a more comprehensive and refined Git experience.
WSLGit
WSLGit is a tool that enables seamless integration between Git on Windows and the Windows Subsystem for Linux (WSL). It acts as a bridge, allowing Git commands executed within the Windows environment to communicate with the Git installation in WSL. This integration allows developers to utilize the powerful Linux command-line tools and workflows provided by WSL while using their preferred Git client on Windows. With WSLGit, users can clone repositories, stage changes, commit code, push and pull from remote repositories, and perform other Git operations using their favorite Windows Git clients while leveraging the benefits of the WSL environment.
We will set up WSLGit and a git client called Fork
Installing WSLGit in Windows
- Open PowerShell/Terminal as an administrator.
- Execute the following command to clone the wslgit repository:
git clone https://github.com/andy-5/wslgit.git - Navigate to the cloned directory:
cd wslgit - Execute the installation script:
.\install.bat
This will set up some useful symbolic links in the wslgit\cmd and wslgit\bin folders.
Configuring “Fork”
- Download and install the “Fork” Git client for Windows from the official website.
- Launch Fork and open the preferences/settings.
- In the “General” tab, under the “Git” section, set the “Path to Git executable” to the location of the wslgit\bin\git.exe executable.
- Test the setup:
- Open Fork and clone a Git repository.
- Once the repository is cloned, you should be able to use Fork’s features to manage and interact with the repository.
- Make some changes to a file, stage the changes, and commit them.
- Push your changes to a remote repository.
- Verify that the changes are successfully pushed by checking the remote repository.
What about setting up the IDEs inside the Linux Subsystem?
Setting up IDEs inside the Linux Subsystem can be valuable in situations where it is not feasible to install them outside the subsystem. With the advent of WSL and its support for graphical apps, users can install and run software within the subsystem itself. By installing the IDE directly in the Linux Subsystem, users can overcome compatibility issues and utilize the full functionality of the IDE within their Linux environment. However, it is important to consider the potential drawbacks.
- One such limitation is the lack of desktop integration, as the IDE and its associated applications will primarily operate within the subsystem’s environment.
- Additionally, users may find themselves without convenient app shortcuts in the main system, which can slightly impede accessibility.
Nonetheless, for those who prioritize seamless integration within their Linux environment, setting up IDEs inside the Linux Subsystem offers a viable solution.
Conclusion
By setting up WSL for frontend development and utilizing IDEs such as Visual Studio Code, Fork, or any other program inside the subsystem, you can create a powerful and seamless development environment. WSL allows you to harness the capabilities of Linux tools and utilities while working on a Windows system. Embrace the power of WSL and these IDEs to create amazing web experiences. Happy coding!
