Building a Headless CMS with MERN and Strapi

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!

Support My Work ❤️

If you enjoy my content and find it valuable, consider supporting me by buying me a coffee. Your support helps me continue creating and sharing useful resources. Thank you!

Connect with Me 🌍

Let’s stay connected! You can follow me or reach out on these platforms:

🔹 YouTube – Tutorials, insights & tech content

🔹 LinkedIn – Professional updates & networking

🔹 GitHub – My open-source projects & contributions

🔹 Instagram – Behind-the-scenes & personal updates

🔹 X (formerly Twitter) – Quick thoughts & tech discussions

I’d love to hear from you—whether it’s feedback, collaboration ideas, or just a friendly hello!

Disclaimer

This content has been generated with the assistance of AI. While I strive for accuracy and quality, please verify critical information independently.