I am having an ongoing confusion in headless mode.

Imagine a site with 2 servers:

  • Backend (Craft with element API) on https://backend.site
  • Frontend (vue.js) on https://frontend.site

Editors pick internal links in the craft cp. In the source of redactor field, they are saved as something like {entry:xxx@1:url}.

In the Backend's endpoint, they are rendered out using the domain specified in baseUrl.

So let's say we have an endpoint on backend.site/en/api/pages/somepage.json which is consumed by the vue frontend.

In the backend's JSON output, we have an internal link that should be rendered as such:

Go to our other terrific 
<a href="https://frontend.site/en/otherpage">Other Page</a>
# Using https://frontend.site as baseURL.

So the logical consequence is to set baseUrl to https://frontend.site. Naturally, because the website's baseUrl is frontend.site – not the craft backend. But, but.

In my case, this has worked for the default language. But not for any other language – element API returned a 404 when I set the baseUrl to frontend.site

  • backend.site/en/api/pages/somepage.json ✅
  • backend.site/de/api/pages/somepage.json 🚫

When I reset baseUrl to backend.site, element API will again render all endpoints. But the links look like this:

Go to our other terrific 
<a href="https://backend.site/en/otherpage">Other Page</a>
# This link doesn't exist

What do you think?

  • A misconfiguration, a bug in element api, or a misunderstanding on my side?
  • Asked differently: which baseUrl do you have to set in headless mode?

Apparently, the answers are the following:

  • Redactor doesn't know how to output slugs/URIs instead of full URLs
  • Possibly a solution comes up with craft in the future
  • My API setup is suboptimal: In fact, I did set the baseUrl including the language: https://frontend.com/de. The recommendation is to not do that at the moment but keep one "Site" for all endpoints in all languages. This can be added as another, separate site in craft! So we'd have 3 language sites in craft and a separate site for the endpoint. The language is then part of the endpoint's data. And the endpoint's URL is https://endpoint.site/api/de/foo instead of https://backend.site/de/api/foo. Yes, I guess that makes sense! Thanks again, Oli!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.