Phovelte

This project is to demonstrate how to setup Phoenix project with liveview, typescript, svelte and tailwind.

Features

Phoenix LiveView

Foundation of this project

Typescript

Support typescript out of box include svelte build with webpack

Svelte

Simple and easy frontend library to build a UI component. `svelte-component` hook can be good starting point to your favorite frontend library such as react or vue.js.

Tailwind

A utility-first CSS framework to build UI simple and easy

Quick start

1. Make sure that you have elixir v1.11.2 (never tested lower version but probably okay), node v12 and its compatible npm or yarn.
2. Clone this repo using $ git clone --depth=1 https://github.com/colus001/phoenix-liveview-svelte-tailwind.git <YOUR_PROJECT_NAME>
3. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
4. Run mix deps.get in order to install elixir dependencies.
5. Run cd assets && yarn in order to install javascript dependencies. At this point you can run mix phx.server to see example app at http://localhost:4000

Learn more

• Phoenix Liveview: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html
• Typescript: https://www.typescriptlang.org
• Svelte: https://svelte.dev
• Tailwind CSS: https://tailwindcss.com
• Official phoenix website: https://www.phoenixframework.org/
• Guides: https://hexdocs.pm/phoenix/overview.html
• Docs: https://hexdocs.pm/phoenix
• Forum: https://elixirforum.com/c/phoenix-forum
• Source: https://github.com/phoenixframework/phoenix