Forcelandia SalesForce session on the dev stack we use to develop SalesForce Canvas apps and web apps using Vagrant and ngrok. https://appexchange.salesforce.com/listingDetail?listingId=a0N30000000qp64EAA

1. Dev Stack – Building Connected
Salesforce Apps using Portable
Local Repos
Tanner Ellen
Lead Developer
@tannerellen
DayBack.com

2. 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

4. 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

5. 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

6. The Solution
● Vagrant is key
● Beauty is in the details, and there are a lot of them
● https://github.com/seedcode/vagrant-base-config

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. Q&A

18. Thank you!