phoenix-ash-2023-05-26.mp4
This is a web browser application demonstrating:
- Phoenix 1.7
- pnpm Replaces npm because it's faster
- esbuild 0.19
- TailwindCSS 3.3
- Phoenix LiveView 0.18
- Ash Framework 2.9
- Pyro
- Toggle dark and light themes using Pyro
- Custom Pyro overrides to match Svelte Skeleton (partially implemented)
- Flowbite 1.8 Tailwind CSS Components
- Application Shell with header and responsive left sidebar
- Date Picker on the home page
- Menu
- Tooltips
- Svelte 4 via LiveSvelte 0.11
- Support Sass/Scss/PostCSS
- CRDT counter with Yjs
- LiveSvelte Counter is similar to the increment/decrement example. It communicates with the backend via Websockets. Uses the convenient ~V sigil.
- Mermaid diagram editor in a .svelte file (dead view)
- TipTap 2.1 (dead view) with task list plugin
- Milkdown 7.2 (dead view) with Markdown, Mermaid, and collaboration via Yjs
- Kanban board (dead view)
- Svelte Skeleton 2
- Replace Cowboy with Bandit 1.0
Join the Ash Discord Server and check out the Pyro channel.
- Install nvm
- Restart your terminal
Restart your terminal after installing Elixir.
- Install Homebrew
- Restart your terminal
brew install elixir
This might work better with VSCode language servers for Elixir. Or it might not work at all.
This currently fails to build erlang-ssl-fun
.
brew install autoconf wxwidgets libxslt fop [email protected] 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
asdf plugin add erlang https://github.com/asdf-vm/asdf-erlang.git
# To install more docs, add the following at the beginning:
# KERL_INSTALL_MANPAGES=yes KERL_INSTALL_HTMLDOCS=yes
KERL_CONFIGURE_OPTIONS="--disable-debug --without-javac --with-ssl=$(brew --prefix [email protected])" KERL_BUILD_DOCS=yes asdf install erlang 26.0.1
asdf global erlang 26.0.1
asdf plugin add elixir
asdf install elixir 1.15.0
asdf global elixir 1.15.0
See https://www.rust-lang.org/tools/install
"tailwindCSS.experimental.configFile": "./assets/tailwind.config.js"
git clone https://github.com/dev-guy/phoenix-ash-svelte-flowbite.git
cd phoenix-ash-svelte-flowbite
nvm install
npm install -g @pnpm/exe
mix local.hex
mix local.rebar
mix tailwind.install
mix setup
# Register the version of esbuild installed by pnpm
mix esbuild.install
mix phx.server
Open a browser to http://localhost:4000
- Svelte Skeleton
- Svelte Skeleton implements styles and themes that can also be used with Phoenix comonents
- The theme is specified in
assets/tailwind.config.js
. It is also specified inroot.html.heex
viadata-theme=
- Skeleton's surface, primary, secondary, tertiary, success, warning, and error colors were incorporated with Pyro's components for a consistent look across Pyro and Skeleton components
- LiveSvelte
- Svelte delivers many client-side UX niceties such as animations. Combining LiveView and Svelte is 10x!
- LiveSvelte video
- Need another Svelte or JavaScript component? Just add it to package.json!
.svelte
files are located in assets/svelte<style>
elements that need Postcss etc. should uselang="scss"
instead oftype="text/scss"
- SSR has been disabled temporarily because there are too many crashes
- LiveSvelte elements that use most Svelte Skeleton components must specify ssr={false}
- Using @apply in
<style>
blocks in Svelte files is a bad idea - Beware Svelte-Kit $app dependencies!
- Until editors understand that ~V is for Svelte, using .svelte files will have a better DX. Plus ~V doesn't work with dead views.
- package.json contains JavaScript dependencies that are installed as Hex packages. This is apparently needed for SSR.
"live_svelte": "file:../deps/live_svelte",
"pyro": "file:../deps/pyro",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view"
- Install Phoenix
- Install Ash Authentication
- Install Pyro
- Install Flowbite for Phoenix
- Install LiveSvelte
- Install Svelte Skeleton
- Skeleton 2 migration guide
- Include PurgeCSS
- Read about Flowbite and Skeleton
- esbuild: modify config.exs
- tailwindcss: modify config.exs
- node (see .nvmrc): build.js (see target:)
- Why all JS dependencies are devDependencies
- Phoenix and Third-Party JS Packages
- ElixirConf 2022 - Ryan Cooke - E2E Reactivity - using Svelte with Phoenix LiveView
- Getting Started: Phoenix 1.7 with Svelte
Tabbed collaboration works out of the box. Cross-browser collaboration requires running a WebRTC server:
nvm i
cd assets
PORT=4444 npx y-webrtc server.js
- Sync styles between Svelte and Pyro components - details