View Source Getting Started

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
• Xcode

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

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.

Then, you can evaluate the following smart cell and visit http://localhost:4000 to ensure this Livebook works correctly.

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

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

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

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

In an upcoming lesson, you'll set up an iOS application with Xcode to run native code examples.

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.
• Your version of Xcode 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.