Arch wsl setup for basic web development

karleeov - Apr 13 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .