Using Nodify Headless CMS with Modern FrameworkS

Using Nodify Headless CMS with Modern Frameworks

Nodify is a flexible headless CMS that exposes your content through a REST API, making it easy to integrate with frontend frameworks like Angular, React, Next.js, or backend applications like Spring Boot.

This guide will walk you through:

1. How to fetch content by node code or slug
2. How to retrieve only the content you need
3. Best practices for using a reverse proxy

---

1. Fetching Content via the REST API

Nodify's REST API allows you to access content in different ways:

1.1 Fetch a Full Node by Its Code

If you know the node code, you can directly retrieve the full node, its children, and all associated content.

Example request:

GET /api/nodes/{nodeCode}

1.2 Fetch by Slug (Including All Child Nodes and Content)

If you prefer to fetch using a slug, Nodify will return: . The main node matching the slug . All child nodes . All node content for each node

Example request:

GET /api/nodes/by-slug/{slug}

GET https://cms.example.com/api/nodes/by-slug/welcome

2. Retrieving Only the Content (Without Node Metadata)

In some cases, you may only need the content itself without extra node information. Nodify supports this via the query parameter:

GET /api/nodes/{nodeCode}?payloadOnly=true

Or by slug:

GET /api/nodes/by-slug/{slug}?payloadOnly=true

This is particularly useful for lightweight frontend apps where you just want the data for rendering.

⸻

3. Integrating with Frontend Frameworks

Here are some quick integration examples.

3.1 Angular (TypeScript + HttpClient)

this.http.get<any>(
  '/cms/api/nodes/HOMEPAGE?payloadOnly=true'
).subscribe(data => {
  console.log(data);
});

3.2 React (JavaScript + Fetch API)

this.http.get<any>(
  '/cms/api/nodes/HOMEPAGE?payloadOnly=true'
).subscribe(data => {
  console.log(data);
});

3.3 Next.js (Server-Side Rendering)

useEffect(() => {
  fetch('/cms/api/nodes/by-slug/welcome?payloadOnly=true')
    .then(res => res.json())
    .then(data => console.log(data));
}, []);

3.4 Spring Boot (Java + WebClient)

WebClient client = WebClient.create("https://cms.example.com");

Mono<String> result = client.get()
    .uri("/api/nodes/HOMEPAGE?payloadOnly=true")
    .retrieve()
    .bodyToMono(String.class);

result.subscribe(System.out::println);

4. Using a Reverse Proxy (Recommended)

For security, caching, and flexibility, it’s highly recommended to call Nodify through a reverse proxy instead of directly hitting the CMS endpoint from your client apps.

Benefits: . the CMS base URL from the public . Apply authentication or rate limiting rules . Cache frequently accessed content . Transform or sanitize responses

** Nginx config:**

location /cms/ {
    proxy_pass https://cms.example.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

Then, your frontend can call:

/cms/api/nodes/HOMEPAGE?payloadOnly=true

instead of:

https://cms.example.com/api/nodes/HOMEPAGE?payloadOnly=true

5. Summary

. Use node code or slug to fetch full nodes and their content.
. Append payloadOnly=true to get content only.
. Integrate easily with Angular, React, Next.js, or Spring Boot using standard HTTP clients.
. Always route requests through a reverse proxy for security and performance.

With this approach, Nodify becomes a versatile backend for your modern applications.