elixirconf2022

Code examples for ElixirConf 2022 talk on using Svelte with Phoenix LiveView.

A more descriptive write-up of the talk can be found here on dev.to.

This project is built with the following components:

• Phoenix v1.6.11
• Svelte v3.49.0
• npm modules tailwindcss, postcss, autoprefixier, esbuild-style-plugin, daisyui, esbuild-svelte

This project

Someone once said there are three hard things in programming -

1. Naming
2. Off-by-one errors

Fortunately, we're more clever than that. Let's call this Phoenix app Svelte with phoenix, seriously.

Initial setup

We initialized this code repository with the following commands. If you clone this repo, you can skip these steps, but when starting from scratch, create a new Phoenix app in an empty directory (. after phx.new indicates current directory).

mix phx.new . --app swiphly --database sqlite3

note: if you are starting from scratch and getting an error with sqlite3, you might need to update your phx_new app: mix archive.install hex phx_new

Configure esbuild

This is a key step when setting up from scrach

We will be using an esbuild plugin to build Svelte and Tailwindcss components. This requires several changes to the Phoenix app generated by phx.new. Modify the Phoenix app to support esbuild plugins, bypassing the default configuration of esbuild (via the Elixir wrapper). Follow instructions here - https://hexdocs.pm/phoenix/asset_management.html#esbuild-plugins

Node modules

This application needs following node dependences to be installed. They can be installed as dev dependencies since esbuild will be bundling all of the JavaScript and CSS into static assets served by Phoenix.

It is also necessary to install the Phoenix npm packages, since we are bypassing the Elixir esbuild wrapper, as noted above.

npm install esbuild svelte tailwindcss postcss autoprefixer esbuild-svelte esbuild-style-plugin daisyui @faker-js/faker --save-dev
npm install ../deps/phoenix ../deps/phoenix_html ../deps/phoenix_live_view --save

Ecto tables

The following database tables are used by this demo

mix phx.gen.context Visitors Contact contacts name:string title:string company:string event:string
mix phx.gen.context Visitors Chat chats contact_id:integer message:string

Setup

On first clone, you'll need to setup Elixir and run migrations to create the database:

mix setup
mix ecto.migrate

Running

To run the Phoenix server with an interactive shell, use the following command:

iex -S mix phx.server

Key moving parts

Let's highlight key files that play a main role in integrating Svelte into Phoenix LiveView -

./
  /assets
    build.js # added plugins to esbuild for svelte and postcss (for tailwindcss)
    /js
      app.js # include custom hook when instantiating livesocket
      hooks.js # define custom hook for linking LiveComponent lifecycle with Svelte component
      /components # directory containing all Svelte component files
  /lib
    /swiphly_web
      router.ex # maps webpage routes to LiveView pages
      /components
        svelte_component.ex # Simple reusable LiveView component for rendering HTML div with data attributes
      /live
        *.ex # LiveView pages corresponding to webpage routes

Resources

https://hexdocs.pm/phoenix/asset_management.html#esbuild-plugins https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#attach_hook/4 https://github.com/EMH333/esbuild-svelte https://svelte.dev/tutorial/