A headless CMS allows developers to manage content independently of its presentation, making it a perfect fit for modern applications. By combining MERN (MongoDB, Express.js, React, Node.js) with Strapi, an open-source headless CMS, we can create a powerful content management system that seamlessly integrates with our frontend.

In this blog, we’ll guide you through setting up a headless CMS with Strapi and consuming its API in a MERN application.

Why Use Strapi as a Headless CMS?

Strapi offers several benefits:

  • Self-hosted & Open Source – Full control over your CMS and content.
  • Customizable APIs – Easily extend APIs with plugins and custom logic.
  • GraphQL & REST Support – Fetch data efficiently.
  • Authentication & Role Management – Securely manage users and permissions.

1. Setting Up Strapi (Headless CMS)

Step 1: Install Strapi

Ensure you have Node.js installed, then create a new Strapi project:

npx create-strapi-app my-cms --quickstart

This command:

  • Sets up a Strapi server with SQLite as the default database.
  • Starts Strapi on http://localhost:1337/admin.

Step 2: Configure Content Types

Log in to the Strapi admin panel and define content types. For a blog, create a Post model with fields:

  • Title (Text)
  • Content (Rich Text)
  • Image (Media)
  • Slug (UID)

Step 3: Enable API Permissions

By default, Strapi restricts public API access. To allow public users to fetch content:

  1. Go to Settings > Roles & Permissions.
  2. Select Public role.
  3. Grant find and findOne permissions for the Post collection.
  4. Save changes.

Step 4: Test API

Strapi provides a built-in API. Test it with:

curl http://localhost:1337/api/posts

You should see a JSON response with your content.

2. Connecting MERN Frontend to Strapi

Step 1: Install Dependencies

In your React project, install Axios to fetch data:

npm install axios react-router-dom

Step 2: Fetch Data from Strapi

Create a Posts.js component:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Posts = () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:1337/api/posts')
            .then((response) => setPosts(response.data.data))
            .catch((error) => console.error(error));
    }, []);

    return (
        <div>
            <h1>Blog Posts</h1>
            {posts.map((post) => (
                <div key={post.id}>
                    <h2>{post.attributes.title}</h2>
                    <p>{post.attributes.content}</p>
                </div>
            ))}
        </div>
    );
};

export default Posts;

Step 3: Set Up Routing

Modify App.js to include routing:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Posts from './Posts';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Posts />} />
            </Routes>
        </Router>
    );
}

export default App;

3. Deploying Your Strapi & MERN App

Deploying Strapi

  • VPS: Use DigitalOcean or Linode to self-host Strapi.
  • PaaS: Deploy on Heroku or Railway (use PostgreSQL instead of SQLite).
  • Cloud Storage: Configure Cloudinary or AWS S3 for media storage.

Deploying React Frontend

  • Use Vercel or Netlify for seamless deployment.
  • Ensure API URLs match the deployed Strapi instance.

Conclusion

By integrating Strapi with a MERN stack frontend, you can build a powerful and flexible headless CMS. This setup allows easy content management while leveraging React for dynamic UI rendering.

Would you like to explore authentication or GraphQL support with Strapi? Let me know in the comments!

If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!

Disclaimer: This content has been generated by AI.

Author Of article : Nadim Chowdhury Read full article