Recently, after a brief outage at work, I wondered if it would be possible to replicate the problem locally using Laravel Valet. My Google search landed on this StackOverflow post, where the answers shot down the idea. Not to be dissuaded by something I read on the internet, I started investigating if it was possible and stumbled upon what I think is a viable solution. There aren't very many hoops to jump through or major quirks so I believe it's not only possible but could be supported out of the box.
In my case, I want to proxy the domain scdn-app.thinkorange.com
through my local version of the Laravel application.
~/.config/valet/config.json
on macOS and change the tld
parameter from test
to com
.valet link scdn-app.thinkorange
to set up our valet configuration to point the domain to this directory.valet secure scdn-app.thinkorange
to set up the SSL certificate.cd ~/.config/valet/dnsmasq.d
.cp tld-test.conf tld-com.conf
.address=/.com/127.0.0.1
and save the file.valet isolate --site scdn-app.thinkorange php@8.1
./etc/hosts
file to redirect the domain to 127.0.0.1
for ipv4 and ::1
. I use the excellent Gas Mask to make this step easier.Now we should have a functional production proxy through our local machine. This configuration creates a few problems around keeping the com
TLD.
Fortunately, a few extra steps are necessary for us to switch back to .test
while also keeping this site functional.
~/.config/valet/config.json
again and change the tld
parameter from com
back to test
. This change will immediately break our site.cd ~/.config/valet/Sites
.ls -al
to list the directory, we'll see our site scdn-app.thinkorange
. Let's change that.mv scdn-app.thinkorange scdn-app.thinkorange.com
.Our site should now be working again. We are also able to continue serving our previous local test domains.
Because we can create a permanently functional system using these steps, I believe it should be possible to create a pull request to reduce the number of hoops we have to jump through.
I'd love to be able to run valet link scdn-app.thinkorange.com.
with a period at the end to denote I'm including the full domain with TLD.
That would eliminate the temporary step of editing the config.json
file, and the Sites
directory would just work(TM) as it would include the .com
directory name.
I don't believe we even need the dnsmasq changes as I'm able to navigate to a functional site without them.
I believe Gas Mask is doing the work, but it's better to be safe than sorry.
If you'd prefer a YouTube video where I stumble through recreating these steps from scratch:
Tell me if you've done this before. You write up a nice little prototype of an idea in Livebook. You then get distracted by life situations like eating, writing an email, or taking a nap. You feel the need to close Livebook or prune the multiple sessions you've had running for weeks now. Because you have a million tabs open (with a session manager) and too many in Livebook to individually check, you restart your computer and let it crash(TM). When you open up Livebook again, "Oh. Shiiiiit" you exclaim. Where the hell did that notebook go? I'm 100% sure I clicked the disk icon, what the hell? If you're like me, you may have created this forked Livebook from memory, possibly taking a better approach.
There is a better way to handle this scenario. Livebook has had autosaves since 0.4:
The feature was added in this PR according to the changelog:
https://github.com/livebook-dev/livebook/pull/736
To find your autosave files:
For the Desktop application and CLI in production: ~/Library/Application Support/livebook/autosaved/
.
/Users/jbrayton/Library/Application Support/livebook/autosaved/
.For the dev environment: in config/dev.exs
, this is set as config :livebook, :data_path, Path.expand("tmp/livebook_data/dev"
.
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/
.For the test environment: in config/test.exs
this is set as Path.expand("tmp/livebook_data/test")
.
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/test/autosaved/
.Notebooks are saved by day in the autosave directory and the date corresponds to when they were created (when you immediately click the New notebook button).
To view or change your autosave directory in the CLI:
Settings
under the Home
and Learn
links.For the Desktop application, the port will be randomized but you can either change the URL to tack on /settings
after the port or click around to the settings page as described earlier.
If you are curious as to how this setting gets configured, we can start by looking at Livebook.Settings.default_autosave_path()
in https://github.com/livebook-dev/livebook/blob/main/lib/livebook/settings.ex#L32-L34.
We follow Livebook.Config.data_path()
to https://github.com/livebook-dev/livebook/blob/main/lib/livebook/config.ex#L76-L78 then the Erlang function :filename.basedir(:user_data, "livebook")
.
Running this in Livebook we get the output "/Users/jbrayton/Library/Application Support/livebook"
, precisely where the desktop app stores its files.
What lead me to this discovery, after vaguely remembering autosave was a thing, was looking for files on my computer.
I purposefully install and use the locate
command because I find it far easier to use than remembering the find -name
syntax.
Here's the output for checking that the word autosave
is in any directory or file name:
⋊> ~ locate autosaved/
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_10_31/18_25_03_mapset_drills_hedh.livemd
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_11_03/18_12_21_teller_bank_challenge_pv4e.livemd
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_11_03/18_13_39_untitled_notebook_pidb.livemd
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_11_03/19_31_57_dockyard_academy_amas_p75r.livemd
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_11_03/20_02_17_intro_to_timescale_jm7r.livemd
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_11_08/11_10_21_untitled_notebook_ervg.livemd
/Users/Shared/repositories/personal/elixir/livebook/tmp/livebook_data/dev/autosaved/2022_11_22/19_15_12_untitled_notebook_p75e.livemd
What I found interesting was that my files in ~/Library/Application Support/livebook/autosaved/
did not show up.
Had I not realized there could be different locations, I may have overlooked the notebook I was looking for all along.
I have no clue why locate
doesn't scour the directories in ~/Library
it should have access to but that's a problem for another day.
In December of 2021, Brian Cardarella introduced DockYard Beacon CMS in this series of tweets:
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.
Create a top-level directory to keep our application pair. This is temporary as the project matures.
mkdir beacon_sample
Clone GitHub - BeaconCMS/beacon: Beacon CMS to ./beacon
.
git clone git@github.com:BeaconCMS/beacon.git
Start with our first step from the Readme
mix phx.new --umbrella --install beacon_sample
Go to the umbrella project directory
cd beacon_sample/
Initialize git
git init
Commit the freshly initialized project
Initial commit of Phoenix v1.6.15
as of the time of this writing.Add :beacon as a dependency to both apps in your umbrella project
# Local:
{:beacon, path: "../../../beacon"},
# Or from GitHub:
{:beacon, github: "beaconCMS/beacon"},
apps/beacon_sample/mix.exs
and apps/beacon_sample_web/mix.exs
under the section defp deps do
.mix deps.get
to install the dependencies.Commit the changes.
Add :beacon as a dependency to both apps in your umbrella project
seems like a good enough commit message.Configure Beacon Repo
Beacon.Repo
under the ecto_repos:
section in config/config.exs
.Configure the database in dev.exs
. We'll do production later.
# Configure beacon database
config :beacon, Beacon.Repo,
username: "postgres",
password: "postgres",
database: "beacon_sample_beacon",
hostname: "localhost",
show_sensitive_data_on_connection_error: true,
pool_size: 10
Commit the changes.
Configure Beacon Repo
subject with Configure the beacon repository in our dev only environment for now.
body.Create a BeaconDataSource module that implements Beacon.DataSource.Behaviour
Create apps/beacon_sample/lib/beacon_sample/datasource.ex
defmodule BeaconSample.BeaconDataSource do
@behaviour Beacon.DataSource.Behaviour
def live_data("my_site", ["home"], _params), do: %{vals: ["first", "second", "third"]}
def live_data("my_site", ["blog", blog_slug], _params), do: %{blog_slug_uppercase: String.upcase(blog_slug)}
def live_data(_, _, _), do: %{}
end
Add that DataSource to your config/config.exs
config :beacon,
data_source: BeaconSample.BeaconDataSource
Commit the changes.
Configure BeaconDataSource
Make router (apps/beacon_sample_web/lib/beacon_sample_web/router.ex
) changes to cover Beacon pages.
Add a :beacon
pipeline. I typically do this towards the pipeline sections at the top, starting at line 17.
pipeline :beacon do
plug BeaconWeb.Plug
end
Add a BeaconWeb
scope.
scope "/", BeaconWeb do
pipe_through :browser
pipe_through :beacon
live_session :beacon, session: %{"beacon_site" => "my_site"} do
live "/beacon/*path", PageLive, :path
end
end
Comment out existing scope.
# scope "/", BeaconSampleWeb do
# pipe_through :browser
# get "/", PageController, :index
# end
Commit the changes.
Add routing changes
Add some components to your apps/beacon_sample/priv/repo/seeds.exs
.
alias Beacon.Components
alias Beacon.Pages
alias Beacon.Layouts
alias Beacon.Stylesheets
Stylesheets.create_stylesheet!(%{
site: "my_site",
name: "sample_stylesheet",
content: "body {cursor: zoom-in;}"
})
Components.create_component!(%{
site: "my_site",
name: "sample_component",
body: """
<li>
<%= @val %>
</li>
"""
})
%{id: layout_id} =
Layouts.create_layout!(%{
site: "my_site",
title: "Sample Home Page",
meta_tags: %{"foo" => "bar"},
stylesheet_urls: [],
body: """
<header>
Header
</header>
<%= @inner_content %>
<footer>
Page Footer
</footer>
"""
})
%{id: page_id} =
Pages.create_page!(%{
path: "home",
site: "my_site",
layout_id: layout_id,
template: """
<main>
<h2>Some Values:</h2>
<ul>
<%= for val <- @beacon_live_data[:vals] do %>
<%= my_component("sample_component", val: val) %>
<% end %>
</ul>
<.form let={f} for={:greeting} phx-submit="hello">
Name: <%= text_input f, :name %> <%= submit "Hello" %>
</.form>
<%= if assigns[:message], do: assigns.message %>
</main>
"""
})
Pages.create_page!(%{
path: "blog/:blog_slug",
site: "my_site",
layout_id: layout_id,
template: """
<main>
<h2>A blog</h2>
<ul>
<li>Path Params Blog Slug: <%= @beacon_path_params.blog_slug %></li>
<li>Live Data blog_slug_uppercase: <%= @beacon_live_data.blog_slug_uppercase %></li>
</ul>
</main>
"""
})
Pages.create_page_event!(%{
page_id: page_id,
event_name: "hello",
code: """
{:noreply, Phoenix.LiveView.assign(socket, :message, "Hello \#{event_params["greeting"]["name"]}!")}
"""
})
Run ecto.reset
to create and seed our database(s).
cd apps/beacon_sample
.mix ecto.setup
(as our repos haven't been created yet).mix ecto.reset
thereafter.SafeCode
package works as expected.This is typically where we run into issues with safe_code
on the inner content of the layout seed, specifically:
** (RuntimeError) invalid_node:
assigns . :inner_content
<%= @inner_content %>
, seeding seems to complete.Running mix phx.server
throws another error:
** (RuntimeError) invalid_node:
assigns . :val
safe_code
is problematic and needs to be surgically removed from Beacon for now.In Beacon's repository, remove SafeCode.Validator.validate_heex!
function calls from the loaders
lib/beacon/loader/layout_module_loader.ex
lib/beacon/loader/page_module_loader.ex
lib/beacon/loader/component_module_loader.ex
Fix the seeder to work without SafeCode.
apps/beacon_sample/priv/repo/seeds.exs
under Pages.create_page!
from <%= for val <- live_data[:vals] do %>
to <%= for val <- live_data.vals do %>
.Commit the seeder changes.
Add component seeds
Enable Page Management and the Page Management API in router (apps/beacon_sample_web/lib/beacon_sample_web/router.ex
).
require BeaconWeb.PageManagement
require BeaconWeb.PageManagementApi
scope "/page_management", BeaconWeb.PageManagement do
pipe_through :browser
BeaconWeb.PageManagement.routes()
end
scope "/page_management_api", BeaconWeb.PageManagementApi do
pipe_through :api
BeaconWeb.PageManagementApi.routes()
end
Commit the Page Management router changes.
Add Page Management routes
Navigate to http://localhost:4000/beacon/home to view the main CMS page.
Header
, Some Values
, and Page Footer
with a zoom-in cursor over the page.Navigate to http://localhost:4000/beacon/blog/beacon_is_awesome to view the blog post.
Header
, A blog
, and Page Footer
with a zoom-in cursor over the page.Navigate to http://localhost:4000/page_management/pages to view the Page Management
section.
Listing Pages
, Reload Modules
, a list of pages, and New Page
.We should put the page management through its paces to determine weak points.
Add another more robust layout.
<main>
.<body>
section.stylesheet_urls
?Add another more robust component.
0.17.7
.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
.
The dependency safe_code
was a problem during my first two attempts.
I ran into issues by failing to add a BeaconWeb
scope and adding it as BeaconSampleWeb
instead.
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.
<head>
as inline <style>
tags.<body><div data-phx-main="true">
mix phx.server
) immediately boots our Beacon components before it shows the url.Originally, I wrote up a post trying to give a 2020 - 2021 overview that got hosed with a local git repo of this blog. I'm using the moment to remind myself that backups are important. It's also important to complete ideas for posts or journals quickly, even if something doesn't feel complete. Letting those linger for days without a git commit that hit the server is a genuine problem and I need to at the very least create and push to a new branch often.
One change that happened at the end of 2020, I started the journal section to try to capture bite-sized rough ideas. I had started a journal at work with notes in files like Phoenix Developer Diary.txt
and I looked for a solution to merge my different diaries. The excellent Claire Codes has an extremely consistent diary at clairecodes and served as my main source of inspiration.
I've gone all-in learning Elixir by participating in my first Advent of Code in 2020. I tapered off pretty quickly as I had serious problems working through loops and control flow. Seeing other examples on Elixir Forum helped immensely as I had slowly gotten better at reading the code. Later on in the year, I decided to take a TodoMVC sample through to a LiveView version with a little help from other resources on the internet. I had also started a diary where I wanted to capture the approaches I took each day I worked on the example. I have a plan to try to tackle my version from scratch but I'm also looking at other application ideas.
While the Advent of Code and TodoMVC was good to get my feet wet, I learned far more by pushing through Exercism exercises. If you're on Exercism and curious, my solutions can be found here. I highly recommend using Exercism to learn any language it covers as the recently released version 3 makes for a great experience. Exercises feel a bit more "real world" and less like brain teasers that happen to use programming concepts. Even if I happened to look at the HINTS.md
file, it never felt like cheating as it would only guide us toward a solution, not implement it.
After attending the excellent ElixirConf 2021 virtually, I've started working with Livebook in a few examples. I wanted to highlight the 3 notebooks that use the excellent spider_man
package to crawl 3 websites: Elixir Jobs, Elixir Radar Jobs, and Elixir Companies. Parsing the DOM of each required slowly stretching far outside my comfort zone. It's also worth mentioning that in the Elixir Jobs
example, I left a problem I found under the Sorting the Results
section. Due to the zero-width space, the section throws the message ** (SyntaxError) nofile:5:1: unexpected token: "" (column 1, code point U+200B)
.
Coming to the end of 2021, I'm looking forward to immersing myself deeper in the Elixir ecosystem. Livebook is also a great way to get your feet wet with Elixir concepts, like a powerful language scratchpad. There have been other life changes since January 2020 but those deserve separate posts when I can get to them. Fortunately, the pandemic hasn't been harsh on my family or extended family at all, which I consider an extreme blessing. I can't say we weren't impacted by the last 2 years but things could've been much worse.
In my last post, I mentioned the transition to Gridsome and it has been relatively pain free. I owe a lot of this to the existing community and the great list of starter resources. If a concept isn't explained or clear in the docs, chances are you can gain some insight from the various starters.
One particular concept I had a problem with right out of the gate was how to use markdown files from multiple directories. I started with the post type to handle /year/month/day/title routes but I wanted to move to an equivalent of the generic page type from Hexo. In doing research to the search terms I could've used months ago, I stumbled on multiple issues that point out how to do it.
In the file gridsome.config.js
, I use the following snippet in the plugins section:
{
use: '@gridsome/source-filesystem',
options: {
path: 'blog/articles/**/*.md',
typeName: 'Article',
refs: {
authors: {
typeName: 'Author',
create: true
},
}
}
},
{
use: '@gridsome/source-filesystem',
options: {
path: 'blog/posts/**/*.md',
typeName: 'Post',
refs: {
authors: {
typeName: 'Author',
create: true
},
categories: {
typeName: 'Category',
create: true
},
tags: {
typeName: 'Tag',
create: true
},
}
}
},
Since Gridsome has a concept of pages already, I chose the word article to represent them instead. As an example, the portfolio page is an article type while this page represents a post type. While hindsight makes this seem intuitive now, I somehow had the impression that you were only allowed one plugin type for safety reasons.
To point out something else, the portfolio page highlights a technique I didn't think was possible at the time. The parent portfolio page is an article type but all the subsequent child pages are markdown files in a separate portfolio directory as a portfolio type. In the plugins section of gridsome.config.js
:
{
use: '@gridsome/source-filesystem',
options: {
path: 'blog/portfolio/**/*.md',
typeName: 'Portfolio',
refs: {
authors: {
typeName: 'Author',
create: true
},
}
}
},
Coming from Hexo, I opt for placing content in markdown files and having unique layouts defined in the various pages
and templates
files. As much as Gridsome is a generic website framework, I find that it can be extremely flexible to whatever workflow you wish to create. There are some parts of Hexo I miss like scaffolding new page types or steering me into blog concepts but the transition to Gridsome has been rather smooth. While Gridsome may not be for everyone, I can definitely see how JAMstack has gained traction recently. Barring very few gotchas, working on this site is fun again even in the I-can-see-every-blemish state it's currently in.