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. Product Development
    with Vue.js
    @bermonpainter | #Confoo

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  4. Evolution
    Browser Server

    View full-size slide

  5. Evolution
    Browser Server Database

    View full-size slide

  6. Evolution
    Browser CDN Server Database

    View full-size slide

  7. Evolution
    Browser CDN Server API Services Database

    View full-size slide

  8. Evolution
    Browser
    CDN Build Tool
    API Services
    GIT
    Headless CMS Database

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  12. Headless CMS
    The HeadlessCMS
    A content management system decoupled from the end-user experience.
    Browser
    API Services
    Front-End
    Database
    Admin Interface

    View full-size slide

  13. headlesscms.org

    View full-size slide

  14. 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).

    View full-size slide

  15. Setting up
    relational data
    Companies

    View full-size slide

  16. Setting up
    relational data
    People

    View full-size slide

  17. Setting up
    relational data
    Videos

    View full-size slide

  18. Setting up
    relational data
    Generated APIs

    View full-size slide

  19. Setting up
    relational data
    Generated APIs

    View full-size slide

  20. localhost:1340/videos

    View full-size slide

  21. JAMstack Concepts
    The Headless CMS
    Accelerating Development with Vue.js
    A Bit About Docker + Deployment
    1
    2
    3
    4
    Product Development
    with Vue.js

    View full-size slide

  22. gridsome.org

    View full-size slide

  23. 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

    View full-size slide

  24. The Workflow
    Browser
    Gridsome
    Layouts
    Templates
    Components
    Production
    Build
    Data Sources
    Local Files
    APIs
    CMSs
    GraphQL Data
    Layer

    View full-size slide

  25. Setup
    Setup Files
    gridsome.config.js
    gridsome.server.js
    Source Files
    /assets (optional)
    – /fonts
    – /images
    – /js
    – /scss
    Output
    /dist
    /components
    /data (optional)
    /layouts
    /templates

    View full-size slide

  26. TEMPLATE














    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  27. TEMPLATE

    query {}

    <br/>import SiteSEO from '~/components/SiteSEO'<br/>export default {<br/>mixins: [SiteSEO],<br/>}<br/>
    <br/>
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  28. COMPONENT












    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  29. COMPONENT
    <br/>export default {<br/>name: 'Modal',<br/>methods: {<br/>close() {<br/>this.$emit('close');<br/>},<br/>},<br/>};<br/>
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  30. COMPONENT
    <br/>.modal-fade-enter,<br/>.modal-fade-leave-active {<br/>opacity: 0;<br/>}<br/>.modal {<br/>position: fixed;<br/>top: 0;<br/>bottom: 0;<br/>left: 0;<br/>right: 0;<br/>background-color: rgba(0, 0, 0, 0.5);<br/>z-index: 1000;<br/>}<br/>
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  31. PAGE




    {{title}}
    {{innovatorName}} from
    {{innovatorCompany}}
    {{description}}

    Watch Video









    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  32. PAGE
    <br/>import videos from '@/data/videos.json'<br/>import Modal from '@/components/Modal.vue'<br/>import VideoPlayer from '@/components/Video.vue'<br/>export default {<br/>data() {<br/>return {<br/>videos,<br/>isModalVisible: false,<br/>}<br/>},<br/>metaInfo: {<br/>title: 'A Powerful Merger'<br/>},<br/>components: {<br/>Modal,<br/>VideoPlayer<br/>},<br/>1.<br/>2.<br/>3.<br/>4.<br/>5.<br/>6.<br/>7.<br/>8.<br/>9.<br/>10.<br/>11.<br/>12.<br/>13.<br/>14.<br/>15.<br/>16.<br/>17.<br/>18.<br/>19.<br/>

    View full-size slide

  33. PAGE
    methods: {
    showModal() {
    this.isModalVisible = true;
    },
    closeModal() {
    this.isModalVisible = false;
    }
    }
    }

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    View full-size slide

  34. 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.

    View full-size slide

  35. JAMstack Concepts
    The Headless CMS
    Accelerating Development with Vue.js
    A Bit About Docker + Deployment
    1
    2
    3
    4
    Product Development
    with Vue.js

    View full-size slide

  36. 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

    View full-size slide

  37. github.com/strapi/strapi-docker

    View full-size slide

  38. 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)

    View full-size slide

  39. Fin.
    Open Office Hours
    Friday mornings: 7:00am — 9:00am EST
    officehours.io/people/bermonpainter
    Twitter/LinkedIn
    @bermonpainter

    View full-size slide