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.