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
   Copy Code

   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
   Copy Code
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
   Copy Code
5. Run migrations to create the default tables:

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

   composer require guzzlehttp/guzzleCopy Code
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());
   Copy Code
8. To protect the endpoints, install Laravel Sanctum:

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

   Wrap API routes with Sanctum’s authentication middleware:

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

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

   
   public function generateToken()
   {
   return $this->createToken('api-token')->plainTextToken;
   }
   Copy Code
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>
   );
   }
   Copy Code

   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.