Webshot from URL on Heroku not working

[facultymatt]

Hello, I've tried with no success to get webshot to work on Heroku. Oddly, it works fine locally and when running foreman start (which should emulate Heroku.) Here are some more details:

• Works fine running foreman
• Tried a number or different output methods, ie: streaming, writing to file, DL the file.
• On Heroku, sometimes webshot fails, and I get an error. Other times it appears to work fine... but no image is saved.
• I've tried pointing to multiple URLs which all fail on Heroku.

I've used a few variations of your examples and code I've found online. I can post code samples here if needed, but maybe you have more insight into Heroku?

I've seen mention online to a custom buildpack, is this needed?

Thanks,
-Matt

[facultymatt]

FYI figured this out. It'd be worth adding a note to the Readme that getting this running on Heroku requires a bit of extra configuration.

Roughly I had to do the following to get webshots to work on heroku:

1. Use the multip-buildpack buildpack
Note you can do this when creating a new app or add to an existing app. Run the following command
$ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

2. Add nodejs and phantomjs buildpacks to .buildpack file
Create a new .buildpack file by running $ touch .buildpack. Then, open the file and add the following two lines:

http://github.com/heroku/heroku-buildpack-nodejs.git
http://github.com/stomita/heroku-buildpack-phantomjs.git

This tells Heroku to use the standard nodejs buildpack AND the phantomjs buildpack

3. Add Heroku config variables
We need to tell Heroku where PhantomJS is located:

$ heroku config:add LD_LIBRARY_PATH=/usr/local/lib:/usr/lib:/lib:/app/vendor/phantomjs/lib
$ heroku config:add PATH=/usr/local/bin:/usr/bin:/bin:/app/vendor/phantomjs/bin

4. Set the phantomPath option for webshot !!!!IMPORTANT
This key step was missing from the tutorials I found and is a critical last step to get things working! Create a bash connection to Heroku by running heroku run bash. Confirm that phantomjs is installed properly by running $ vendor/phantomjs/bin/phantomjs --version. If no version is returned, then do some exploring to find the bin/phantomjs file.

If a version number is returned, then you can add this path to your webshot config, phantomPath option. NOTE that you will need to use __dirname which in most cases for Heroku is /app/. I used the following:

`phantomPath : path.join(__dirname, 'vendor/phantomjs/bin/phantomjs')`

5. Deploy to heroku
Commit your .buildpack file and deploy to Heroku as usual, ie: $ git push heroku master

6. Test!!!
By this point everything should be working.

References

• http://nerdery.crowdmob.com/post/33143120111/heroku-ruby-on-rails-and-phantomjs
• https://github.com/stomita/heroku-buildpack-phantomjs
• http://stackoverflow.com/a/14060619/1738217
• https://github.com/ddollar/heroku-buildpack-multi

Hope this helps someone in the future!

[brenden]

Hi facultymatt,

Wow, thanks so much for creating that guide. I've never used Heroku so I'm glad you were able to get the issue worked out. I'll add a link from the readme.

[neverfox]

BTW, it's .buildpacks not .buildpack (and least it is now). I couldn't for the life of me figure out why Heroku kept telling me Push rejected, no Cedar-supported app detected. Turns out is was as simple as that. Also, replace the http:// with https:// in .buildpacks or it just gets stuck trying to download for a long time and then dies.

[ksprashu]

If anyone is still watching this issue, can you help me with where heroku stores the screenshots taken via webshots?
How do I access these files then?

[rdev]

@ksprashu did you figure it out?
My app won't even save screenshot when deployed to Heroku. Everything is fine using Foreman though.

[ismyrnow]

@ksprashu @fivepointseven: It may be that heroku doesn't allow writing files to the filesystem. However, you can put the contents into a database, or send as a response to a web request. I am actually putting the image into a pdf.

If your second argument is an options object, and your callback has two arguments, the second callback argument will be a stream which you can work with.

Here is an example of converting the stream into a buffer:

webshot(url, options, function (err, renderStream) {
  var imageBuffers = [];

  renderStream.on('data', function (data) {
    imageBuffers.push(data);
  });

  renderStream.on('end', function () {
    var imageBuffer = Buffer.concat(imageBuffers);

    // Do something with your buffer (imageBuffer);
  });
});

[ksprashu]

@fivepointseven @ismyrnow My calls were not failing (as per the logs) but there was no way I could retrieve them back from Heroku.

What I did then was to use the dropbox APIs and just save the image directly to dropbox. Then I could sync and retrieve them later.