/demo_elixir_phoenix_liveview

Demo Elixir Phoenix LiveView with the Chirp Twitter-like application by Chris McCord

Primary LanguageElixir

Demo Elixir Phoenix LiveView

Demonstration of:

  • Elixir programming language
  • Phoenix web framework
  • LiveView socket module
  • Chirp Twitter-like app

This is the source code for the Elixir Phoenix LiveView tutorial by Chris McCord.

Create Phoenix app

Create a Phoenix app named "chirp":

mix phx.new chirp --live && cd chirp

Generate LiveView Timeline Post

Generate a live resource:

mix phx.gen.live Timeline Post posts username body likes_count:integer reposts_count:integer

Output:

* creating lib/chirp_web/live/post_live/show.ex
* creating lib/chirp_web/live/post_live/index.ex
* creating lib/chirp_web/live/post_live/form_component.ex
* creating lib/chirp_web/live/post_live/form_component.html.leex
* creating lib/chirp_web/live/post_live/index.html.leex
* creating lib/chirp_web/live/post_live/show.html.leex
* creating test/chirp_web/live/post_live_test.exs
* creating lib/chirp_web/live/modal_component.ex
* creating lib/chirp_web/live/live_helpers.ex
* creating lib/chirp/timeline/post.ex
* creating priv/repo/migrations/20200724010645_create_posts.exs
* creating lib/chirp/timeline.ex
* injecting lib/chirp/timeline.ex
* creating test/chirp/timeline_test.exs
* injecting test/chirp/timeline_test.exs
* injecting lib/chirp_web.ex

Add the live routes to your browser scope in lib/chirp_web/router.ex:

    live "/posts", PostLive.Index, :index
    live "/posts/new", PostLive.Index, :new
    live "/posts/:id/edit", PostLive.Index, :edit

    live "/posts/:id", PostLive.Show, :show
    live "/posts/:id/show/edit", PostLive.Show, :edit


Remember to update your repository by running migrations:

    $ mix ecto.migrate

Migrate:

mix ecto.migrate

Output:

...

18:09:15.939 [info]  == Running 20200724010645 Chirp.Repo.Migrations.CreatePosts.change/0 forward

18:09:15.942 [info]  create table posts

18:09:15.957 [info]  == Migrated 20200724010645 in 0.0s

Run server:

mix phx.server

Browse http://localhost:4000/posts

Customize Post

Edit file lib/chirp_web/live/post_live/form_component.html.leex. Add better UI, as per the video.

Edit file lib/chirp/timeline/post.ex. Add data defaults and validations, as per the video.