DEV Community

Jeremy Brayton
Jeremy Brayton

Posted on • Originally published at braytonium.com on

Introduction to DockYard Beacon CMS

#development #web #elixir #liveview

In December of 2021, Brian Cardarella introduced DockYard Beacon CMS in this series of tweets:

https://twitter.com/bcardarella/status/1474126383123247104?lang=en

Over the course of the past year, I've created a sample project a total of 3 times to get a better understanding for how it operates. I haven't seen a ton of content on Beacon beyond announcement tweets, the mention in the ElixirConf 2022 keynote, and https://beaconcms.org/. This post covers the complete instructions in the readme with some notes on where to go from here. I had run into a few snags at first but a lot of those initial pain points have been hammered out so far. While a basic "Hello World" sample project is great, I plan on expanding on the sample with deeper dives into how Beacon serves up content. It takes a few novel approaches I haven't seen before to create either a CMS that runs along your application or it can be centralized with multi-tenancy. One CMS can service all of your ancillary marketing sites, blogs, or wherever you need the content.

The following instructions are also listed on the sample application readme so you're welcome to skip them if you want to look at the code.

Installation

Steps

  1. Create a top-level directory to keep our application pair. This is temporary as the project matures.

  2. Clone GitHub - BeaconCMS/beacon: Beacon CMS to ./beacon.

  3. Start with our first step from the Readme

  4. Go to the umbrella project directory

  5. Initialize git

  6. Commit the freshly initialized project

  7. Add :beacon as a dependency to both apps in your umbrella project

  8. Run mix deps.get to install the dependencies.

  9. Commit the changes.

  10. Configure Beacon Repo

  11. Commit the changes.

  12. Create a BeaconDataSource module that implements Beacon.DataSource.Behaviour

  13. Commit the changes.

  14. Make router (apps/beacon_sample_web/lib/beacon_sample_web/router.ex) changes to cover Beacon pages.

  15. Commit the changes.

  16. Add some components to your apps/beacon_sample/priv/repo/seeds.exs.

  17. Run ecto.reset to create and seed our database(s).

  18. We can skip to Step 22 now that the SafeCode package works as expected.

  19. This is typically where we run into issues with safe_code on the inner content of the layout seed, specifically:

  20. In Beacon's repository, remove SafeCode.Validator.validate_heex! function calls from the loaders

  21. Fix the seeder to work without SafeCode.

  22. Commit the seeder changes.

  23. Enable Page Management and the Page Management API in router (apps/beacon_sample_web/lib/beacon_sample_web/router.ex).

  24. Commit the Page Management router changes.

  25. Navigate to http://localhost:4000/beacon/home to view the main CMS page.

  26. Navigate to http://localhost:4000/beacon/blog/beacon_is_awesome to view the blog post.

  27. Navigate to http://localhost:4000/page_management/pages to view the Page Management section.

Playground

We should put the page management through its paces to determine weak points.

  1. Add another more robust layout.
    1. Can we bring in JS frameworks like Vue? My guess is no, the layout looks to start under a <main>.
    2. Inject javascript at the bottom, this should load at the bottom of our <body> section.
    3. Try CDN urls first, then localhost.
  2. Add another stylesheet. How do we use stylesheet_urls?
  3. Add another more robust component.
    1. Can we use LiveView slots here? We're on 0.17.7.
  4. A replica of Laravel Nova panel of pages. Welcome and Home are Laravel defaults. Users would be useful as we could integrate with phx gen auth.
    1. What migrations are possibly included by Phoenix? Only users?
    2. Add a user profile page.

Notes

  • The dependency safe_code was a problem during my first two attempts.
    • The third attempt on 11/6/2022 has no issues so far.
  • I ran into issues by failing to add a BeaconWeb scope and adding it as BeaconSampleWeb instead.
    • Navigating to http://localhost:4000/page/home throws an UndefinedFunctionError as function BeaconSampleWeb.PageLive. __live__ /0 is undefined (module BeaconSampleWeb.PageLive is not available).
  • The sample isn't as "pristine" as I'd like due to the bug fix but it really shouldn't be a showstopper.
    • Fixed this as I generated a new repository. There really aren't a ton of steps.
  • As of 3/16 page management only covers the page. The layout, component, and stylesheet models are not covered yet.
  • Stylesheets are injected into the <head> as inline <style> tags.
  • Layout sits under <body><div data-phx-main="true">
  • Running the server (mix phx.server) immediately boots our Beacon components before it shows the url.

Top comments (0)

Read next

krodante profile image

Creating a Date Range Picker with Phoenix LiveView

Kathy -

happyer profile image

In-Depth Perspective on Flutter: A Comprehensive Analysis and Practice Guide

happyer -

shrihari profile image

Cloudflare Pages NextJs + D1 Database ᐧ My experience developing sharejson

Shrihari Mohan -

azyzz profile image

Network optimization (4x WS message size reduction) for sending a lot of data from LiveView to client using push_event

aziz abdullaev -