My web development setup using WSL

This setup includes installing Web Development tools and packages like Apache, MySQL, PHP, WP-CLI, Composer, PHP Code Sniffer, WordPress Coding Standards, NodeJS, Mongo DB, and also some tools including git, curl, zsh and ohmyzsh.

Supported Distro — Ubuntu 20.04 / Pop!_OS (or any other Ubuntu-based Linux)

1. Update / Upgrade Distro

sudo apt-get update
sudo apt-get upgrade
sudo apt install curl git

2. Configure Git

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL"
ssh-keygen -t rsa -b 4096 -C "YOUR EMAIL"
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa
cat ~/.ssh/id_rsa.pub

(copy the public key and add it to your github.com account)

3. Install and Configure ZSH

sudo apt install zsh
chsh -s $(which zsh)

Log out and Log in again.

Install OhMyZsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

git clone https://github.com/zsh-users/zsh-autosuggestions.git $ZSH_CUSTOM/plugins/zsh-autosuggestions

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-highlighting

nano ~/.zshrc

Find “plugins=” and change as line below

plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

4. Install Personal Shell Scripts

git clone git@github.com:aslamdoctor/shell-scripts.git
nano ~/.zshrc
source ~/shell-scripts/common.sh
source ~/shell-scripts/server.sh

5. Install LAMP Stack (Apache, MySQL, PHP)

sudo apt-get install apache2 php libapache2-mod-php
sudo a2enmod rewrite
sudo nano /etc/apache2/mods-available/dir.conf

and set index.php as the first option

mkdir ~/www
sudo nano /etc/apache2/envvars

#change user and group values to the current username
sudo apt-get install mysql-server
sudo apt-get install phpmyadmin (provide the root password here)
sudo mysql
> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';

using the password from the phpMyAdmin install step.

Open phpMyAdmin in the browser using the URL http://localhost/phpmyadmin and add a new user as admin/admin with the same rights as the root user.

6. Install Composer

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php

php -r "unlink('composer-setup.php');"

7. Configure PHP Code Sniffer

cd ~

composer g require --dev automattic/vipwpcs dealerdirect/phpcodesniffer-composer-installer -W

Add the below code to ~/.zshrc file

export PATH="$HOME/.composer/vendor/bin:$PATH"

run this command source ~/.zshrcand check if configured properly using the below command

phpcs -i

8. Setup WP-CLI

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

9. Create a new WordPress project using a personal script

This script will clone the boilerplate repo, create a new DB, install WordPress and configure apache host files.

cd www
newproject MYPROJECT

What does this script do?

Clones boilerplate code from the GitHub repo
Creates empty MySQL database
Installs WordPress using WP-CLI
Configures Apache Host files and restarts Apache server

10. Install Node JS using NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

nano ~/.zshrc

Add the below code at the bottom (optional step, check if nvm command is already working or not):

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

Log out and Log in again

nvm install --lts

11. Install MongoDB

sudo apt install -y mongodb

Download compass from: https://www.mongodb.com/try/download/compass?tck=docs_compass

12. Install JetBrains fonts

wget https://download.jetbrains.com/fonts/JetBrainsMono-1.0.0.zip
unzip JetBrainsMono-1.0.0.zip
mkdir ~/.fonts
mv JetBrainsMono-*.ttf ~/.fonts/

All done 🎉

Aslam Doctor