Swell

Why Use Swell?

Swell stands out as a flexible, scalable headless e-commerce platform built with an API-first approach, making it one of the leading headless commerce solutions.

When integrating Swell with a headless CMS for developers like Strapi, you gain significant flexibility and control over your e-commerce content and presentation. This combination is especially beneficial compared to traditional vs headless CMS setups, as it allows developers to fully customize the front end while maintaining robust back-end capabilities.

Integrating Swell with Strapi not only leverages Swell's e-commerce capabilities but also boosts eCommerce reach with Strapi, providing you with Strapi benefits for eCommerce that enhance your online store's performance and scalability.

For the technical nitty-gritty, check out the Swell documentation.

Why Use Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time:

1. Single types: Create one-off pages that have a unique content structure.
2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration.
3. 100% TypeScript Support: Enjoy type safety & easy maintainability
4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.
6. Editor interface: The editor allows you to pull in dynamic blocks of content.
7. Authentication: Secure and authorize access to your API with JWT or providers.
8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.
9. i18n: Manage content in multiple languages. Easily query the different locales through the API.
10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 🚀 Let's create your new project

To deploy your project, create a new project on the Strapi Cloud dashboard.

? Please log in or sign up. 
  Login/Sign up 
❯ Skip 

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Getting Started With Swell

Pairing Swell's e-commerce muscle with Strapi's content management creates the perfect tech combo—each platform does what it does best. Here's how to set up this power duo from scratch.

Installing Swell and Adjusting Settings in Strapi

Install the Swell Node.js SDK:

npm install swell-node

Next, create content types in Strapi that mirror your e-commerce data structure. Navigate to the Content-Types Builder and create types for:

1. Products
2. Categories
3. Orders
4. Customers

For the Product content type, include essential fields:

• Name (Text)
• Description (Rich Text)
• Price (Number)
• SKU (Text)
• Images (Media)
• Category (Relation to Category)

By setting up these content types, you're effectively building a product information manager in Strapi, which allows you to manage your product data efficiently.

Configure appropriate permissions through Settings > Roles to allow public access for your frontend to fetch product data.

Code Implementation for Integrating Swell With Strapi

Integrating Swell with Strapi involves using essential eCommerce APIs to synchronize data between platforms. If you're migrating to headless CMS, this implementation is pivotal in ensuring seamless data flow.

Create a service to sync data between Strapi and Swell:

// plugins/swell-sync/server/services/swell-sync.js
const swell = require('swell-node');

module.exports = () => ({
  async syncProducts() {
    // Initialize Swell with your credentials
    swell.init('your-store-id', 'your-secret-key');
    
    // Fetch products from Swell
    const swellProducts = await swell.get('/products');
    
    // Create or update products in Strapi
    for (const product of swellProducts.results) {
      await strapi.services.product.create({
        name: product.name,
        description: product.description,
        price: product.price,
        // Additional fields as needed
      });
    }
  },
});

This code implementation demonstrates how you can start using Strapi in eCommerce applications to manage your content while Swell handles the e-commerce functionalities.

To synchronize data, set up webhooks to listen for Swell events. By integrating webhooks in Strapi, you can ensure your data is updated in real-time as changes occur in Swell.

Try to include proper error handling in your API integrations:

try {
  const response = await swell.get('/products');
  // Process response
} catch (error) {
  console.error('Error fetching products from Swell:', error);
  // Handle error appropriately
}

For better performance, add caching for frequently accessed data. Implementing caching solutions in Strapi can significantly enhance your application's performance by reducing redundant API calls:

const NodeCache = require('node-cache');
const cache = new NodeCache({ stdTTL: 600 }); // 10 minutes TTL

async function getProduct(id) {
  const cachedProduct = cache.get(id);
  if (cachedProduct) return cachedProduct;

  const product = await swell.get(`/products/${id}`);
  cache.set(id, product);
  return product;
}

With this integration, you've created a unified system where Strapi handles your content while Swell drives your e-commerce operations—giving you the best of both worlds for your online store.

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 at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

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