Introduction to DockYard Beacon CMS
Tags: development, web, elixir, liveview
Published: 2023-01-04 03:24:32

---
title: Introduction to DockYard Beacon CMS
published: true
date: 2022-12-01 18:00:00 UTC
tags: development,web,Elixir,Liveview
canonical_url: https://braytonium.com/2022/12/01/dock-yard-beacon-cms/
---

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

[https://twitter.com/bcardarella/status/1474126383123247104?lang=en](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/](https://beaconcms.org/). This post covers the complete instructions in the [readme](https://github.com/BeaconCMS/beacon) 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](https://github.com/w0rd-driven/beacon_sample_umbrella) 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](https://github.com/BeaconCMS/beacon) 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](http://localhost:4000/beacon/home) to view the main CMS page.

26. Navigate to [http://localhost:4000/beacon/blog/beacon\_is\_awesome](http://localhost:4000/beacon/blog/beacon_is_awesome) to view the blog post.

27. Navigate to [http://localhost:4000/page\_management/pages](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](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.