DEV Community

Cover image for Arch wsl setup for basic web development
karleeov
karleeov

Posted on

Arch wsl setup for basic web development

Setting up Arch Linux on WSL (Windows Subsystem for Linux) for web development, along with various tools and enhancements like Zsh, Oh-My-Zsh, autosuggestions, Homebrew, and other utilities, is a comprehensive process. Here’s a step-by-step guide to configure everything from scratch:

Step 1: Install Arch Linux on WSL

  1. Enable WSL:

    • Open PowerShell as Administrator and run:
     dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
    
  • Then, enable the Virtual Machine feature necessary for WSL 2:

     dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
    
  • Restart your computer.

  1. Download and Install Arch Linux:
    • You can download Arch Linux for WSL from a third-party source like WSL Arch Linux. Follow the instructions on the GitHub page to install it.

Step 2: Configure Arch Linux

  1. Update the System:

    • Open Arch Linux from the start menu and run:
     pacman -Syu
    

Step 3: Install Zsh, Oh-My-Zsh, and Plugins

  1. Install Zsh:
   pacman -S zsh
Enter fullscreen mode Exit fullscreen mode
  1. Install Oh-My-Zsh:

    • Use the curl command to install:
     sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
    
  2. Install Zsh Autosuggestions:

    • Clone the repository:
     git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
    
  • Add zsh-autosuggestions to the plugins array in ~/.zshrc.

Step 4: Install Development Tools

  1. Install Homebrew (Linuxbrew):

    • Install necessary packages:
     pacman -S base-devel git
    
  • Install Homebrew:

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    
  • Follow the on-screen instructions to add Homebrew to your path.

  1. Install Node.js via NVM:

    • Install NVM:
     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
    
  • Load NVM and install Node.js:

     export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
     [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
     nvm install node  # Install latest Node.js version
    
  1. Install Python & Streamlit:

    • Install Python:
     pacman -S python python-pip
    
  • Install Streamlit:

     pip install streamlit
    

Step 5: Install Additional Utilities

  1. Install exa (a modern replacement for ls):
   pacman -S exa
Enter fullscreen mode Exit fullscreen mode
  1. Install lolcat:
   pacman -S lolcat
Enter fullscreen mode Exit fullscreen mode
  1. Install neofetch:
   pacman -S neofetch
Enter fullscreen mode Exit fullscreen mode

Step 6: Configure Your Environment

  • Configure .zshrc:

    • Add the following to ~/.zshrc to enable plugins and customize your shell:
    plugins=(git zsh-autosuggestions)
    alias ls='exa'
    alias cat='lolcat'
    
  • Apply Configuration:

    • Source the Zsh configuration:
    source ~/.zshrc
    

Step 7: Test Your Setup

  • Open a new terminal or type zsh to start using Zsh with your new configuration.
  • Test Streamlit:
  streamlit hello
Enter fullscreen mode Exit fullscreen mode
  • Check Python installation:
  python --version
Enter fullscreen mode Exit fullscreen mode

You now have a fully functional web development environment on your Arch Linux WSL setup, complete with a modern shell and essential development tools. This setup is flexible and allows you to extend

Top comments (2)

Collapse
 
mk0wan profile image
Victor Mk

Question i still have issues with my x-clip in arch wsl, i can't seem to be able to figure it out. Any tips would be appreciated...

Collapse
 
admodev profile image
Adolfo Moyano

Nice post, just one thing... You have to install GIT first in order to be able to install oh my zsh, regards.