Building PhantomJS on the Raspberry Pi 2

Introduction

PhantomJS is a great tool to have in your web development arsenal. The only bad thing is, not all Linux distros have packages for installing PhantomJS, which means you have to build it yourself. This post will outline the steps you need to perform, to build PhantomJS on the Raspberry Pi 2.

Increase the swap file size

We need to do this because the Raspberry Pi 2 does not have enough memory, the default swap file size is too small, and building PhantomJS requires a ton of resources.

Raspbian uses dphys-swapfile to manage the swap file, which makes life easy.

We will need to update the /etc/dphys-swapfile file to include the size change.

First, open up the /etc/dphys-swapfile file.

sudo nano /etc/dphys-swapfile

The file will contain one line, and if it has not been changed before, it should look like:

CONF_SWAPSIZE=100

We will need to change that 100 value to the maximum value for the Raspberry Pi 2, which is 2048. Once that change is made, the file should look like:

CONF_SWAPSIZE=2048

After confirming the new value, you will need to stop and start the dphys-swapfile service by running the following commands:

sudo /etc/init.d/dphys-swapfile stop
sudo /etc/init.d/dphys-swapfile start

Install Dependencies

PhantomJS has some dependencies that we will need to install. Running the following command will install what we need:

sudo apt-get install build-essential g++ flex bison gperf \
  ruby perl libsqlite3-dev libfontconfig1-dev libicu-dev \
  libfreetype6 libssl-dev libpng-dev libjpeg-dev python \
  libX11-dev libxext-dev libqt4-dev qt4-qmake git-core -y

Obtaining and Building the Source Code

Every user places source code in a different directory, so before you perform any of the following steps, please navigate to that directory first.

We will use git to download the source code for PhantomJS.

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.0

Once the source code is downloaded, you can run the build.sh script. PhantomJS can build individual items in parallel, which has caused some issues for me, so I limit the number of concurrent builds to just 2, rather than 4. This process, regardless of the number of concurrent builds, can take a lot of time to complete.

./build.sh --jobs 2

Installing PhantomJS

If everything goes well during the build, you will find a bin/phantomjs file in the phantomjs directory. That one file is PhantomJS as a whole. This part of the post will cover how to move it to a location where anyone on the system can execute PhantomJS.

First, we will need to create PhantomJS’ new home, /opt/phantom-2.0.1.

sudo mkdir /opt/phantomjs-2.0.1

Copy the files to their new home.

sudo cp -R bin/ /opt/phantomjs-2.0.1/
sudo cp -R examples/ /opt/phantomjs-2.0.1/

Create a symbolic link to make things friendlier.

sudo ln -s /opt/phantomjs-2.0.1/ /opt/phantomjs

Update /etc/profile to include PhantomJS paths.

sudo nano /etc/profile

We want to export some values so PhantomJS can be easily found. At the top of the file, add the following lines:

PHANTOMJS_PREFIX=/opt/phantomjs
export PHANTOMJS_PREFIX
PHANTOMJS_INSTALL=$PHANTOMJS_PREFIX
export PHANTOMJS_INSTALL

Find where PATH is set and add the following to the end:

:$PHANTOMJS_INSTALL/bin

You’ll need to logout, then log back in, to have the /etc/profile changes take effect.

Using PhantomJS

Now that we have everything setup, you can run through the examples included in the source code.

Hello, world!

Executing the following code …

phantomjs $PHANTOMJS_INSTALL/examples/hello.js

… will result with the following output:

Hello, world!

Blast off!

Executing the following code …

phantomjs $PHANTOMJS_INSTALL/examples/countdown.js

… will result with the following output, with one second between each line:

10
9
8
7
6
5
4
3
2
1
BLAST OFF!

Load Speed

Executing the following code …

phantomjs $PHANTOMJS_INSTALL/examples/loadspeed.js https://google.com/

… will result with the following output, which will vary per user and execution:

Page title is Google
Loading time 1563 msec

Fibonacci number

Executing the following code …

phantomjs $PHANTOMJS_INSTALL/examples/fibo.js

… will result with the following output:

1
1
2
3
5
8
13
21
34

Color Wheel

Executing the following code …

phantomjs $PHANTOMJS_INSTALL/examples/colorwheel.js

… will generate a colorwheel.png file, which will look like:
PJS_colorwheel

What’s next?

Your best bet is to check out the Documentation for PhantomJS to get a better idea as to what you can do with it.

Go forth and have fun!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.