Running on heroku with xvfb

10io · 2016-01-26 08:37:26 UTC

Hello there!

I’d like to run a small electron script on Heroku. The script simply loads an url (of a local html file) and takes a screenshot of it. Here is a gist with the script main.js and two html files:

gist.github.com

https://gist.github.com/10io/bbec2fe0d71fc308cf60

main.js

'use strict';

const electron = require('electron');
const fs = require('fs');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

This file has been truncated. show original

sample_image.html

<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .floating {

This file has been truncated. show original

sample_text.html

<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
  </head>
  <body>
    <div style='color: #000; font-family: Times New Roman; font-size: 42pt; font-weight: bold; font-style: italic; text-decoration: overline;'>
      <span style='white-space: nowrap;'>BANANAS</span>
    </div>
    <div style='color: #000; font-family: Times New Roman; font-size: 42pt; font-weight: bold; font-style: italic; text-decoration: line-through;'>
      <span style='white-space: nowrap;'>BANANAS</span>

This file has been truncated. show original

Nothing too fancy. I run it using the electron-prebuilt package: electron /path/to/script/folder 800x600 file:///path/to/html/file /tmp/sample.png.

This runs perfectly on my local machine.

Now,the idea is to run it on Heroku. I deployed the electron script using the node.js buildpack. I also needed xvfb which I installed with these buildpacks and scripts: http://stackoverflow.com/questions/28687120/is-it-possible-to-run-xvfb-on-heroku.

Now, if I connect to bash (heroku run bash) and try to run the script with:

xvfb-run -s "-ac -screen 0 1000x1000x24" electron /path/to/script/folder 800x600 file:///path/to/html/file /tmp/sample.png

I get the following results:

for the sample_text.html file, it works perfectly.
for the sample_image.html file, I get an empty screenshot.

I tried to run this on a vagrant Ubuntu server and it works correctly for the sample_text.html and sample_image.html files.

I’m not sure why I’m getting an empty screenshot for the image sample. First, I thought that it would be something to do with xvfb but it’s working correctly for the text sample.

If anyone has some experience with electron + heroku + xfvb and has some idea of what’s going on, I would be super grateful.