# Programming Phoenix LiveView: P27, live\_path confusion

**URL:** <https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882>\
**Category:** PragProg Customers\
**Tags:** book-programming-phoenix-liveview, question\
**Created:** [14 March 2021 21:59 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882 "2021-03-14T21:59:59Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![cro](https://forum.devtalk.com/user_avatar/forum.devtalk.com/cro/32/2547_2.png) [@cro](https://forum.devtalk.com/u/cro)\
**Post date:** [14 March 2021 21:59 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/1 "2021-03-14T21:59:59Z")

</div>

I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into the `live_patch` function to patch the view and add the button. Many examples involving `live_patch` I found on the web suggested something like

```auto
<%= live_patch to: Routes.live_path(@socket, __MODULE__ ), replace: true do %>
   <button>Try again!</button>
<%end>

```

but Elixir complains with

```auto
warning: Routes.live_path/2 is undefined (module Routes is not available or is yet to be defined)
  lib/pento_web/live/wrong_live.ex:50: PentoWeb.WrongLive.render/1

```

`mix phx.routes` says the helper is defined:

```auto
$ mix phx.routes
          page_path GET / Phoenix.LiveView.Plug :index
          live_path GET /guess Phoenix.LiveView.Plug PentoWeb.WrongLive
live_dashboard_path GET /dashboard Phoenix.LiveView.Plug :home
live_dashboard_path GET /dashboard/:page Phoenix.LiveView.Plug :page
live_dashboard_path GET /dashboard/:node/:page Phoenix.LiveView.Plug :page
          websocket WS /live/websocket Phoenix.LiveView.Socket
           longpoll GET /live/longpoll Phoenix.LiveView.Socket
           longpoll POST /live/longpoll Phoenix.LiveView.Socket
          websocket WS /socket/websocket PentoWeb.UserSocket

```

So I must be missing a `use` or `alias` somewhere? Help?

---

<div class="post-metadata">

**Author:** ![SophieDeBenedetto](https://forum.devtalk.com/user_avatar/forum.devtalk.com/sophiedebenedetto/32/2521_2.png) [@SophieDeBenedetto](https://forum.devtalk.com/u/SophieDeBenedetto)\
**Post date:** [15 March 2021 12:28 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/3 "2021-03-15T12:28:57Z")

</div>

Hey @cro! What you have here looks 100% right to me (except you are missing the `%` before the closing tag in the `<% end>`, but that would be throwing a different error entirely). Where is it that you are adding this code snippet in your code? Also feel free to push up your code to a repo and share it with me if you’d like. I’d be happy to take a closer look!

---

<div class="post-metadata">

**Author:** ![SophieDeBenedetto](https://forum.devtalk.com/user_avatar/forum.devtalk.com/sophiedebenedetto/32/2521_2.png) [@SophieDeBenedetto](https://forum.devtalk.com/u/SophieDeBenedetto)\
**Post date:** [15 March 2021 15:00 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/4 "2021-03-15T15:00:37Z")

</div>

Re-posting here for visibility bc I accidentally replied privately:

Mystery solved!

At the top of your `PentoWeb.WrongLive` module, you should pull in the LiveView behavior like this:

```elixir
defmodule PentoWeb.WrongLive do
  use PentoWeb, :live_view

```

I _think_ there was someplace in the book where we gave you an outdated instruction to do so like this instead:

```elixir
defmodule PentoWeb.WrongLive do
  use Phoenix.LiveView

```

That has since been corrected but I’m not sure if the fix is out in the Beta release from last week or if it will be included in the next one. In either case, that is the change you need to make and I’m sorry for any confusion this caused!

Let me know if this un-sticks you or if you encounter any other errors 🙂  
And @cro confirmed this fixed the issue!

---

<div class="post-metadata">

**Author:** ![IwateKyle](https://forum.devtalk.com/user_avatar/forum.devtalk.com/iwatekyle/32/2920_2.png) [@IwateKyle](https://forum.devtalk.com/u/IwateKyle)\
**Post date:** [8 June 2021 01:50 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/5 "2021-06-08T01:50:08Z")

</div>

Thank you, thank you thank you for bringing this up. I love elixir and all the people pushing the technology forward. It’s one of the greatest technologies since sliced bread… but I felt really stranded with this - Throw me off the side of the cliff and see if I can find my parachute.

I was excitedly looking forward to completing the exercise - so I hurriedly clicked the link to learn about this “live\_patch” business. And boy - did I find that I had NO idea how to use what it was talking about. The LiveView help was not helpful for people learning LiveView - but only for those that already know LiveView and need a reminder.

I was disappointed “Sophie or Bruce” that you sent me to the den of Lions. You could have at least ended the link with a “Buwahahaha Buhahaha” as a warning that I was going to run into a steel wall at 100 miles an hour.

Then I search the internet - looking for an example. Because I _knew_ that Bruce-or-Sophie was going to say - well, did you Google it (Google is everyone’s escape hatch) - I didn’t want to be on the wrong side - so I _made sure_ that I went to as many places that Google sent me.

NOTHING - there were a few places with lip-service on the topic of live\_patch.

I finally come across a discussion where José Valim gives a little bit better explanation of what live\_patch does in comparison to it’s sibling alternative functions such as live\_redirect, live\_push etc.

But, still - NO examples of how a button or even a simple link plays a role in restarting a simple “You’re wrong” game.

Frustrated ?? - well … not overly - I still have sympathy for people that make hard things.

So, after going thru all those links starting from the book - I still don’t even know “What” get’s patched with “what.”

The instructions said - make a button to restart the game. We have barely even displayed our first screen - and now I’m asked to chase down ghost instructions.

C’mon Sophie and Bruce - Show some love. 🙂

What’s the answer?

Yours Truly  
Grumpy ol’ man

P.S.

“Shame on me.” I thought. I had surely forgotten to look at the source code that came with the book. I didn’t think of this until I wrote my long manifesto above.

I downloaded the code - opened the whole glob in Visual Studio - and searched the whole thing for “live\_patch”

There were several hits. However, - none related directly to the resetting the game. I peeked at the other implementations - of course they didn’t make sense to me because I don’t have enough context to which they apply.

So, I would like to make a recommendation to the authors.

I know it’s hard writing a book and a good one. But, it would be _extremely_ helpful to the learner - if you would put the solutions in your code.

OR

at least state - “We are going to cover this topic thoroughly in a later chapter. We promise not to leave you hanging.”

Ok, back to irritating my wife with the “The Little Elixir & OTP Guidebook” **audio** book.

---

<div class="post-metadata">

**Author:** ![SophieDeBenedetto](https://forum.devtalk.com/user_avatar/forum.devtalk.com/sophiedebenedetto/32/2521_2.png) [@SophieDeBenedetto](https://forum.devtalk.com/u/SophieDeBenedetto)\
**Post date:** [10 June 2021 14:59 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/6 "2021-06-10T14:59:20Z")

</div>

Hi @IwateKyle, I’m sorry to hear that you found this particular exercise so challenging. Rest assured that `live_patch` is covered in greater detailed later on in the book and we will update the text to let readers know.

In the meantime, here is some guidance on the solution:

- Per the docs [here](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html#live_patch/2) (and as shown in the original question on this thread above), you can write the `live_patch` function call in the markup in the `render` function of `WrongLive` like this:

```auto
<%= live_patch to: Routes.live_path(@socket, __MODULE__ ), replace: true do %>
      <button>Try again!</button>
<%end%>

```

This adds a button that is wrapped in a special kind of link called a “live patch”. A “live patch” link basically re-directs to the current live view without reloading it. From the docs, if you call `live_patch` with the route to the current live view…

> …the new state is pushed to the client, without reloading the whole page while also maintaining the current scroll position

The value of the `:to` key in the argument to `live_patch` can be any route. To specify the route of the current live view, you use: `Routes.live_path(@socket, __MODULE__ )` or you could use `Routes.live_path(@socket, PentoWeb.WrongLive)`, which evaluates to the same thing. The third example in the docs here is accurate [https://hexdocs.pm/phoenix\_live\_view/Phoenix.LiveView.Helpers.html#live\_patch/2-examples](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html#live_patch/2-examples).

To fully get this working, you need to add this `live_patch` link I described above, _and_ you need to implement a new function in your live view, a `handle_params/3` function. From the docs:

> When navigating to the current LiveView, [`Phoenix.LiveView.handle_params/3`](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_params/3) is immediately invoked to handle the change of params and URL state.

If you follow the link to the `handle_params/3` docs, you will see that it takes in three arguments: some params, the URI and the socket, and it needs to return `{:noreply, socket}`. If we are aiming to “reset” the game, then we should return a socket with the appropriate starting state. So something like this:

```elixir
def handle_params(_params, _uri, socket) do
    {
      :noreply,
      assign(
        socket,
        score: 0,
        message: "Guess a number."
      )
    }
  end

```

That should do it! I hope this helps and thanks very much for your feedback.

---

<div class="post-metadata">

**Author:** ![IwateKyle](https://forum.devtalk.com/user_avatar/forum.devtalk.com/iwatekyle/32/2920_2.png) [@IwateKyle](https://forum.devtalk.com/u/IwateKyle)\
**Post date:** [11 June 2021 08:57 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/7 "2021-06-11T08:57:02Z")

</div>

Bless you Sophie. You are a super star! I appreciate your time. I’ve since moved ahead, but I’ll definitely add this to exercise. 🙂

---

<div class="post-metadata">

**Author:** ![jaeyson](https://forum.devtalk.com/user_avatar/forum.devtalk.com/jaeyson/32/6395_2.png) [@jaeyson](https://forum.devtalk.com/u/jaeyson)\
**Post date:** [6 March 2022 09:26 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/8 "2022-03-06T09:26:21Z")

</div>

~~Hi @SophieDeBenedetto my `Routes.live_path/2` is still undefined (book version: B6)~~

- ~~`:phoenix, "~> 1.6.6"`~~
- ~~`:phoenix_live_view, "~> 0.17.5"`~~
- ~~`mix phx.routes` is showing `live_path GET /guess Phoenix.LiveView.Plug PentoWeb.WrongLive`~~

~~here’s what I did~~

---

<div class="post-metadata">

**Author:** ![jaeyson](https://forum.devtalk.com/user_avatar/forum.devtalk.com/jaeyson/32/6395_2.png) [@jaeyson](https://forum.devtalk.com/u/jaeyson)\
**Post date:** [6 March 2022 10:51 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/9 "2022-03-06T10:51:26Z")

</div>

Ah silly me 🤦, this is what solves my problem:

> [@SophieDeBenedetto](#):
>
> I _think_ there was someplace in the book where we gave you an outdated instruction to do so like this instead:
> 
> ```auto
> defmodule PentoWeb.WrongLive do
> use Phoenix.LiveView
> 
> ```

---

<div class="post-metadata">

**Author:** ![IdiosApps](https://forum.devtalk.com/user_avatar/forum.devtalk.com/idiosapps/32/4371_2.png) [@IdiosApps](https://forum.devtalk.com/u/IdiosApps)\
**Post date:** [24 July 2022 13:22 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/10 "2022-07-24T13:22:24Z")

</div>

For page 20 (WrongLive example, numbers 1-10 game) I was getting a similar error. The Elixir VS code plugin generated:

```auto
defmodule PentoWeb.Live.WrongLive do
  use Phoenix.LiveView, layout: {PentoWeb.LayoutView, "live.html"}

```

but, as the book says, this is correct:

```auto
defmodule PentoWeb.WrongLive do
  use Phoenix.LiveView, layout: {PentoWeb.LayoutView, "live.html"}

```

I hope I don’t have to fight with autocomplete too often 😅

---

<div class="post-metadata">

**Author:** ![m4hi2](https://forum.devtalk.com/user_avatar/forum.devtalk.com/m4hi2/32/2997_2.png) [@m4hi2](https://forum.devtalk.com/u/m4hi2)\
**Post date:** [5 May 2023 20:47 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/12 "2023-05-05T20:47:16Z")

</div>

Hello,  
I think I’m using the LiveView behaviour properly, still getting the same error. Here is my [code](https://github.com/m4hi2/pento/pull/1/files#diff-1b614bab14ee110326c02304bcfbe2e606c24cff81eaaa328db345e727df936fR47).

---

<div class="post-metadata">

**Author:** ![theAntimon](https://forum.devtalk.com/letter_avatar_proxy/v4/letter/t/74df32/32.png) [@theAntimon](https://forum.devtalk.com/u/theAntimon)\
**Post date:** [6 August 2023 23:53 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/13 "2023-08-06T23:53:14Z")

</div>

also still having this problem. no matter what do, can not find the live\_path/2 function.

using phoenix 1.7.7 and liveView 0.19.0

---

<div class="post-metadata">

**Author:** ![theAntimon](https://forum.devtalk.com/letter_avatar_proxy/v4/letter/t/74df32/32.png) [@theAntimon](https://forum.devtalk.com/u/theAntimon)\
**Post date:** [6 August 2023 23:53 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/14 "2023-08-06T23:53:16Z")

</div>

ok, finally made it.

who ever ends up here as desperate as I was: If you use a current version of phoenix… forget about all that strange alias settings you can find at [stack-overflow](https://stackoverflow.com/questions/61596578/undefined-function-static-path-2-in-script-tag) and you also don’t need to do that strange black magic they did at the [elixirforum](https://elixirforum.com/t/myappweb-router-helpers-live-path-2-is-undefined-or-private/29263).

No. It’s actually much easier. It is all about that new functions which come along with that HEEx and ~H stuff. Just use the [link/1 function](https://hexdocs.pm/phoenix_live_view/0.19.0/Phoenix.Component.html#link/1). . I did it like this:

`<.link patch={~p"/guess"}>new game</.link>`

and that’s it. Good luck!

---

<div class="post-metadata">

**Author:** ![SophieDeBenedetto](https://forum.devtalk.com/user_avatar/forum.devtalk.com/sophiedebenedetto/32/2521_2.png) [@SophieDeBenedetto](https://forum.devtalk.com/u/SophieDeBenedetto)\
**Post date:** [7 August 2023 18:37 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/15 "2023-08-07T18:37:31Z")

</div>

Hello and thank you all for your patience! A lot has changed in LiveView lately and Bruce and I are hard at work on a new version of the book with the latest version and all new code samples. Keep an eye out for that in the next few weeks.

In the meantime, yes the live path helpers have been replaced with the link/1 function component [Phoenix.Component — Phoenix LiveView v0.19.5](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#link/1).

I believe the latest version of the book that is currently out does reflect this change though. Please do make sure you’re working off of the latest version. If you’ve purchased the e-book, you’ll be emailed when a new Beta release is made available for download and you’ll have access to download it for free.

---

<div class="post-metadata">

**Author:** ![theAntimon](https://forum.devtalk.com/letter_avatar_proxy/v4/letter/t/74df32/32.png) [@theAntimon](https://forum.devtalk.com/u/theAntimon)\
**Post date:** [9 August 2023 12:09 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/16 "2023-08-09T12:09:04Z")

</div>

Hi Sophie, thanks for answering. You are completly right. I’m deeply sorry, I was on a older version of the book. Will carefully read it now again 🙂

---

<div class="post-metadata">

**Author:** ![SophieDeBenedetto](https://forum.devtalk.com/user_avatar/forum.devtalk.com/sophiedebenedetto/32/2521_2.png) [@SophieDeBenedetto](https://forum.devtalk.com/u/SophieDeBenedetto)\
**Post date:** [9 August 2023 13:36 UTC](https://forum.devtalk.com/t/programming-phoenix-liveview-p27-live-path-confusion/7882/17 "2023-08-09T13:36:28Z")

</div>

No problem at all!