hx-get from separate server

[LudvigAlmvaang]

Hello!

I am running two servers, one for my Front-End (port:5000) and one for my Back-End (port:5001).
Now that I have installed htmx 2.0.1 in the Front-End. I am just trying to get a short html template.

from main.js (Back-End)

app.get('/', (req, res) => {
  res.send(`<p>Hello from the server</p>`)
})

From index.html (Front-End)

<div hx-get="/:5001" hx-swap="innerHTML">Loading...</div>

First off, I was under the impression that this line of code will do it's job on page load, but instead it is waiting for me to click on the div. Second, it is not getting the template from backend server, but from the frontend server, so what happens is that the div get's loaded with all the code from index.html.

To summarize, how do I specify from which port I want to get something, and how come that the request here isn't being sent on page load, but instead waiting for me to click it?

Thank you very much for taking you time to help me 🙏

Just for anyone who wonders, the two servers are both working as intended.
I can open localhost:5000 and see my web page, or localhost:5001 and only see the line "Hello from the server".

[Telroshan]

First off, I was under the impression that this line of code will do it's job on page load, but instead it is waiting for me to click on the div.

The default trigger is indeed on click, you can use hx-trigger="load" to trigger the request on page load.

Second, it is not getting the template from backend server, but from the frontend server, so what happens is that the div get's loaded with all the code from index.html.

It seems to me that your URL is incorrect. You should probably use hx-get="localhost:5001" instead, whereas /:5001 is a relative URL that probably resolves, in your case, to localhost:5000/:5001. Note that this isn't related to htmx at all but the default behavior of relative request paths in the browser environment. Of course, replace localhost by your domain here if any