Getting Started

notebook_path = __ENV__.file |> String.split("#") |> hd()

Mix.install(
  [
    {:kino_live_view_native, github: "liveview-native/kino_live_view_native"}
  ],
  config: [
    server: [
      {ServerWeb.Endpoint,
       [
         server: true,
         url: [host: "localhost"],
         adapter: Phoenix.Endpoint.Cowboy2Adapter,
         render_errors: [
           formats: [html: ServerWeb.ErrorHTML, json: ServerWeb.ErrorJSON],
           layout: false
         ],
         pubsub_server: Server.PubSub,
         live_view: [signing_salt: "JSgdVVL6"],
         http: [ip: {0, 0, 0, 0}, port: 4000],
         check_origin: false,
         secret_key_base: String.duplicate("a", 64),
         live_reload: [
           patterns: [
             ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg|styles)$",
             ~r/#{notebook_path}$/
           ]
         ]
       ]}
    ],
    kino: [
      group_leader: Process.group_leader()
    ],
    phoenix: [
      template_engines: [neex: LiveViewNative.Engine]
    ],
    phoenix_template: [format_encoders: [swiftui: Phoenix.HTML.Engine]],
    mime: [
      types: %{"text/swiftui" => ["swiftui"], "text/styles" => ["styles"]}
    ],
    live_view_native: [plugins: [LiveViewNative.SwiftUI]],
    live_view_native_stylesheet: [
      attribute_parsers: [
        style: [
          livemd: &Server.AttributeParsers.Style.parse/2
        ]
      ],
      content: [
        swiftui: [
          "lib/**/*swiftui*",
          notebook_path
        ]
      ],
      pretty: true,
      output: "priv/static/assets"
    ]
  ],
  force: true
)

Overview

Our livebook guides provide step-by-step lessons to help you learn LiveView Native using Livebook. These guides assume that you already have some familiarity with Phoenix LiveView applications.

You can read these guides online on HexDocs, but for the best experience, we recommend clicking on the “Run in Livebook” badge to import and run the guide locally with Livebook.

You may complete guides individually, but we suggest following them chronologically for the most comprehensive learning experience.

Prerequisites

To use these guides, you’ll need to install the following prerequisites:

• Elixir/Erlang
• Livebook
• LVN GO

While not necessary for our guides, we also recommend you install the following for general LiveView Native development:

• Phoenix
• PostgreSQL
• LiveView Native VS Code Extension
• Xcode

Hello World

If you are not already running this guide in Livebook, click on the “Run in Livebook” badge at the top of this page to import it. Evaluate the smart cell below, and visit http://localhost:4000 on the LVN GO app to view the SwiftUI template.

require Server.Livebook
import Server.Livebook
import Kernel, except: [defmodule: 2]


defmodule ServerWeb.ExampleLive.SwiftUI do
  use ServerNative, [:render_component, format: :swiftui]

  def render(assigns, _interface) do
    ~LVN"""
    Hello, from LiveView Native!
    """
  end
end

defmodule ServerWeb.ExampleLive do
  use ServerWeb, :live_view
  use ServerNative, :live_view

  @impl true
  def render(assigns) do
    ~H"""
    
Hello from LiveView!
    """
  end
end

|> Server.SmartCells.LiveViewNative.register("/")

import Server.Livebook, only: []
import Kernel
:ok

Your Turn: Live Reloading

In the above LiveView, change Hello from LiveView! to Hello again from LiveView!. After making the change, reevaluate the cell. Notice that the application live reloads and automatically updates in the browser.

Kino LiveView Native

To run a Phoenix + LiveView Native application from within Livebook we built the Kino LiveView Native library.

Whenever you run one of our Livebooks, a server starts on localhost:4000. Ensure no other servers are running on port 4000, or you may experience issues.

Troubleshooting

Some common issues you may encounter are:

• Another server is already running on port 4000.
• Your version of Livebook needs to be updated.
• Your version of Elixir/Erlang needs to be updated.
• This Livebook has cached outdated versions of dependencies

Ensure you have the latest versions of all necessary software installed, and ensure no other servers are running on port 4000.

To clear the cache, you can click the Setup without cache button revealed by clicking the dropdown next to the setup button at the top of the Livebook.

If that does not resolve the issue, you can raise an issue to receive support from the LiveView Native team.