Product Development with Vue.js and a Headless CMS

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

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

February 27, 2020
Tweet

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).
  16. None
  17. None
  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
  28. None
  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