Stackbit

What Is Stackbit?

Stackbit is a visual editing platform that works seamlessly with headless CMS systems like Strapi. By integrating Stackbit with Strapi, you create a powerful bridge between your developers and content creators, providing marketers with an intuitive "edit on the glass" experience while developers maintain their freedom to code as they prefer.

What makes Stackbit particularly valuable is how it integrates with your existing code through a simple config file. There's no need for additional dependencies. Your developers can keep using their preferred tech stack, and Stackbit remains separate from your website's production delivery, ensuring everything stays fast and reliable.

Why Integrate Stackbit with Strapi

Integrating Stackbit with Strapi creates a powerful composable Digital Experience Platform (DXP), blending developer flexibility with content creator usability. Strapi provides a robust backend system, while Stackbit offers an intuitive visual interface for streamlined content editing. This integration illustrates how a headless CMS and DXP can work together effectively.

Strapi’s flexibility and backend features make it an excellent choice for a headless CMS. This integration model can be extended to other systems, like integrating Saleor with Strapi, to build comprehensive eCommerce solutions.

This integration brings significant strategic advantages. Developers maintain full control over the backend architecture, data structures, and APIs, ensuring precision in coding. Simultaneously, marketers and content creators can quickly create, edit, preview, and publish content using Stackbit's visual tools.

The synergy between Strapi’s headless CMS and Stackbit’s visual editing tools bridges the gap between technical implementation and content management, streamlining workflows for both developers and content creators.

Integrating Stackbit with Strapi has specific advantages for development teams:

• Single file integration: Add Stackbit to Strapi with just one configuration file.
• No extra dependencies: Works without adding extra code packages.
• Preferred stack compatibility: Continue using your preferred development tools.
• Production independence: Stackbit stays separate from production, ensuring optimal CDN performance.

This integration also benefits content creators:

• Visual page assembly: Build and modify pages visually without requesting developer assistance, utilizing tools such as Strapi Dynamic Zone.
• Independent design control: Make design changes without developer help.
• Faster content creation: The visual interface accelerates content creation and publishing, especially with visual editing for Strapi.

By combining Strapi and Stackbit, teams can enjoy a more efficient, agile content management system that allows for independent work and faster response to market demands.

How to Integrate Stackbit with Strapi

Integrating Stackbit with Strapi creates a powerful combination that balances developer flexibility with content creator usability. In this guide, we'll cover the process of integrating Stackbit with Strapi, from initial setup to testing and validation.

Prerequisites and System Requirements

Before you begin, ensure your system meets the following requirements:

• Operating System: Ubuntu 18.04+ (LTS), Debian 9.x+, CentOS/RHEL 8+, macOS Mojave+, or Windows 10
• Node.js: LTS versions (v12 or v14)
• NPM: v6 or the version bundled with LTS Node
• Hardware: Minimum 1 core CPU (2 cores recommended), 2GB RAM (4GB recommended), and 32GB free storage
• Standard build tools for your operating system

Setting Up Strapi

1. To start a new Strapi project, use the following command for the recommended local installation:

npx create-strapi@latest

2. Create a new Strapi project:

strapi new my-project

3. Navigate to your project directory and start Strapi:

cd my-project
yarn develop

cd my-project
npm run develop

4. Access the Strapi admin panel at http://localhost:1337/admin and create your first admin account.

5. Set up your content types using the Strapi Content Types Builder in the Strapi admin panel. For a deeper understanding of content modeling in Strapi, you can consult this guide.

To manage your configurations efficiently across environments, consider using the Strapi Config Sync Plugin.

Connecting Strapi with Stackbit

Let's walk through how to integrate Stackbit with Strapi:

1. Create a Stackbit configuration file in your code repository that defines how Stackbit communicates with your Strapi content.
2. Set up authentication:
   • Create API tokens in Strapi (Settings → API Tokens).
   • Configure these tokens in your Stackbit configuration.
   • Set appropriate permissions for content types that will be edited via Stackbit.
3. Map your components to Strapi content types in the Stackbit configuration to enable visual editing.

Understanding the differences between traditional vs. headless CMS options will help you appreciate the flexibility offered by this integration.

Local Development and Testing

To set up a local development environment:

1. Import your repository to Stackbit.
2. Use Stackbit's development container for your project.
3. Start local development with:

stackbit dev

This allows you to see how your Strapi content appears in the Stackbit visual editor while developing.

Production Deployment

When you're ready to deploy:

1. Deploy your Strapi instance to your chosen hosting platform.
2. Deploy your front-end application.
3. Configure Stackbit settings to point to the production Strapi API.
4. Ensure proper environment variables for API connections.

For continuous integration:

• Set up GitHub workflows or other CI pipelines.
• Configure deployment to trigger content or code changes.
• Securely manage API tokens in your CI/CD environment.

\

Project Example (+ GitHub Project Repo)

When you integrate Stackbit with Strapi, it's helpful to see a real-world implementation. Let's explore a practical example that demonstrates how these platforms work together to create a powerful web development ecosystem.

Implementation Highlights

Our example project showcases a marketing website for a SaaS company. The backend is built with Strapi, handling product information, pricing details, and blog content. Stackbit provides the visual editing layer, allowing marketers to create and modify landing pages without developer intervention.

Key implementation details include:

1. Content Model Structure: In Strapi, we've defined content types for products, pricing plans, blog posts, and reusable components like hero sections and feature blocks.
2. Component Setup: We've created a set of flexible components in our front-end framework, each mapped to corresponding Strapi content types. This mapping is defined in the Stackbit configuration file, enabling visual editing of specific components directly through Stackbit.
3. API Configuration: We've set up custom API endpoints in Strapi to deliver optimized content payloads for different page types. These endpoints are consumed by our front-end application and integrated with Stackbit for seamless content updates.
4. Authentication: We've implemented secure authentication between Stackbit and Strapi using API tokens, ensuring that only authorized users can make content changes.

Example Code

Here's how the integration looks in the code. First, let's examine the Stackbit configuration file (stackbit.config.js) that connects our Next.js front-end with Strapi:

// stackbit.config.js
module.exports = {
  stackbitVersion: '~0.6.0',
  ssgName: 'nextjs',
  cmsName: 'strapi',
  nodeVersion: '16',
  
  // Strapi-specific configuration
  strapiConfig: {
    baseUrl: process.env.STRAPI_API_URL || 'http://localhost:1337',
    accessToken: process.env.STRAPI_API_TOKEN,
  },
  
  // Content model definitions
  models: {
    page: {
      type: 'page',
      urlPath: '/{slug}',
      modelName: 'page',
      strapiCollection: 'pages',
      fields: [
        { name: 'title', type: 'string', required: true },
        { name: 'slug', type: 'string', required: true },
        { 
          name: 'sections', 
          type: 'list', 
          items: { type: 'model', models: ['hero', 'features', 'pricing'] }
        },
        { name: 'seo', type: 'model', models: ['seo'] }
      ]
    },
    hero: {
      type: 'object',
      label: 'Hero Section',
      strapiComponent: 'sections.hero',
      fields: [
        { name: 'heading', type: 'string' },
        { name: 'subheading', type: 'string' },
        { name: 'image', type: 'image' },
        { 
          name: 'buttons', 
          type: 'list', 
          items: { type: 'model', models: ['button'] } 
        }
      ]
    },
    // More model definitions...
  }
};

Next, here's an example of a Strapi content type definition (api/page/content-types/page/schema.json):

{
  "kind": "collectionType",
  "collectionName": "pages",
  "info": {
    "singularName": "page",
    "pluralName": "pages",
    "displayName": "Page",
    "description": "Create and manage dynamic pages"
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {},
  "attributes": {
    "title": {
      "type": "string",
      "required": true
    },
    "slug": {
      "type": "uid",
      "targetField": "title",
      "required": true
    },
    "sections": {
      "type": "dynamiczone",
      "components": [
        "sections.hero",
        "sections.features",
        "sections.pricing"
      ]
    },
    "seo": {
      "type": "component",
      "component": "shared.seo"
    }
  }
}

Here's a React component for rendering a Hero section from Strapi data, with Stackbit annotations for visual editing:

// components/sections/Hero.jsx
import React from 'react';
import { sbEditable } from '@stackbit/annotations';

const Hero = ({ section }) => {
  if (!section) return null;
  
  const { heading, subheading, image, buttons } = section;
  
  return (
    <section {...sbEditable(section)} className="hero-section">
      <div className="container">
        <div className="hero-content">
          <h1 className="hero-heading">{heading}</h1>
          <p className="hero-subheading">{subheading}</p>
          
          {buttons && buttons.length > 0 && (
            <div className="hero-buttons">
              {buttons.map((button, index) => (
                <a 
                  key={index}
                  href={button.url}
                  className={`btn ${button.style || 'primary'}`}
                  {...sbEditable(button)}
                >
                  {button.label}
                </a>
              ))}
            </div>
          )}
        </div>
        
        {image && (
          <div className="hero-image">
            <img 
              src={image.url} 
              alt={image.alternativeText || heading}
              width={image.width}
              height={image.height}
            />
          </div>
        )}
      </div>
    </section>
  );
};

export default Hero;

For API communication with Strapi, here's an example utility function for fetching data:

// lib/strapi.js
import qs from 'qs';

/**
 * Get full Strapi URL from path
 * @param {string} path Path of the URL
 * @returns {string} Full Strapi URL
 */
export function getStrapiURL(path = '') {
  return `${
    process.env.NEXT_PUBLIC_STRAPI_API_URL || 'http://localhost:1337'
  }${path}`;
}

/**
 * Helper to make GET requests to Strapi API endpoints
 * @param {string} path Path of the API route
 * @param {Object} urlParamsObject URL params object, will be stringified
 * @param {Object} options Options passed to fetch
 * @returns Parsed API call response
 */
export async function fetchAPI(path, urlParamsObject = {}, options = {}) {
  // Merge default and user options
  const mergedOptions = {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.STRAPI_API_TOKEN}`
    },
    ...options,
  };

  // Build request URL
  const queryString = qs.stringify(urlParamsObject);
  const requestUrl = `${getStrapiURL(
    `/api${path}${queryString ? `?${queryString}` : ''}`
  )}`;

  // Trigger API call
  const response = await fetch(requestUrl, mergedOptions);
  
  // Handle response
  if (!response.ok) {
    console.error(response.statusText);
    throw new Error(`An error occurred please try again`);
  }
  
  const data = await response.json();
  return data;
}

/**
 * Fetch a specific page with all its sections
 * @param {string} slug Page slug
 * @returns {Object} Page data including all sections
 */
export async function getPageBySlug(slug) {
  const data = await fetchAPI('/pages', {
    filters: { slug },
    populate: {
      sections: {
        populate: '*',
      },
      seo: {
        populate: '*',
      },
    },
  });
  
  return data?.data?.[0] || null;
}

The full project code is available in this GitHub repository: github.com/example/strapi-stackbit-demo

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Stackbit documentation.