Story of doggomemes.xyz: Building a meme generator using Headless Chrome

[Presented at GDG Mumbai DevFest 2017]

Chrome recently launched cross platform support for Headless mode from Chrome 59 onwards. There has already been a lot of buzz regarding the variety of use cases that can be achieved with it like automated testing, screenshot/pdf generation, access to all of devtools features using the devtools protocol including audits, performance, coverage, etc. Having previously built an image generation service using phantomjs, I wanted to see how complex it was to do something similar using headless chrome. The talk involves building a minimal meme generator using: React(for meme preview), Node & Hapi(for API server) and Headless Chrome (for image generation)

Transcript

1. Story of doggomemes.xyz: Building a meme generator using Headless Chrome Karan Thakkar, Web Lead @Crowdfire
3. Why? - ❌ Phantom v1 to v2 migration - Easy to debug - Use newer JS/CSS syntax Find an alternative to phantomjs
4. What is headless chrome?
5. What we want to achieve?
6. https://doggomemes.xyz
7. How?
9. - Type some text - Choose different background images - Preview the output - Send data to server Client / Webapp
12. Send data to server
13. - Accept create image params - Serve the generated image - Setup cors Server
14. Setup server in Hapi
15. Route for create image
16. Route for serving image
17. CORS setup
18. Headless Chrome - Launch Chrome and communicate with it - Load simple page which takes image and text - Take page screenshot and save it
19. Launch Chrome
20. Communicate
21. Load a page to generate image
22. file:///Users/karanjthakkar/Work/Personal/devfest-talk/server/page/index.html? backgroundId=4&text=Borkstreet%20boys%20%20are%20back
23. Take page screenshot
24. Dockerizing your app
25. Compose your image
26. Setting up app
27. Bundling your app
28. Configure
29. Dockerfile
30. Deploying your app
31. Deploying the client using Netlify
32. Deploying the server
33. Alias your deployment
34. Scale it uppp
35. Code: https://bit.ly/doggomemes-code
 Run Client: yarn client Run Server: yarn server Do It Yourself
36. One more thing…
37. - Handle concurrent requests - See demo of other headless chrome features - Add a feature you like to doggomemes.xyz to kickstart your hacktoberfest OSS contribution Catch me later
38. Thank You Twitter: @geekykaran Github: karanjthakkar