Morzaram / ash-svelte-flowbite

Phoenix Ash Flowbite Svelte TipTap Mash-Up

Introduction

A web browser application demonstrating:

• Phoenix 1.7
• Phoenix LiveView 0.18
• Ash Framework 2.6
• Ash Authentication
  • Login page with users and passwords stored in Postgres without writing any imperative code
• Phlegethon
  • Toggle dark and light themes
• Flowbite Tailwind CSS Components
  • Flowbite Date Picker on the home page
• Svelte via LiveSvelte
  • Svelte delivers many client-side UX niceties such as animations. Combining LiveView and Svelte is 10x!
  • Styles in .svelte files can reference Tailwind utility classes (see TipTap.svelte)
  • The LiveSvelte Counter page is similar to the increment/decrement example. It communicates with the backend via Websockets.
  • TipTap Editor "dead view" managed via Svelte
• Flowbite-Svelte examples on the Flowbite-Svelte Components page ("dead" view):
  • Checkbox
  • Accordion
  • Sidebar Menu with Drawer

Video

Demo (MP4)

License

MIT

Help and additional information

Join the Ash Discord Server

Requirements

Postgres

Install Postgres

nvm

• Install nvm
• Restart your terminal

Elixir

Restart your terminal after installing Elixir.

MacOS

• Install Homebrew
• Restart your terminal

You can use brew to install Elixir but asdf is preferred by the Elixir community.

Either: brew install elixir or:

brew install asdf
# I use zsh. Change the following line to >> ~/.bashrc if you use bash.
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
# Restart your terminal
# Find the current versions of erlang and elixir:
# asdf list-all erlang
# asdf list-all elixir
asdf plugin add erlang
KERL_BUILD_DOCS=yes asdf install erlang 25.3 # For VSCode's Elixir language server extension
asdf global erlang 25.3
asdf plugin add elixir
asdf install elixir 1.14.4-otp-25
asdf global elixir 1.14.4-otp-25

Usage

git clone https://github.com/dev-guy/ash-svelte-flowbite.git
cd ash-svelte-flowbite
nvm i
mix local.hex
mix setup
# Register the version of esbuild installed by npm
mix esbuild.install
mix phx.server

Open a browser to http://localhost:4000

Notes

1. package.json contains JavaScript dependencies that are installed as Hex packages. This is apparently needed for Svelte SSR.

    "live_svelte": "file:../deps/live_svelte",
    "phlegethon": "file:../deps/phlegethon",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"

2. Need another component? Add it to package.json!

3. LiveSvelte elements that use most Flowbite-Svelte components must contain ssr={false}; otherwise, runtime errors will occur

4. You will get warnings from Flowbite-Svelte that can be ignored (for now):

▲ [WARNING] A11y: The attribute 'aria-expanded' is not supported by the role 'heading'. This role is implicit on the element <h2>. [plugin esbuild-svelte]

    node_modules/flowbite-svelte/accordions/AccordionItem.svelte:43:4:
      43 │ 41: </script>
         ╵     ~~~~~~~~~

42:
43: <h2 aria-expanded={open} class="group">
        ^

5. Beware Svelte-Kit $app dependencies!

References

Guides

1. Install Phoenix
2. Install Ash Authentication
3. Install Phlegethon
4. Install LiveSvelte
5. Install Flowbite
6. Install Flowbite-Svelte

Other

• Phoenix and Third-Party JS Packages
• ElixirConf 2022 - Ryan Cooke - E2E Reactivity - using Svelte with Phoenix LiveView
• LiveSvelte video
• Getting Started: Phoenix 1.7 with Svelte
• Svelte, Tailwind, and Sass

TODO

1. Upgrade flowbite-svelte - see #647
2. Sync styles between Svelte and Phlegethon components - see here