LiveView How can I render dynamically static page accoring to URL PATH

[Amu]

Hi. I am developing single page blog website, using LiveView.

I want to render html template according to URL path .

For example

blog directory has many html files as “blog posts” like as below

blog/post-1.html.heex

blog/post-2.html.heex
.
.
.
blog/post-100.html.heex

If I access http://localhost:4000/blog/post-1

I want to get post-1.html as LiveView.

Perhaps I need to set route, but I am not sure.

live “/blog/:post”, BlogLive.Index, :index

And I need to use ‘embed_templates’ perhaps.

[ollien]

Before I answer your question: I just want to ask if using a LiveView and a functional component is the most appropriate tool for this? You would be better served with these files being rendered to disk as plain HTML (or some other templating language, like Mustache), and serving those files directly (or applying your templating function of choice). See this post for some more details: How can one render a Liveview .heex file dynamically? - #2 by benwilson512

However, if you truly understand what you are doing (or just want to learn ), you can do what you want using Kernel.apply/3. Again, I would not suggest this; you’re effectively allowing a requester to select a function for them to execute. Further, HEEx templates are arbitrarily powerful, and a setup like this could be used for arbitrary code execution on your server, given the right circumstances.

To set this up in the safest way possible (again, I would not consider this really that safe), I split out the components into a separate PageHTML module. Here’s the associated directory structure.

.
├── page.ex
├── page_html
│   ├── page-1.heex
│   └── page-2.heex
└── page_html.ex

PageHTML is quite simple in that it just uses embed_templates, as you suggest

defmodule PhxtestWeb.PageHTML do
  use PhxtestWeb, :html

  embed_templates "page_html/*"
end

I defined a route for the live view as

live "/:page", PageLiveView

…which renders the following live view

defmodule PhxtestWeb.PageLiveView do
  alias PhxtestWeb.PageHTML
  use PhxtestWeb, :live_view

  def render(assigns) do
    with {:ok, template_atom} <- atom_for_page(assigns.page),
         {:ok, rendered} <- try_component_render(template_atom, assigns) do
           rendered
    else
     {:error, :notfound} -> ~H"""
     <span>Not found.</span>
     """
    end
  end

  def mount(%{"page" => page}, _session, socket) do
    {:ok, assign(socket, :page, page)}
  end

  defp atom_for_page(page) do
    try do
      # By using String.to_existing_atom, we ensure that we are not leaking atoms
      # with arbitrary input from a user
      {:ok, String.to_existing_atom(page)}
    rescue
      # String.to_existing_atom throws an ArgumentError if the atom is not defined
      # The atom will be defined at function-definition time for the template 
      # (`embed_templates` effectively just generates a function definition for you, AFAIK)
      ArgumentError -> {:error, :notfound}
    end
  end

  defp try_component_render(component_name, assigns) do
    try do
      rendered = apply(PageHTML, component_name, [assigns])

      {:ok, rendered}
    rescue
       # apply throws an ArgumentError if the function is not found... 
       # this would technically also happen if the component threw an 
       # ArgumentError, but this isn't production quality code to begin with :)
      ArgumentError -> {:error, :notfound}
    end
  end
end

Now, when someone navigates to /page-1, the page-1 template will be rendered

and when visiting a template that doesn’t exist, they will get “Not found”

Hope this helps! Now, don’t do this

[Amu]

Thank you very much ollien !!
I understand you do not recommend using LiveView for this purpose.
Again, Could you tell me how to render static HTML file accoring to URL PATH without using LiveView.

[ollien]

You can either serve it as a static file directly (perhaps my suggested approach if just using plain .html files). This page, though not a direct tutorial, should get you started. Asset Management — Phoenix v1.7.11

You can also use an approach like this to render a string as your controller response, which would be particularly useful if you are using templates plug - Serving static html (and others) from / in Phoenix Framework - Stack Overflow

[Amu]

you help me a lot !