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
Create a top-level directory to keep our application pair. This is temporary as the project matures.
Clone GitHub - BeaconCMS/beacon: Beacon CMS to
./beacon.Start with our first step from the Readme
Go to the umbrella project directory
Initialize git
Commit the freshly initialized project
Add :beacon as a dependency to both apps in your umbrella projectRun
mix deps.getto install the dependencies.Commit the changes.
Configure Beacon RepoCommit the changes.
Create a BeaconDataSource module that implements Beacon.DataSource.BehaviourCommit the changes.
Make router (
apps/beacon_sample_web/lib/beacon_sample_web/router.ex) changes to cover Beacon pages.Commit the changes.
Add some components to your
apps/beacon_sample/priv/repo/seeds.exs.Run
ecto.resetto create and seed our database(s).We can skip to Step 22 now that the
SafeCodepackage works as expected.This is typically where we run into issues with
safe_codeon the inner content of the layout seed, specifically:In Beacon's repository, remove
SafeCode.Validator.validate_heex!function calls from the loadersFix the seeder to work without SafeCode.
Commit the seeder changes.
Enable Page Management and the Page Management API in router (
apps/beacon_sample_web/lib/beacon_sample_web/router.ex).Commit the Page Management router changes.
Navigate to http://localhost:4000/beacon/home to view the main CMS page.
Navigate to http://localhost:4000/beacon/blog/beacon_is_awesome to view the blog post.
Navigate to http://localhost:4000/page_management/pages to view the
Page Managementsection.
Playground
We should put the page management through its paces to determine weak points.
- Add another more robust layout.
- Can we bring in JS frameworks like Vue? My guess is no, the layout looks to start under a
<main>. - Inject javascript at the bottom, this should load at the bottom of our
<body>section. - Try CDN urls first, then localhost.
- Can we bring in JS frameworks like Vue? My guess is no, the layout looks to start under a
- Add another stylesheet. How do we use
stylesheet_urls? - Add another more robust component.
- Can we use LiveView slots here? We're on
0.17.7.
- Can we use LiveView slots here? We're on
- 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.- What migrations are possibly included by Phoenix? Only users?
- Add a user profile page.
Notes
- The dependency
safe_codewas 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
BeaconWebscope and adding it asBeaconSampleWebinstead.- Navigating to http://localhost:4000/page/home throws an
UndefinedFunctionErrorasfunction BeaconSampleWeb.PageLive. __live__ /0 is undefined (module BeaconSampleWeb.PageLive is not available).
- Navigating to http://localhost:4000/page/home throws an
- 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)