How to set up an amazing 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 🤷‍♂️.

Free SSL/TLS Certificates with Nginx and Let’s Encrypt

As you might have already noticed, I am now running this site with a SSL certificate provided by Let’s Encrypt. Formerly only enabled to another domain hosted here.

For those who don’t know Let’s Encrypt, it’s a free automated, and open certificate authority. You can literally have a SSL certificate on your hosting in minutes.

You can easily install it with the following instructions. Keep in mind that the instructions are for Ubuntu 14.04, so some steps may differ.

Install Let’s Encrypt client.

Download the script and make it executable:

cd /usr/local/sbin
sudo wget https://dl.eff.org/certbot-auto
sudo chmod a+x /usr/local/sbin/certbot-auto

Check your package manager for letsencrypt. Ubuntu 16.04 already have it.

Obtain the certificate.

To generate the certificate the client will create a temporary file on your webroot. You need to allow the access to the file adding the following to your nginx server block configuration:

location ~ /.well-known {
                allow all;
        }

After that, restart your nginx and run the following command:

certbot-auto certonly -a webroot --webroot-path=/var/www/yourwebroot -d yourdomain.com -d www.yourdomain.com

Don’t forget to change your webroot-path and your domain. If needed, add any other sub domain after the -d yourdomain.com. At the prompt insert your e-mail and, after read, accept the agreement.

You will end up with a set of four .pem files.

Set up nginx with SSL.

Edit your nginx configuration file again, you may now remove that .well-knowmentioned earlier. Also remove the listen 80 portion.

listen 443 ssl;
#listen 80; 
server_name www.yourdomain.com yourdomain.com; 
ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem; 
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

To redirect all your http traffic to https you should add this server block before the above:

server { 
    listen 80; 
    server_name www.yourdomain.com yourdomain.com; 
    return 301 https://$host$request_uri; 
}

Restart nginx again and test to make sure everything is working as expected.

Set up auto-renewal.

The certificate expires within 90 days, you can run the command certbot-auto renew to perform the renewal of the certificate. However, it will only renew if it’s 30 days away or less to expire. So you can create a cronjob to run every week without any problem.

Edit your crontab and insert the following entries:

30 2 * * 1 /usr/local/sbin/certbot-auto renew >> /var/log/le-renew.log
35 2 * * 1 /etc/init.d/nginx reload

A log of the output of certbot-auto renew will be available in the path shown above.

Conclusion:

Easy to install and maintain. You can also improve it using a strong encryption.

Running MariaDB/MySQL on small VPS

I had my databases down twice in a month with the following error message:

[ERROR] mysqld: Out of memory

Compared to shared hosting services that we used to have, the tiny and cheap cloud VPSs are amazing. I am a user and big fan of the service as I don’t have any personal projects that require AWS by now.

These servers are convenient and comfortable as you can customize, install and configure as you wish. When everything is to your liking you can take snapshots as backup or to create duplicates of your server.

The only problem is that some of the softwares needed to run a fully web server comes with predefined configuration files. They run fine on their own but you need to take in mind that your VPS have a limited RAM to work with. MySQL and MariaDB by default will allocate around 400MB, which is reasonable to a normal server, but not to a limited virtual instance running 24/7.

I will comment on the measures it took to get around this problem. As usual the following steps are for Ubuntu 14.04, your steps may vary depending on your distro and version. You may find a my.cnf over the internet that fits your server’s specifications.

Disable Performance Schema

In my opinion, performance schema only has a use if you or a DBA wants to monitor the database activity. To disable it edit the default MySQL configuration file, in this case /etc/mysql/my.cnf, and edit the following line under the [mysqld] block (if it doesn’t exist, create the line).

performance_schema = off

MyISAM tables

InnoDB tables have a huge impact in performance and memory usage, if you don’t use its resources you may consider to use MyISAM. To do so you need edit the following variables under the [mysqld] block of the /etc/mysql/my.cnf file:

default-storage-engine=MyISAM
default-tmp-storage-engine=MyISAM

If you don’t need InnoDB resources at all you can disable it adding the following line to your my.cnf:

skip-innodb

You may need to change your existing tables to MyISAM. The following ShellScript can do that for you.

#!/bin/bash

MYSQLCMD=mysql

for db in `echo show databases | $MYSQLCMD | grep -v Database`; do
        for table in `echo show tables | $MYSQLCMD $db | grep -v Tables_in_`; do
                TABLE_TYPE=`echo show create table $table | $MYSQLCMD $db | sed -e's/.*ENGINE=\([[:alnum:]\]\+\)[[:space:]].*/\1/'|grep -v 'Create Table'`
                if [ $TABLE_TYPE = "InnoDB" ] ; then
                        mysqldump $db $table > $db.$table.sql
                        echo "ALTER TABLE $table ENGINE = MyISAM" | $MYSQLCMD $db
                fi
        done
done

Swap

Swap isn’t recommended, at least by DigitalOcean that uses SSDs, but I use it as a fail-safe measure. The following commands will create a swapfile and use it as swap space in your machine, run as root:

fallocate -l 256M /swapfile
chmod 600 /swapfile
mkswap /swapfile
swapon /swapfile

To keep your changes permanent don’t forget to add the following line to your /etc/fstab file:

/swapfile   none    swap    sw    0   0

Conclusion

Cloud VPSs are amazing considering their cost, reliability and convenience, keep in mind that you will need to tweak one thing or other. If you need a more robust solution I recommend Amazon’s RDS or upgrading your instance plan.

Don’t forget to restart your MySQL/MariaDB service after any changes to the my.cnf file.

service mysql restart