Product Development with Vue.js and a Headless CMS

Content management systems like Drupal or Wordpress giving you grief? Tired of mucking around in databases? In this session will discuss some of the key concepts around using the JAMstack then dive deep with rapidly developing websites or applications with Vue.js and how to incorporate a headless CMS. We'll cover:

- Using a headless CMS as an API
- Scaffolding out performant and SEO friendly UI's
- Deploying through Docker container

Transcript

1. Product Development with Vue.js @bermonpainter | #Confoo
2. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
3. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
4. Evolution Browser Server
5. Evolution Browser Server Database
6. Evolution Browser CDN Server Database
7. Evolution Browser CDN Server API Services Database
8. Evolution Browser CDN Build Tool API Services GIT Headless CMS Database
9. The JAMstack JavaScript Anything dynamic is handles by JavaScript. Framework agnostic. APIs Data is accessed over reusable APIs via HTTPs. Markup Served as static HTML, typically generated from a build tool.
10. But why? Performance You’re typically serving pre-built, optimized markup to a CDN as static content 1 2 Security CMS, server, database and other vulnerabilities are less of an issue (i.e. static site) 3 Tool Agnostic Choose whatever front-end framework, build tool, or data source you prefer 4 5 GIT Workflow Simplified build to deploy approach. Easier to contribute. Fewer dependencies (mostly) Dev Experience Focus on the front-end and worry less about databases, dev ops, or back-end dev 6 Separation of Concerns The front-end, backend, data, and devops can be completely decoupled
11. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
12. Headless CMS The HeadlessCMS A content management system decoupled from the end-user experience. Browser API Services Front-End Database Admin Interface
13. headlesscms.org
14. strapi.io
15. Why Strapi? It handles the bulk of the things I don’t enjoy doing manually Built-in API /w Docs You can generate an API from the admin interface or in your code editor 1 2 GraphQL or Restful Chose which API interface you prefer to integrate your front-end with 3 Built-in Auth Comes with decent auth and permission options to secure endpoints in the API 4 5 Built-in SMTP Set’s up an SMTP server by default Databases Choose a relational or on-relational database & Strapi will set it up for you 6 File uploads Handles file storage on the server or through 3rd parties (AWS, Cloudflare, etc).
18. Setting up relational data Companies
19. Setting up relational data People
20. Setting up relational data Videos
21. Setting up relational data Generated APIs
22. Setting up relational data Generated APIs
23. localhost:1340/videos
24. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
25. gridsome.org
26. Why Gridsome? It handles the bulk of the things I don’t enjoy doing manually (basically the Vue version of gatsbyjs.org Static Site Generator Provides a logical application structure with loosely held opinions on config vs customization 1 2 Fast Built in performance features like automatic code splitting, prefetching, & image optimization 3 Progressive Web App Automatically generates a single page web app with all of the built in optimization features 4 5 Easy Data Consumption Use any data source, from APIs to local JSON files. SEO Friendly by Default Loads as static HTML first with built in hydration for the SPA pieces 6 File driven Everything is based on client-side JavaScript, reusable APIs, and prebuilt Markup
27. The Workflow Browser Gridsome Layouts Templates Components Production Build Data Sources Local Files APIs CMSs GraphQL Data Layer
29. Setup Setup Files gridsome.config.js gridsome.server.js Source Files /assets (optional) – /fonts – /images – /js – /scss Output /dist /components /data (optional) /layouts /templates
30. TEMPLATE <template> <main> <transition name="fade" appear> <article> <slot/> </article> </transition> <nav class="primary-nav"> <g-link class="home-action" to="/"> <svg></svg> </g-link> </nav> </main> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
31. TEMPLATE <static-query> query {} </static-query> <script> import SiteSEO from '~/components/SiteSEO' export default { mixins: [SiteSEO], } </script> <style> </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
32. COMPONENT <template> <transition name="modal-fade"> <div class="modal"> <div class="modal-content"> <button type=“button" @click="close"></button> <div class="video-wrapper"> <slot /> </div> </div> </div> </transition> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
33. COMPONENT <script> export default { name: 'Modal', methods: { close() { this.$emit('close'); }, }, }; </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
34. COMPONENT <style lang="scss"> .modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
35. PAGE <template> <Layout> <div class="video-main"> <div class="video-main-details powerfulmerger"> <h1 class="video-main-title">{{title}}</h1> <h2 class="video-main-people">{{innovatorName}} from {{innovatorCompany}}</h2> <p class="video-main-description">{{description}}</p> <button @click="showModal" class="video-main-action"> <span>Watch Video</span> </button> </div> <div class="video-main-bottom-gradient"></div> </div> <Modal v-show="isModalVisible" @close="closeModal"> <iframe src="" width="640px" height="360px"></iframe> </Modal> </Layout> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
36. PAGE <script> import videos from '@/data/videos.json' import Modal from '@/components/Modal.vue' import VideoPlayer from '@/components/Video.vue' export default { data() { return { videos, isModalVisible: false, } }, metaInfo: { title: 'A Powerful Merger' }, components: { Modal, VideoPlayer }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
37. PAGE methods: { showModal() { this.isModalVisible = true; }, closeModal() { this.isModalVisible = false; } } } </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
38. gridsome.server.js const axios = require('axios') module.exports = function (api) { api.loadSource(async ({ addCollection }) => { const { data } = await axios.get(‘https://localhost:1340/videos') const posts = addCollection('Videos') for (const video of data) { videos({ id: video.id, title: video.title, description: video.description, innovatorName: video.innovator.name, innovatorCompany: video.innovator.company }) } }) } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
39. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
40. Why Docker? Ship Faster Makes it easier to deploy isolated environments with minimal setup 1 2 Standardized The container already has server info, dependencies, and the app set up 3 Portable Makes it easy to share instances with other devs and move to different environments Automates the deployment of applications as portable, self-sufficient containers that can run on the cloud, on your own servers, and on localhost
41. github.com/strapi/strapi-docker
42. Where to Deploy? Gridsome (front-end) Netlify (easiest) Github Pages Gitlab Pages Amazon S3 Your Server Strapi /w Docker (data) Azure Amazon AWS Digital Ocean Heroku (easiest)
43. Fin. Open Office Hours Friday mornings: 7:00am — 9:00am EST officehours.io/people/bermonpainter Twitter/LinkedIn @bermonpainter