☰

Setting up a Vagrant Machine for Electron

Last Saturday there was an interesting conference on Node.js in Desenzano del Garda where Feross Aboukhadijeh held a workshop about Electron. Since I am not enough skilled about Node.js I thought that, to attend the workshop properly, it would be worth to setup a clean VirtualBox VM to avoid any mess on my own development machine.

I am a Vagrant fan, so I’ve googled a bit trying to find a prebuilt Electron Vagrantfile provisioning all the packages I need. Unluckily I did not find any machine, so I had to set up it by myself.

Obviously I came across a set of small problems before to obtain a working version of this VM. This post describe this small journey I had to configure it.

Preparing the provisioning scripts

Basic provisioning

The first stuff I’ve configured -as root user- were the basic packages required to manage a VM:

cd /home/vagrant
add-apt-repository ppa:git-core/ppa
apt-get update
apt-get install -y vim git curl

Setting up Electron

Electron comes as an NPM package, so I needed a clean Node.js environment to install it. First of all, I started to address the definition of a provisioning script to setup the Node Version Manager used to install a working Node.js version. Then I had to set a property to the vm.provider (i.e.: VirtualBox) to allow it to create symbolic links in the guest machine. In fact, as I read on the web, without this parameter NVM would not work:

config.vm.provider "virtualbox" do |vb|
  vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/vagrant","1"]
end

Then I had to write the provisioning script to run all the commands to setup the Node.js and Electron environment. So I’ve prepared a provisioning script setting up a bunch of packages:

  cd /home/vagrant
  echo "Installing nvm..."
  wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
  export NVM_DIR="/home/vagrant/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
  nvm install node
  npm install bower -g
  npm install electron -g

This time, the provisioning script should run as the default vagrant user instead of root. It:

Setting up Liquidprompt

At the end of this script, I’ve also added the commands to setup the latest version of Liquidprompt. It is an utility to add useful information to Bash (or Zsh) prompts, based as you need it. For example, if you’re working in a Git repository, it will show you its status.

  echo "Installing liquidprompt..."
  cd /home/vagrant/
  git clone https://github.com/nojhan/liquidprompt.git
  source liquidprompt/liquidprompt
  echo "Setting up liquidprompt to the .bashrc folder"
  echo '# Only load Liquid Prompt in interactive shells, not from a script or from scp'  >> /home/vagrant/.bashrc
  echo '[[ $- = *i* ]] && source /home/vagrant/liquidprompt/liquidprompt' >> /home/vagrant/.bashrc

X Forwarding

Eventually, since Electron applications are graphical programs, it was necessary to setup the VM in order to interact with the X11 of the Host machine, otherwise it wouldn’t have been possible to see the Electron applications working.

Thanks to X forwarding feature, it is possible to forward graphical programs using X11 to our host machine. To enable it, I added the following parameter to Vagrantfile, as described here:

Vagrant.configure(2) do |config|
  ...
  config.ssh.forward_x11 = true
end

Testing the VM

Dealing with (missing) graphical libraries

After these steps, it was time to launch the provisioning to verify if the setup was ok. I launched the VM with the classical vagrant up command and I logged in it with the vagrant ssh command. Once in, I’ve cloned the “Hello world” Electron repository to verify the VM configuration:

cd /vagrant
git clone https://github.com/electron/electron-quick-start.git
cd /electron-quick-start
npm install && npm start

At first shot, I came across a set of problems, due to missing Ubuntu packages for graphical components. For example I got:

error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory

Trying with repeated executions of apt-get commands, one by one, I got rid of all these missing libraries. So, at the end, I had to install all the following to remove the errors:

	apt-get install -y libgtk2.0-0
	apt-get install -y libxss1
	apt-get install -y GConf2
	apt-get install -y libnss3

These apt-get commands have been added to the root provisioning script in order to set up the VM properly.

After all this tuning, I started the Vagrant VM and launched the electron-quick-start again. This time it worked displaying, the following:

Imgur

Hooray!

This Vagrant VM has been tested using an Ubuntu 16.04 (64 bit) host machine. The current provider is VirtualBox (ver. 5.0.26).

P.s.: if you need explanation of any of the listed ssh commands, please refer to explainshell.com, I find it very useful!”