Building a Headless CMS with Laravel: A Complete Guide

Discover how to build a Headless CMS with Laravel. Our Headless CMS Integration Support team is ready to assist with any queries or concerns.

Building a Headless CMS with Laravel: A Complete Guide

Headless CMS is your answer to flexible and scalable content management solutions that work seamlessly across various platforms.
It is a content management system that focuses solely on the backend. This lets us manage content without being tied to any specific frontend.

The term “headless” comes from the concept of decoupling the “body” (content repository) from the “head” (presentation layer). With this approach, content is delivered via APIs to any frontend, whether it’s a website, mobile app, IoT device, or any other platform.

Today, we will explore how to build a headless CMS with Laravel.

Why Use a Headless CMS?

• Developers can use any frontend technology they prefer like React, Vue.js, Angular, or even static site generators.
• Since content is served via APIs, performance is typically faster and more scalable.
• Manage content once and distribute it across websites, apps, and other platforms effortlessly.
• The backend is not directly exposed to the public, reducing the attack surface.

How to Integrate a Headless CMS with Laravel

If you’re a Laravel developer, integrating your application with a Headless CMS is easier than you might think. Let’s walk through the process.

1. Before we begin, select a Headless CMS that fits the project’s needs. Some popular options include Strapi, Contentful, Prismic, Sanity, Ghost.

   Each has its strengths, so we need to consider our requirements carefully before deciding.
2. After choosing a CMS, follow its documentation to set it up. For example, to install Strapi, run:

   
   
   npm install strapi@latest -g
   
   strapi new my-project
   
   

   Create the content types (e.g., posts, categories) and set up API keys or access permissions as needed.
3. Next, set up the Laravel backend:

   
   
   composer create-project --prefer-dist laravel/laravel headless-cms
   
   cd headless-cms
   
   php artisan serve
   
   
4. Then, open the `.env` file and configure the database:

   
   
   DB_CONNECTION=mysql
   
   DB_HOST=127.0.0.1
   
   DB_PORT=3306
   
   DB_DATABASE=headless_cms
   
   DB_USERNAME=root
   
   DB_PASSWORD=secret
   
   
5. Run migrations to create the default tables:

   php artisan migrate
6. To communicate with our Headless CMS from Laravel, we can use HTTP clients like Guzzle:

   composer require guzzlehttp/guzzle
7. Now, we can create routes and controllers in Laravel to interact with the CMS.

   For example, to fetch blog posts from Strapi:

   
   
   use GuzzleHttp\Client;
   
   $client = new Client();
   
   $response = $client->request('GET', 'http://your-strapi-url/api/posts');
   
   $posts = json_decode($response->getBody()->getContents());
   
   
8. To protect the endpoints, install Laravel Sanctum:

   
   
   composer require laravel/sanctum
   
   php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
   
   php artisan migrate
   
   

   Wrap API routes with Sanctum’s authentication middleware:

   
   
   Route::middleware('auth:sanctum')->group(function () {
   
   Route::apiResource('posts', PostController::class);
   
   });
   
   

   In the User model, add a method to generate tokens:

   
   
   public function generateToken()
   
   {
   
   return $this->createToken('api-token')->plainTextToken;
   
   }
   
   
9. Now it is time for Frontend integration. Since this is a headless setup, we can use any frontend framework to consume the API.

   Here’s a simple example using React:

   import React, { useEffect, useState } from 'react';
   
   function App() {
   
   const [posts, setPosts] = useState([]);
   
   useEffect(() => {
   
   fetch('http://localhost:8000/api/posts')
   
   .then(response => response.json())
   
   .then(data => setPosts(data));
   
   }, []);
   
   return (
   
   <div>
   
   <h1>Posts</h1>
   
   <ul>
   
   {posts.map(post => (
   
   <li key={post.id}>{post.title}</li>
   
   ))}
   
   </ul>
   
   </div>
   
   );
   
   }
   
   

   We can also use Vue.js, Angular, or any other technology to build the frontend.

[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

By integrating Laravel with a Headless CMS, we can distribute content seamlessly across various platforms while keeping the backend secure.

In short, our Support Engineers demonstrated how to build a Headless CMS with Laravel.