View Source Getting Started
Setup
Before you setup LiveView Native Guides you'll need to install the following prerequisites:
Clone the Project
HTTPS
$ git clone https://github.com/BrooklinJazz/liveview_native_guides.git
SSH
git clone git@github.com:BrooklinJazz/liveview_native_guides.git
Create the PostgreSQL Database
Run the following from the project live_view_native_guides
folder to create the Database.
$ mix ecto.create
If this command fails, ensure you have Postgres installed.
By default, the project assumes you have a superuser named postgres
with the password postgres
. You can manage this configuration in dev.exs
if you prefer to change these credentials.
Start the Phoenix Server
Navigate to the live_view_native_guides
folder and start the Phoenix server. Make sure to set the sname
and cookie
flags as we'll use these later when we start the Livebook runtime as an attached node to the Phoenix server.
$ iex --sname test --cookie mycookie -S mix phx.server
Attached Node Runtime
LiveView Native Guides work best when you run the the Livebook runtime as an attached node to the included Phoenix project.
See this short video for instructions on how to start the Livebook runtime as an attached node: https://www.youtube.com/watch?v=vPrFBjgAMyM&t=2s&ab_channel=Livebook
Alternatively, to make this process easier, we've included a .env
file in the project that you can use to set the default runtime.
export LIVEBOOK_DEFAULT_RUNTIME="attached:test:mycookie"
Ensure the included Phoenix server is always running with the same sname
and cookie
as Livebook when using these guides. We've used test
and mycookie
by default to minimize any friction but you can use your own values.
Hello Web
Evaluate the following example smart cell and visit http://localhost:4000 to ensure both Livebook and your Phoenix server are connected properly.
import Kernel, except: [defmodule: 2]
import KinoLiveView.SmartCell, only: [defmodule: 2, register: 2]
defmodule MyAppWeb.HelloLive do
use Phoenix.LiveView
use LiveViewNative.LiveView
@impl true
def render(%{platform_id: :swiftui} = assigns) do
# This UI renders on the iPhone / iPad app
~SWIFTUI"""
<VStack>
<Text>
Hello native!
</Text>
</VStack>
"""
end
@impl true
def render(%{} = assigns) do
# This UI renders on the web
~H"""
<div class="flex w-full h-screen items-center bg-red-500">
<span class="w-full text-center">
Hello web!
</span>
</div>
"""
end
end
|> register("/")
import KinoLiveView.SmartCell, only: []
import Kernel
:ok
Hello Native
Start Xcode and open the existing LiveViewNativeGuides
project included in the native/swiftui
folder of this project.
Press the start button (<i class="ri-play-fill"></i>) on Xcode once the project has finished indexing to start the LiveView Native Guides SwiftUI project on the Xcode simulator.
The SwiftUI application should open on your device.

Live Reloading
Now you can make changes to LiveViews by re-evaluating a smart cell, or evaluating a new cell that replaces the existing LiveView.
For example, evaluate the smart cell below and notice that both the web and native applications live update.
import Kernel, except: [defmodule: 2]
import KinoLiveView.SmartCell, only: [defmodule: 2, register: 2]
defmodule LiveViewNativeGuidesWeb.HelloLive do
use Phoenix.LiveView
use LiveViewNative.LiveView
@impl true
def render(%{platform_id: :swiftui} = assigns) do
# This UI renders on the iPhone / iPad app
~SWIFTUI"""
<VStack>
<Text>
Hello updated native!
</Text>
</VStack>
"""
end
@impl true
def render(%{} = assigns) do
# This UI renders on the web
~H"""
<div class="flex w-full h-screen items-center bg-red-200">
<span class="w-full text-center">
Hello updated web!
</span>
</div>
"""
end
end
|> register("/")
import KinoLiveView.SmartCell, only: []
import Kernel
:ok
Troubleshooting
You can raise an Issue if you have any trouble setting up the project or encounter any issues.
You can also contact Brooklin Myers at brooklin.myers@dockyard.com or DM on twitter @BrooklinJMyers for support.