Building a meme generator using React, Headless Chrome and Nodejs

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. Building a meme generator using React, Headless Chrome and Node Karan Thakkar, Tech Lead @Crowdfire
2. What we want to achieve?
3. https://doggomemes.xyz
4. How?
6. - Type some text - Choose different background images - Preview the output - Send data to server Client / Webapp
10. - Accept create image params - Serve the generate image - Setup cors Server
11. Setup server in Hapi
12. Route for create image
13. Route for serving image
14. CORS setup
15. Headless Chrome - Launch Chrome and communicate with it - Load simple page which takes image and text - Take page screenshot and save it
16. Launch Chrome Communicate
18. Load a page to generate image
19. Take page screenshot
20. Handling concurrent requests
21. Building a task queue
22. Before After
23. Dockerizing your app
24. Dockerfile
25. Deploying your app
26. Deploying the client using Netlify
27. Deploying the server using now.sh
28. Code: https://github.com/karanjthakkar/doggomemes.xyz
 
 Run Client: npm run client Run Server: npm run server Do It Yourself
29. Thank You Twitter: @geekykaran Github: karanjthakkar