Handling relative URIs when using htmx with a RESTful API

[x80486]

I'm currently evaluating htmx for a new web application project. However, most examples and discussions people post seem to focus on applications that integrate the API, the web server, and the application altogether, leading to relative URIs based on the origin.

While this setup might work well for certain frameworks like Ruby on Rails or Grails, I'm leaning towards a different architecture. My vision for the project involves separating the web application from the RESTful API, allowing for better tooling integration and flexibility in the long term. This approach aligns more closely with the principles of microservices and allows for independent scaling and development of each component.

One concern I have is how htmx handles URIs in this context. Specifically, without explicitly specifying the complete URI for each RESTful API resource, how can htmx infer that the base location or root is not the same as the origin? Constantly typing out the entire URI can be cumbersome and error-prone, so I'm curious if there's a more elegant solution or best practice for handling relative URIs in this scenario.

I'd greatly appreciate any insights, experiences, or suggestions on how to approach this issue with htmx. Thank you for your help!

[perttisoomann]

I am using PHP wtih CodeIgniter for my hobby evening project, so it may or may not answer your question.

I then created internal backend representation for "components", and these components handle sending correct data to views/template files. I like to keep my views very light, all the "choose what URL to use" is handled by PHP component, and view just writes string variable as value for hx-get/post attribute.

Quick and dirty example:

class MyForm
{
    ....
    function render()
    {
         $route = 'http://api.example.com';
         return view('template/file/location', ['route' => $route]);
    }
}

View:

<div hx-get="<?= $route ?>/endpoint-1">Something</div>
<div hx-get="<?= $route ?>/endpoint-2">Another div</div>