Back to integrations

Integrate Nacelle with Strapi

Learn how to integrate Nacelle with Strapi

tweet selection
Nacelle and Strapi Integration.png

    These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

    Why Use Nacelle?

    Nacelle breaks free from traditional ecommerce by separating frontend from backend, embracing the headless CMS advantages that modern businesses seek. It's your API command center, connecting data sources while powering Progressive Web Apps that shine on mobile.

    The results? Merchants see a 28% average increase in conversion rates and pages that load in milliseconds instead of seconds. This speed doesn't just make your customers happy—it boosts your search rankings too.

    Nacelle works seamlessly with major platforms like Shopify and lets you build your storefront piece by piece. By integrating with a headless CMS like Strapi, you can fully realize the benefits of headless CMS in your ecommerce operations.

    Want the full details? Dive into Nacelle's official 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.

    See Strapi in action with an interactive demo

    Explore Strapi in an instant, hands-on demo set up just for you.

    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

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? 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.

    003-strapi-5.png

    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.

    004-strapi-5.png

    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.

    005-strapi-5.png

    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.

    Strapi Articles Published

    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.

    007-strapi-5.png

    Test API

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

    008-strapi-5.png

    🖐️ 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=*

    vuejs strapi integration - api request.png

    Getting Started: Integrate Nacelle with Strapi

    Let me walk you through how to integrate Nacelle with Strapi—no fluff, just the essentials. The synergy between Strapi and modern technologies is evident in projects like this Strapi and modern tech integration, showcasing what's possible when you combine powerful tools.

    Configuring Your Strapi Environment

    Your Strapi foundation needs these basics to integrate Nacelle effectively:

    • Check the official Strapi documentation for the most accurate and up-to-date version requirements.
    • These key environment variables in your .env file:
    1NACELLE_SPACE_ID=your-space-id
2NACELLE_SPACE_TOKEN=your-space-token

    Find these in your Nacelle dashboard.

    Whether you're in retail, technology, or even legal services—as demonstrated by this Strapi showcase in legal services—Strapi adapts to your industry's needs, making integration seamless.

    PostgreSQL works best in production environments, while SQLite is fine for development.

    Both GraphQL and Upload plugins can enhance your Strapi setup for Nacelle integration. If you're new to GraphQL in Strapi, check out this Strapi GraphQL setup guide.

    Installing and Adjusting Settings

    Integrating Nacelle's frontend capabilities with Strapi's backend prowess exemplifies seamless frontend and backend integration.

    Here's how to get the plugin running:

    1. Install via npm:
    1npm install @nacelle/strapi-plugin-nacelle
    1. Activate the plugin:
    1// config/plugins.js
2module.exports = {
3  nacelle: {
4    enabled: true,
5  }
6};

    Activating the right plugins is crucial for enhancing your CMS functionality. Explore essential Strapi plugins to further extend your project's capabilities.

    1. Configure through Strapi admin:
      • Navigate to Settings.
      • Input your Space ID and Token.
      • Choose which content types should sync.
    2. Verify these permissions:
      • Nacelle API endpoints need public access.
      • Synced content types require proper read permissions.

    Ensuring the security of your integration is paramount. Consider utilizing Strapi security plugins to safeguard your data.

    In addition to Nacelle's plugin, integrating essential ecommerce plugins for Strapi can further optimize your ecommerce capabilities.

    1. Keep content updated with webhooks:
      • Create webhooks that point to Nacelle's ingestion URL.
      • Configure them for your key content types to ensure automatic updates when content changes occur.

    Code Implementation

    Transitioning to a headless CMS setup can be complex. Understanding the intricacies of headless CMS migration can help smooth out this process.

    Here's the code that connects everything:

    1. Set up your Nacelle client:
    1const { createNacelleClient } = require('@nacelle/strapi-plugin-nacelle');
2
3const nacelleClient = createNacelleClient({
4  spaceId: process.env.NACELLE_SPACE_ID,
5  token: process.env.NACELLE_SPACE_TOKEN
6});
    1. Build your content sync function:
    1// Example for syncing a product
2const syncProduct = async (product) => {
3  try {
4    await nacelleClient.index({
5      type: 'product',
6      id: product.id,
7      title: product.title,
8      handle: product.handle,
9      // Add other relevant fields
10    });
11  } catch (error) {
12    console.error('Error syncing product:', error);
13  }
14};

    While implementing your Nacelle client, it's important to optimize data queries. Understanding the GraphQL and REST API synergy can improve your data handling efficiency.

    1. Automate syncing with lifecycle hooks:
    1// In your Strapi model file (e.g., api/product/models/product.js)
2module.exports = {
3  lifecycles: {
4    async afterCreate(data) {
5      await syncProduct(data);
6    },
7    async afterUpdate(data) {
8      await syncProduct(data);
9    }
10  }
11};

    To further boost your development efficiency, consider leveraging Strapi productivity tools.

    That's it! Congrats!

    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 Nacelle documentation.

    tweet selection