Good way to set up Headless Kirby with React?

The CMS Questions
1

Hello!

I’m developing a website with a React frontend for the first time. I want to use Kirby in headless mode to manage my content, which I’ll fetch via API.

The thing is, I’m not sure if how I plan to do it is a good idea.
Is it good practice to set up Kirby like this if it’s read-only?

If there is a more convenient or just better way to do this let me know.
I just want to keep my app as simple as possible, since I’m not experienced with react … :upside_down_face:

So, I’m planning to set up Kirby like this:

<?php
# config.php 

return [
  'cors' => [
    'allowOrigin'      => 'https://UrlToMyReactFrontend.com',
     # maybe more options needed …
  ]
];



<?php Kirby::plugin('xx/custom-api', [  
   'routes' => [  
        [  
            'pattern' => 'public-api/(:all)',  
            'method'  => 'GET',  
            'action'  => function ($slug) {  
                $page = page($slug);   
                if (!$page) return Response::json(['status' => 'error', 'message' => 'Page not found'], 404);  
  

                # more code 
                # more code 
                # more code 

                # return stuff here
                return Response::json([  
                    'title'      => $page->title()->value(),  
                    
                ]);  
            }  
        ]  
    ]  
]); 

?>

my react app fetches data like this:


const API_BASE = 'https://UrlToMyKirbyBackend.com/public-api';

export async function getPage(slug) {
  const res = await fetch(`${API_BASE}/${slug}`);

  if (!res.ok) {
    throw new Error(`Kirby API error: ${res.status}`);
  }

  return res.json();
}

thank you already!

2

Might be worth having a look at the headless plugin which makes alot of this stuff easier, and handles things like CORS for you.

It allows you to return templates as JSON rather then html so you dont have to build up what you want to return in the route, or you can use KQL from your React app to get data back.

3

Hey,

thank you for your reply — I’ll definitely check this out :slightly_smiling_face:

But maybe I already have everything I need for my (very simple) React app.
The question mainly came to mind when I started thinking about tokens/authentication.

I set up the route the way I showed you, and it worked perfectly with my app.
So it almost felt a bit too good to be true, which made me wonder about potential security flaws.

I was basically just wondering whether what I did is actually considered secure / valid from a security perspective.

4

I simply return JSON using the standard template files. See my post here: Kirby + Svelte/Sapper - #4 by silvan. That way you don’t even need custom routes, simply use the existing routing Kirby provides.

5

Hey,

I did that, and it works very well :slightly_smiling_face:

I thought about using a token as a kind of passport for my Kirby database
to protect the content from direct access.

https://UrlToMyKirbyBackend.com/imprint?token=laKajd892BlaBlans2

I think this should work, but maybe there’s a more intuitive (or secure) way to achieve this.

6

Note: my data isn’t sensitive, but the more secure, the better!

7

I figured since the website is public, the API can be public too!

In order to make the templates a bit cleaner you can add the JSON encoding as a route that captures all requests:

[
  'pattern' => '(:all)',
  'action'  => function () {
    kirby()->response()->json();
    return $this->next();
  },
],
8

I’ll keep that in mind. :wink: