Content Management Systems

SQL Warmup

• Review the following syntax
  • select from
  • limit order by
  • Where
  • Like in

Intro to Content Management

• We’ve been using locally hosted files in our websites for data. However this is not sustainable for many projects
  • issues:
    • you need to be a coder to be able to edit page data
    • page data isn’t stored in a structured environment and requires editing template files to change things
    • Data in data.js type files requires going in and editing them
  • solutions:
    • host data in a database (as we’ve started to learn how to do)
    • set up a CMS that provides a user friendly way to edit, update, and access data
      • ie: Wordpress
• A CMS (content management system) is a way to solve these issues
• Popular CMS’ include: Wordpress, Drupal, Strapi, Sanity…
• Traditionally CMS’ like Wordpress bundles the actual data with the presentation through a theme

Headless vs Monolithic CMS Architecture

• Video: What’s the point of a headless CMS
• Traditional cms’ are heavy and susceptible to attack, their plugin systems offer a lot of customizability but also introduce vulnerabilities, bloat, and pay walls
• Headless CMS’, while taking more initial setup time offer:
  • lighter deployment
  • separation of data from presentation
  • added security
  • better developer experience
  • cheaper to run
  • more customizability
• However the drawbacks are:
  • the project will need a developer (this is good for us, and actually good for client even if they don’t see it)
  • more setup time is required
  • more decisions need to be made at the beginning
  • initial setup time can be longer

In Class Research

• In groups of 3-4 take 20 minutes to research CMS solutions
  • Find 1 monolithic and 2-3 Headless options
  • Assess them for:
    • cost
    • integration options (ie: for Nuxt)
    • type of database used
    • number of users
    • bandwidth
    • other features that spark your interest
• Then take another 10 minutes to make a comparison of your 2 favourites
  • contrast them and identify:
    • your general preference
    • ideal use cases for each cms (one might be better for some kinds of site and less so for others)
    • features that needed more research to understand
    • most valuable features from your point of view

Class Debrief

• Each group will present on one of the CMS’s reviewed
  • however, you’ll speak to the CMS as individuals

Our Stack: Supabase + Directus

• Supabase: Database
• Directus: Content Management Interface
• Nuxt: Frontend
• Render: Deployment
• Github: Code Storage

What does Directus do? and how are we using it

• Directus is an open source headless CMS
• Allows you rto build an interface for adding, deleting, modifying information in the database
• While it has it’s own hosting, that costs money, so we are using it as an NPM project just like our website. we configure it to connect to supabase
  • benefits of this: it gives you the power and freedom of supabase, with the user friendly (especially for non devs) content editing experience

Demo: Set up and configure Directus+Supabase Locallly

• Tutorial to hook the two up

Activity: Connect directus to Supabase

• using the deployed supabase project from last class
• set up directus as per the tutorial instructions
• run directus locally

A word about Environment Variables

• note the .env file in your directus directory
  • you never want .env to be pushed to your repo
  • .env environment variables are necessary for many things to run
    • but you don’t want them to be visible to the outside world
• adding environment variables in Render
  • basically in your render, vercel etc, deployment; you need to recreate the environment from your local setup
    • as the .env file is not in the repo, you’ll need to add those variables using Render’s dashboard this workflow is more or less the same for all env variables and platforms.

Outcome

• The objective of doing this is to have a basis to compare again when we do a containerized cloud deployment next
• Instructions and resources provided will often give you examples like this
  • however we will need a more powerful deployment option

Explore the Directus Dashboard

Content / Data Model

• Data Model collections are where you create schemas for data
  • set up the necessary fields for whatever your data is
    • common usages:
      • products
      • gallery
      • articles
      • posts
    • anything where you have the same data structure for repeated content
  • After setting up a data model, you can start creating content

Activity: Create a blog post schema

• Create a blog post schema
• Fields should include:
  • title
  • summary
  • post
  • date
• For a more advanced experience, try recreating a post from Cassie Codes

Deploy Directus

• Follow these instructions
• This will be the basis for your next assignment