Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Bermon Painter

February 27, 2020
Tweet

More Decks by Bermon Painter

Other Decks in Programming

Transcript

  1. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A

    Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
  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. 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.
  4. 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
  5. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A

    Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
  6. Headless CMS The HeadlessCMS A content management system decoupled from

    the end-user experience. Browser API Services Front-End Database Admin Interface
  7. 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).
  8. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A

    Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
  9. 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
  10. Setup Setup Files gridsome.config.js gridsome.server.js Source Files /assets (optional) –

    /fonts – /images – /js – /scss Output /dist /components /data (optional) /layouts /templates
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A

    Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js
  21. 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
  22. 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)
  23. Fin. Open Office Hours Friday mornings: 7:00am — 9:00am EST

    officehours.io/people/bermonpainter Twitter/LinkedIn @bermonpainter