Headless ProcessWire - How Do You Do It?

[Fuzen]

On 3/6/2022 at 4:25 PM, Sebi said:

I just released a new extension module AppApiPage (waits for approval), which handles the initial steps from my post above completely automatic.

I hope that this makes it even simpler to add a full-blown JSON api to new and existing pages.

This is amazing. This might finally get me started with APIs in the comfort of my favorite CMS/CMF.

[toni]

@wbmnfktr thanks for starting this topic, very interesting! After reading all replies I think I get your point.
 I mostly develop with Django (Python) where DRF gives a powerful standardized API centered around models.
Still, as you said, while working with other systems I always miss processwire for it's flexibility ;)

From what I understood other systems include a REST API out of the box (more or less) where processwire "forces you to write some lines of codes"
… and I guess that is the strength of processwire. It does not force you into a one fits all solution.  

My two cents:
For an upcoming project I tested different solutions. 
With AppApi indeed I got resonable results in not 2 but 15 minutes. With JWT included, nice! (thanks @Sebi)

For smaller needs URL hooks …
for bigger needs –without auth– PageQueryBoss …
–with auth– appAPI,
is my way to go.

But yes +1 for a core integrated solution that publishs pages based on standards .
Doing so it would even be easy to get a clear, understandable and standardized API Documentation.

 

[flydev]

On 2/21/2022 at 10:57 AM, flydev said:

If you are interested I can take the time to publish a draft of a profile which you could use as starting point, and IMO it's better and easily than other solution that I could have tested. Basically it use a modified version of InertiaAdapter made by @clsource and let you code your app inside ProcessWire's template and using pages for everything fetched dynamicaly and internally, as JSON.

 

You can see it "in action" in this example url: https://blog.sekretservices.com/

(Do not take care of the issue while refreshing the blog post due to hanna codes, it's an old version)

 

For example, from your template you build the page properties as a simple PHP array, let's say I want to fetch the title of the page:

$component = "Home/BlogPost";
$properties = [ // accessible from app components with $page.props
    'name' => $page->name,
    'title' => $page->title,
    'subtitle' => $page->subtitle,
    'content' => $page->body,
    'author' => ucFirst($page->createdUser->fullname[0])."."." ".ucFirst($page->createdUser->surname),
    'date_created' => $page->created,
    'date_relative' => $datetime->relativeTimeStr($page->created)
];

Then from a component BlogPost.`{svelte, vue, react}` (or whatever) you can simply retrieve the page's props like:

(Svelte example)

<script>
  import {inertia, page} from '@inertiajs/inertia-svelte';
  export const { title:title, body:body } = $page.props
</script>

<div class="blog-post">
  <h1 class="font-sans mt-8 text-center font-bold">{@html title}</h1>
  <div>{@html body}</div>
</div>

 

Look at this sample, at the page's tree and the routes prop from the console :

 

About the workflow, it's not really different from what you should be used to. You write your logic in template in PHP then write some HTML/JS in your component.

Also, hot module replacement (HMR) is working ?

A word about server side rendering (called SSR and which is needed to get best SEO results), it's working for React and VUE, still a WIP for Svelte ?

Get a note of ?on every lighthouse performance.

Bundled with ViteJS, powered by ProcessWire, I am glad to say that it's the best stack I have ever built and used ??

 

Edit:

A small note, but the better one. You don't have to build your app again on every change on the backend, I mean for example when you add a new page, it's work out-of-the-box, you create and page, and it's available to your JS components.

Edit2: 

To understand better, here we can achieve what you already used/saw with Laravel. Having a `src` folder with the JS things, another folder with the Laravel `app` and running artisan and some npm command.

Here, in dev mode, you run `yarn dev` and you are ready. Simple as that.