Kirby Headless Starter and Nuxt KQL

The CMS Questions
1

After realizing several projects with Kirby and loving the CMS I would like to go a further step and explore the realm of Kirby as a headless CMS.

I tried to setup kirby-headless-starter by Johann Schopplich and his NuxtKQL plugin.

I followed the guide in the starter kit as well as the NuxtKQL (both links above).

  1. Cloned the repo
  2. ran composer install to install the CMS
  3. Setup the .env at the root of the project
  4. init a nuxt 3 project with the name /frontend
  5. init nuxtKQL module for nuxt
  6. created another .env in the /frontend folder
  7. Adjusted the nuxt.config.ts

Now I run my kirby instance with laravel valet. When i test a query using insomnia to: https://nuxt-kirby-gpt.test/api/kql i get a response as expected:

{
	"code": 200,
	"status": "OK",
	"result": {
		"children": [
			"photography",
			"notes",
			"about",
			"error",
			"home",
			"sandbox"
		],
		"drafts": [],
		"files": [],
		"title": "Mægazine",
		"url": "https:\/\/nuxt-kirby-gpt.test"
	}
}

So i guess the problem does not lay in the kirby setup.

But when i try to fetch some example data into my nuxt frontend with this snippet from the NuxtKQL guide:

<script setup lang="ts">
const { data, pending, refresh, error } = await useKql({
  query: 'site',
  select: {
    title: true,
    children: true
  }
})
</script>

<template>
  <div>
    <h1>{{ data?.result?.title }}</h1>
    <pre>{{ JSON.stringify(data?.result, undefined, 2) }}</pre>
  </div>
</template>

I get the following error:
Error: [POST] "/api/__kirby__/KEY": 503 Service Unavailable

I quadruple checked both the .env files to make sure the url and token are correct but still here they are:
.env:

KIRBY_DEBUG=true
KIRBY_PANEL_INSTALL=true
KIRBY_CACHE=false

KIRBY_HEADLESS_API_TOKEN=my_token
KIRBY_HEADLESS_FRONTEND_URL=http://localhost:3000
KIRBY_HEADLESS_ALLOW_ORIGIN=*

/frontend/.env:

KIRBY_BASE_URL=https://nuxt-kirby-gpt.test
KIRBY_API_TOKEN=my_token

I went though the whole setup three times. The same error always occured. I hope somebody might know already what could be the issue. I am happy to provide more information if needed.

2

Total shot in the dark (ive not used nuxt much or that starter kit) but maybe try this instead:

KIRBY_HEADLESS_FRONTEND_URL=https://nuxt-kirby-gpt.test

Just seems to me you should https everywhere and http://localhost:3000 wont be avialable unless you are actually running the kit, which is why i think you are getting the 503 error.

https://nuxt-kirby-gpt.test will always work even when not running the kit and developing with it. I think thats why you are succesful with insomnia.

3

The KIRBY_HEADLESS_FRONTEND_URL has to be set to the url where the frontend is served. In my case since i am using nuxt’s dev environment it’s “localhost:3000”

But I still put your suggestion in just to be sure, which did not change anything.

Also by the time I managed to make it work when I serve the backend with kirby’s native php router pointing to the public server php -S localhost:8000 -t public. I did this before but I did not realize that even though it seems that the nuxt server restarts I had to manually restart it so it would use the adjusted .env values.

But I am still wondering why it’s not working when I do everything the same but server the panel with laravel valet. Especially because now the images from the starter-kit are not found in the panel.

Maybe @jimbobrjames you are right that it has to be https for both environments.

4

But you are using Valet. The basic PHP server has its limitations. I used to use Valet and its very good but use Herd now, which is also by Laravel. It’s kind of the successor to Valet. And yes i think definatly use https everywhere. stick to one protocol all over.

I might be wrong but dont think you can make API calls without it being https anyway, without setting the insecure flag in the config file (do not do that on a live server.)

5

You are totally right. I just tested everything to make something work so I might in the end understand how I would be able to set it up as preferred.

Also php -S localhost:8000 -t public was not really working. The images/files in the panel where not to be found (probably because I forgot to mention the router.php)

cd public
php -S localhost:8000 vendor/getkirby/cms/router.php

worked for the files.
But I am just freestyling stuff here, to try what works and what not.

And I am still trying to make a https connection work.

6

So i still cannot tell with 100% assurance but when I used “Herd” for the server WITHOUT https it worked as well with the http://localhost:3000.

So i by now just assume it’s about using https / http for both either or.

I will try remerber to update here once I test this online.