How to set up an amazingly well development environment on Windows

Introduction

I have been using Linux for development for a long time and MacOS for quite a few years. The only handful of times that I developed on Windows was for a small fix or adjustment.

The display of my Macbook Pro died back in September and I went back to Linux to develop. Hoping that I would have the Macbook up and running as soon as possible. The repair quotation arrived and, to my surprise, the price was way out of my reality.

I then decided to give it a try to docker-desktop since a coworker from another team had success running our development stack.

(This guide is based on guides, StackOverflow questions, and discussions all over the internet. Unintentionally I may end up forgetting to give due credit.)

Hyper.js + Oh My ZSH as Ubuntu on Windows (WSL) Terminal

(Original: https://medium.com/@ssharizal/hyper-js-oh-my-zsh-as-ubuntu-on-windows-wsl-terminal-8bf577cdbd97)

Install Windows Subsystem Linux — https://docs.microsoft.com/en-us/windows/wsl/install-win10

Install Ubuntu on Windows from Microsoft Store or any other Linux flavor — https://www.microsoft.com/en-us/p/ubuntu/9nblggh4msv6

Install Hyper.js terminal — https://hyper.is/

I went for the hyper-material-theme to set it up press Ctrl + , to bring up Hyper.js configuration file. Look for plugins: [ edit and add the theme.

plugins: [
//"hyper-dracula"
//"hyper-solarized-dark"
"hyper-material-theme"
],

Setup Hyper.js to automatically open Ubuntu on Windows

  • Open up Hyper.js configuration again and type Ctrl + ,
  • Scroll down to shell and change it to C:\\Windows\\System32\\bash.exe
// the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
// if left empty, your system's login shell will be used by default
//
// Windows
// - Make sure to use a full path if the binary name doesn't work
// - Remove `--login` in shellArgs
//
// Bash on Windows
// - Example: `C:\\Windows\\System32\\bash.exe`
//
// PowerShell on Windows
// - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
shell: 'C:\\Windows\\System32\\bash.exe',

Install ZSH on Ubuntu Bash Windows

  • Run this sudo apt-get install zsh
  • Open your bash profile vim~/.bashrc
  • Add this to set it to use ZSH as default:
bash -c zsh
# ~/.bashrc: executed by bash(1) for non-login shells.
# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
# for examples# If not running interactively, don't do anything
case $- in

Install Oh My ZSH

Install Oh My Zsh with 

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Restart Hyper.js and you are done!

Docker Desktop, docker-compose, and nvm

Install Docker Desktop

Follow the instructions on https://docs.docker.com/docker-for-windows/wsl/, but it is basically the usual next-next-finish.

Install docker, docker-compose, and nvm

On your terminal install both docker and docker-compose

sudo apt-get install docker docker-compose nvm

Speed things up

zsh is smart with its completions, but it may get really slow and frustrating if you let Windows concatenate its PATH with WSL’s path.

Edit your /etc/wsl.conf with the following:

[automount]
enabled = true
[interop]
appendWindowsPath = false

Besides that, make sure that you are not running docker/node on your mounted hard drive(i.e. /mnt/c/), but instead the WSL filesystem. If you need to access it, with your IDE or editor, use the \\wsl$\ network path.

Running Selenium/Webdriver tests

Install google-chrome inside WSL with your favorite PPA repository. I am not going to teach you this since there an infinity of tutorials on the subject. It may or may not work with chromium, but I didn’t test.

Install Xming/Xlaunch with the notorious next-next-finish https://sourceforge.net/projects/xming/

Create a config.xlaunch file with the following and run it afterwards:

<?xml version="1.0"?>
<XLaunch xmlns="http://www.straightrunning.com/XmingNotes" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" <?xml version="1.0"?>
<XLaunch xmlns="http://www.straightrunning.com/XmingNotes" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.straightrunning.com/XmingNotes XLaunch.xsd" WindowMode="Windowed" ClientMode="NoClient" Display="0" Clipboard="true" ExtraParams="-ac"/>

On WSL you need to export the DISPLAY variable(I recommend you put it on your bashrc or similar):

export DISPLAY=$(grep -m 1 nameserver /etc/resolv.conf | awk '{print $2}'):0.0

You should be able to run Google Chrome by now on your terminal: google-chrome

Don’t forget to install chromedriver:

npm install -g chromedriver --detect_chromedriver_version

End Notes

Wish I started this as a draft when I got the notebook and started the process, so I could document every step. However, this post consolidates every major step or issue that I had.

The speed is blazing fast compared to the one that I got on the MacBook. I never imagined that I would like to code on Windows. Guess my words come back to me 🤷‍♂️.

Three survival tools for an inhospitable (production) environment

As a web developer, you may need to deal with your client’s production environment. Sometimes it’s not the easiest environment to work with, like in a shared hosting or a limited

I already worked with some clients that I wasn’t able to remote connect to the database. Others didn’t allow me to connect to a regular FTP service, all files had to be transferred one by one via a Web FTP.

Over the years I’ve put together some tools to help me with those situations.Other than small snippets and scripts, here are three of the tools that I must used in the last eight years.

Adminer (formerly phpMinAdmin)

Adminer is a single file database management tool written in PHP that can handle MySQL, PostgreSQL, SQLite, MS SQL, Oracle, Firebird, SimpleDB, Elasticsearch and MongoDB. Useful since most of the free database GUI tools doesn’t offer Tunneling connections.

MySQL BigDump

BigDump allows you to import massive and large MySQL dumps. It works well very limited servers.

phpFileManager

phpFileManager can help you when you don’t have FTP access to the hosting. It’s multi-uploader and compress/extract are very convenient.

Conclusion

I know that the use of such hostings are decreasingly over the years. But we, as developers, must be prepared to such sittuations. I hope my tips here can help you someway.

Setting up a half-assed PHP development environment on Windows

I, personally, don’t like to develop on Windows, but sometimes I am sitting at my desktop computer(that I use mainly for gaming) and need to code or fix something. Here I will present the setup that I use.

Cygwin64

Have you ever wondered to use git, gcc, make and even emacs on Windows? Cygwin is the easy way to achieve that. Download and run the Cygwin installer. The base package works fine, but make sure to install net/openssh and devel/git packages are selected.

Now just set your system’s PATH environment variable including the cygwin /bin/ folder path.

ConEmu

conemuThis step is not entirely necessary, but I don’t regret using it. Download and install ConEmu. Open the Settings (Super+Alt+P), select the Startup entry from the tree menu and select Specified named task to Cygwin Bash.

 

Vagrant and Scotch Box

I used to roll my Vagrant boxes using PuPHPet. Recently on Windows I had some issues with shared folders settings, I am now using the preconfigured box from Scotch Box.

First download and install VirtualBox and Vagrant. Then clone and setup with vagrant, the first time will take a while since Vagrant need to download the image.

git clone https://github.com/scotch-io/scotch-box.git scotchbox
cd scotchbox
vagrant up

Before shutting down your computer, you should suspend your box.

vagrant suspend

You can ssh into your box using the following command:

vagrant ssh

Visit http://192.168.33.10/ to access your box.
This setup is far from perfect, but it works for me. A while ago I used JetBrains PhpStorm as IDE to develop, recently I changed to Atom simply because it loads faster and I don’t use all the features of PhpStorm.