Dev Stack – Building Connected Salesforce Apps using Portable Local Repos

Tanner EllenLead Developer

@tannerellenDayBack.com

Background● Front-end developer at dayback.com● Canvas app using Angular JS● https://github.com/seedcode/canvas-starter-kit

○ Jason Young will be speaking about this at Dreamforce

The Original Setup● Stand alone web server with SSL certificate

○ Limited code sharing○ Creates versioning headaches○ Hard to test code changes as you develop○ Who maintains the servers?○ Matching production and SSL isn’t easy

The Challenge● Wanted a way to develop locally

○ Test changes quickly○ In multiple branches○ Share between developers○ Easily move to different computers○ Allow developers to use preferred editors

The Solution● Vagrant is key● Beauty is in the details, and there are a lot of

them● https://github.com/seedcode/vagrant-base-config

Demo Time● “Vagrant Up”● Changes to code show up immediately● Test locally with custom host name● Test in Salesforce with custom domain name● ngrok when port forwarding isn’t practical

Getting Started● Copy Vagrant-Base-Config contents to project

folder● Modify config in Vagrantfile

○ Change ports, IP address, hostname, and name

○ Collisions will auto-correct but I like to define them

● In Terminal navigate to the vagrant folder○ vagrant up

What can we do at this point?● Code and test locally with custom host name● Build and deploy with grunt or gulp● Unit testing or other software dev processes● Config is in source control, consistency for all

devs

What about Salesforce?● Salesforce needs access from over the WAN

○ Use a FQDN (Fully qualified domain name)○ I like CloudFlare for managing DNS

● Port forwarding is easy to set up and free○ Need router access○ Dynamic IP’s can make this difficult to use

ngrok To The Rescue!● Creates a secure tunnel to your computer

○ Don’t need router access like port forwarding○ Map to custom domain with paid plan○ Can use anywhere, even tethered with phone○ Other useful features, captured requests,

replay● Let’s create an http tunnel

Salesforce Craves HTTPS!● Production canvas apps require HTTPS● OAuth won’t work over HTTP● Your browser will nag you if not HTTPS● Salesforce Docs tell us to use HTTPS

OK, Let’s Do It With Let’s Encrypt!● vagrant ssh

○ cd /vagrant○ npm install (if not done already)○ grunt ssl:<email>:<domain>

● Now let’s open an https tunnel with ngrok

A Bit About Let’s Encrypt● Certificates are valid for 90 days● Renewals can be automated with a CRON job● Limits 20 certificate requests per domain per

week● 100% free● Can also be used in production

What Can We Do Now?● All the things!

○ Salesforce can access your computer over HTTPS

○ Allows you to code locally and test in a dev org○ Code never leaves version control○ Development team has consistency○ Dev matches production○ Code from anywhere in the world

Helpful Links● VirtualBox: https://www.virtualbox.org● Vagrant: https://www.vagrantup.com● Vagrant Plugins: http://bit.ly/1lIDarz● CloudFlare: https://www.cloudflare.com● ngrok: https://ngrok.com/● PageKite (ngrok alternative):

https://pagekite.net/ ● Let’s Encrypt: https://letsencrypt.org

Q&A

Thank you!