DEV Community

Nadim Chowdhury
Nadim Chowdhury

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →