How to develop canvas apps without hassle.

Canvas development workflow

Developing Salesforce canvas apps can be a pain sometimes.

The workflow goes like this:

1) Develop your code on your local environment

2) Commit changes to git remote (heroku)

3) Refresh canvas app online and check results

Things get complicated when you need to see something that requires salesforce data. You may find yourself making lots of commits to see the changes and sometimes even blind-coding your way to get the right outcome.

A solution

The solution for that is to point your canvas app url to your local IP, but that can require router/firewall configuration with some extra dynamic DNS provider.

Also to make things a little more complicated on the networking side, you must be able to provide an HTTPS endpoint (more configuration needed).

With that setup you’ll be able to see the changes from the development app directly, and avoid the painful workflow mentioned above.

Instead of pointing your canvas app to: https://mycanvasapp.herokuapp.com/canvas you’ll point it to: https://mydevelopmentcanvasapp.dynamicdnsprovider.com/ . And when the app is ready for showtime, just switch the app url and push the code to heroku.

A better solution

Enter Finch, a node app that does all I mentioned above without any kind of configuration!

I stumbled across finch a while ago and I could not believe how easy it is to expose your internal apps to the internet with just one command.

Finch forwards all your traffic to an HTTPS endpoint accesible from everywhere.

New canvas development workflow

A common scenario would be the development of an app that can be seen on http://localhost:9292 .

Now I just run:

  $ finch forward http://localhost:9292

And set the url generated by finch as the “Canvas App URL”.

Now I can see all the changes while developing the app increasing ten times my productivity.