Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

To have a successful e-commerce strategy, you need to publish your products on different platforms like Amazon, eBay, and Shopify to make your products available in a wider market. One of the biggest challenges of this strategy is you don't have a single source of truth for your products, and when you have a high number of products, it becomes really hard to manage one product and its attributes on multiple platforms.

In this tutorial, we will see how we can use Strapi to solve this problem.

## Prerequisites
- Node 14.19.1: Please, visit [Node Previous Releases Page](https://nodejs.org/en/download/releases/) to download node v14 or earlier.

## Goals

In this tutorial, we'll learn how having a single source of truth can help with product management. We start by creating a content type for products. Then, we'll import product details from two different sources and save the theme in Strapi. Then, we'll enrich the products in Strapi. We will also build a storefront for our products using Strapi as Product Information Manager.

## What is a PIM?

A Product Information Management (PIM) solution is a business application that provides a single place to collect, manage, and enrich your product information, create a product catalog, and distribute it to your sales and eCommerce channels. A PIM solution makes it faster and easier to create and deliver compelling product experiences.

![A Breakdown of PMI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aosqva547qa4kavphzpy.png)

## What We're Building

In this tutorial, we'll build a Product Information Manager (PIM) with Strapi, importing products details from 2 data sources:

- [Dummyjson API](https://dummyjson.com/products)
- [Fakestoreapi API](https://fakestoreapi.com/products)
- We will also enrich the products in Strapi and build a custom storefront with Next.js.
- In our Storefront, we pull products from Strapi GraphQL API and build a catalog.
![What we're building](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7mo9zl22pmx8f5hvkic.png)


You can [find a live demo of the application here](https://my-store-frontend.vercel.app/).

## Step 1: Install and Set up Strapi
The first thing in this stage is the installation and setup of Strapi. To do this, follow the instructions below:

1. Open a terminal and run the following command to clone the Strapi repository and install it:
```bash
    git clone https://github.com/amirtds/strapi-pmi
```

2. Open the `strapi-pmi` directory in your favorite editor and rename the `.env.example` file to `.env`. Then, open the `.env` file and add the following line:
```
    API_TOKEN_SALT=tempkey
```
> Note: For this tutorial, we are using a default value for environment variables; for production, you should change them.

3. Next, run the following command to install the dependencies and run Strapi in development mode:
```bash
    yarn install && yarn develop
```
After the command is executed, visit [http://localhost:1337/](http://localhost:1337) and create an admin user.

## Step 2: Create Product Content Type
The next step is to employ the content-type builder. Follow the instructions below:
1. After successfully logging in to Strapi, on the left sidebar, under the **PLUGINS** section, click on the **Content-Type Builder** button.
2. Under the **COLLECTION TYPES** click on the **Create new collection type** link and for the **Display name**, enter `product`.
3. Let's create fields for our new content type. The product content type will have the following fields:

- **name** (text)
- **description** (textarea)
- **price** (decimal number)
- **published** (boolean)
- **brand** (text)
- **color** (text)
- **size** (text)
- **quantity** (integer number)
- **discount_price** (decimal number)
- **discount_start_date** (date)
- **discount_end_date** (date)
- **category** (text)
- **imageUrl** (text)
- **currency** (text)
- **bestseller** (boolean)
- **featured** (text)
> For more information about the content-type builder please visit Strapi Doc for [Introduction to the Content-Type Builder](https://docs.strapi.io/user-docs/latest/content-types-builder/introduction-to-content-types-builder.html).

Next, let's enable the `find` and `findOne` queries for products via Strapi GraphQL API.

* Click on the **settings** link on the left sidebar and then click on the **Roles** under **USERS & PERMISSIONS PLUGIN**. 
* Click on **Public** and in the **Permissions** section, pick **Products**. Select `find` and `findOne`. 
* Click on the **Save** button on the navigation bar.

## Step 3: Collect Products Data into Strapi

As we mentioned earlier, we are going to fetch products data from two sources, [Dummyjson API](https://dummyjson.com/products) and [Fakestoreapi API](https://fakestoreapi.com/products).

Let's create a cron job to fetch these data every day the product doesn't exist in Strapi, we use `product` [api service](https://docs.strapi.io/developer-docs/latest/development/backend-customization/services.html#usage) to create a new product.

1. Open the `strapi-pmi` in your editor, in the **config** directory, create a new file called `cront-tasks.js`, and add the following code to it:
```js
    const fetch = require('node-fetch');
    
    module.exports = {
        '0 0 0 * * *': async ({ strapi }) => {
            let products = []
            // Get all products from dummyjson API
            const dummyjsonResponse = await fetch('https://dummyjson.com/products');
            const dummyProducts = await dummyjsonResponse.json();
            // Append each product to the products array
            products.push(...dummyProducts.products);
            // Get all products from fakestoreapi API
            fakeStoreResponse = await fetch('https://fakestoreapi.com/products');
            fakeStoreProducts = await fakeStoreResponse.json();
            // Append each product to the products array
            products.push(...fakeStoreProducts);
            // Loop through each product
            products.forEach(async (product) => {
                // Check if the product already exists
                const existingProduct = await strapi.service("api::product.product").find({
                    filters: {
                        name: product.title
                    }
                });
                // If the product exists, log it
                if (existingProduct.results.length > 0){
                    console.log(`Product ${product.title} already exists`)
                }
                else {
                    // If the product doesn't exist, create it
                    // create the image
                        let image = ""
                        product.image !== undefined ? image = product.image : product.images !== undefined ? image = product.images[0] : image = ""
                        const createdProduct = strapi.service("api::product.product").create({
                            data : {
                                name: product.title,
                                description: product.description,
                                imageUrl: image,
                                price: product.price,
                                brand: product.brand || '',
                                color: product.color || '',
                                size: product.size || '',
                                quantity: product.quantity || 0,
                                category: product.category || '',
                            }
                        });
                }
            });
      }
    }
```
> Take note of the code comments.

2. Now, let's enable the cron tasks in Strapi. In the **config** directory, open `server.js` and replace its content with the following:
```js
    const cronTasks = require("./cron-tasks");
    
    module.exports = ({ env }) => ({
      host: env('HOST', '0.0.0.0'),
      port: env.int('PORT', 1337),
      app: {
        keys: env.array('APP_KEYS')
      },
      cron: {
        enabled: true,
        tasks: cronTasks
      },
    });
```
> To learn more about Cron Jobs in Strapi, please [visit Strapi Doc](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/cronjobs.html#creating-a-cron-job).

To initialize our server with product data we can run similar code in [bootstrap](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.html#bootstrap) function to create products. 

3. At the root of the project go to the **src** folder and open `index.js` file. replace `bootstrap(/*{ strapi }*/) {},` with the following:
```js
      bootstrap({ strapi }) {
        const fetch = require('node-fetch');
        let products = []
        // Get all products from dummyjson API and append them to the products array
        fetch('https://dummyjson.com/products').then(response => response.json()).then(dummyProducts => {
          products.push(...dummyProducts.products);
          // Get all products from fakestoreapi API and append them to the products array
          fetch('https://fakestoreapi.com/products').then(response => response.json()).then(fakeStoreProducts => {
            products.push(...fakeStoreProducts);
            // Loop through each product
            products.forEach(async (product) => {
              // Check if the product already exists
              const existingProduct = await strapi.service("api::product.product").find({
                filters: {
                  name: product.title
                }
              });
              // If the product exists, log it
              if (existingProduct.results.length > 0){
                console.log(`Product ${product.title} already exists`)
              }
              else {
                // If the product doesn't exist, create it
                // create the image
                let image = ""
                product.image !== undefined ? image = product.image : product.images !== undefined ? image = product.images[0] : image = ""
                const createdProduct = strapi.service("api::product.product").create({
                  data : {
                    name: product.title,
                    description: product.description,
                    imageUrl: image,
                    price: product.price,
                    brand: product.brand || '',
                    color: product.color || '',
                    size: product.size || '',
                    quantity: product.quantity || 0,
                    category: product.category || '',
                  }
                });
              }
            });
          });
        });
      }
```
> Take note of the code comments.

4. Now run the server, click on **Content Manager** and select **Product** under **COLLECTION TYPES**, you should see a list of all products.

## Step 4: Enrich Products Data
Let's enrich one of our products with more data. 
1. Go to the Product page in the Content Manager and search for `Samsung 49-Inch` product.
2. Open the product page and add the following data:

- `brand`: `Samsung`
- `color`: `Black`
- `size`: `49 Inch`
- `quantity`: `10`
- `discount_price`: `$799.99`
- `discount_start_date`: `2023-01-01`
- `discount_end_date`: `2023-01-05`
- `published`: `true`
- `currency`: `USD`
- `bestseller`: `true`
- `featured`: `true`

3. Click on the **Save** button on the navigation bar.

> As you can see, all the fields we filled were empty because we didn't have any data for them in our data sources.

## Step 5: Stream Products Data into Sales Channels - Nextjs Storefront

In this step, we will publish our products into a custom storefront powered by [Nextjs](https://nextjs.org/). **Before continuing, please make sure your Strapi server is running.** 

[Clone the storefront project from GitHub](https://github.com/amirtds/my-store-frontend).
```bash
    git clone -b feat/frontend-without-strapi https://github.com/amirtds/my-store-frontend.git
```
The UI of the storefront is already built. In this step, we are going to integrate our PMI into it to make it work.

1. Open the **my-store-frontend** folder in your editor and create a new file called `.env` at the root of the project with the following content:
```
    STRAPI_GRAPHQL_ENDPOINT = http://localhost:1337/graphql
```
In the project, we are going to query Strapi Graphql API for products and we are also going to filter products to find featured products to show in the Hero section of the storefront. Now open [http://localhost:1337/graphql](http://localhost:1337/graphql) in your browser (this is Strapi Graphql API and it opens a playground for you to test queries). In the left section paste the following query:

```
      query {
        products(pagination: {pageSize: 50}) {
          data {
            id
            attributes {
              name
              description
              price
              published
              brand
              color
              size
              quantity
              discount_price
              discount_start_date
              discount_end_date
              category
              imageUrl
              currency
              bestseller
              featured
            }
          }
        }
      }
```
2. Click on the **Play** button and you should see all the products in the right section. We are going to use this query to fetch all of our products from Strapi.

> Now let's test another query we are going to use in our storefront. 

3. Clean the left section and paste the following query:
```
     query {
        products(filters: {featured: {eq: true}}) {
          data {
            id
            attributes {
              name
              description
              price
              published
              brand
              color
              size
              quantity
              discount_price
              discount_start_date
              discount_end_date
              category
              imageUrl
              currency
              bestseller
              featured
            }
          }
        }
      }
```
4. Click on the **Play** button and you should see the featured product in the right section. We are going to use this query to fetch featured products from Strapi.

> Let's go back to our editor and open the storefront project. 

5. In the `src/pages/index.js` file, look for `const FEATURED_PRODUCT_QUERY =` and replace the `"REPLACE_WITH_QUERY"` with the following:
```
    gql`
      query {
        products(filters: {featured: {eq: true}}) {
          data {
            id
            attributes {
              name
              description
              price
              published
              brand
              color
              size
              quantity
              discount_price
              discount_start_date
              discount_end_date
              category
              imageUrl
              currency
              bestseller
              featured
            }
          }
        }
      }
    `;
```
6. Next look for `const ALL_PRODUCTS_QUERY =` and replace the `"REPLACE_WITH_QUERY"` with the following:
```
    gql`
      query {
        products(pagination: {pageSize: 50}) {
          data {
            id
            attributes {
              name
              description
              price
              published
              brand
              color
              size
              quantity
              discount_price
              discount_start_date
              discount_end_date
              category
              imageUrl
              currency
              bestseller
              featured
            }
          }
        }
      }
    `;
```
7. Next, go to the `src/pages/api/products.js` file and replace the `"REPLACE_WITH_QUERY"` with the following:
```
    gql`
        query {
          products(pagination: {pageSize: 50}) {
            id
            attributes {
              name
              description
              price
              published
              brand
              color
              size
              quantity
              discount_price
              discount_start_date
              discount_end_date
              category
              imageUrl
              currency
              bestseller
              featured
            }
          }
        }
      `;
```
8. Open your terminal, navigate to the root of the `my-store-frontend` folder and run the following command to install all the dependencies and run storefront:
```bash
    npm install && npm run dev
```
9. Visit [http://localhost:3000/](http://localhost:3000/) in your browser and you should see the storefront with products from Strapi.

## Conclusion

In this tutorial, we have learned how we can use Strapi to build a Product Information Manager to have a single source of truth for our products. We used the bootstrap function and cron job to populate product data from different data sources, we could enrich our products with more data that doesn't exist in our data sources. Finally, we enabled Graphql for our products and streamed them into our Nextjs storefront.

We only streamed the products to one sales channel, but we can duplicate the process in Step 5 to stream products to multiple sales channels like Shopify, Magento, etc.

As a practice, you can try creating a Shopify store and stream products to your Shopify store.

[Click here to view the source code for this tutorial.](https://github.com/amirtds/strapi-pmi/tree/feat/products-pmi)



medium_How to Build a Product Information Manager Using Strapi.jpg

small_How to Build a Product Information Manager Using Strapi.jpg

thumbnail_How to Build a Product Information Manager Using Strapi.jpg

How to Build a Product Information Manager Using Strapi.jpg

How to Build a Product Information Manager Using Strapi

I'm a full stack engineer who loves the challenges of working with cutting-edge technologies like React, Nextjs, Strapi.

Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

If you're aiming for high visibility of your blog content, then you have to post it on many channels like [Dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [Medium](https://medium.com/).

Not having a single source of truth for your content will cause a lot of manual work and soon your content becomes out of sync. Imagine how much time you could save if your blog post were automatically created and updated on multiple platforms.

Fortunately, there is a perfect solution. You can use Strapi as a single source of truth for your blog contents to automatically publish/update them on different platforms.

In this tutorial, we will explore how to do it by using Strapi and configuring webhooks in it. We also use Medium and Dev.to REST APIs, Hashnode GraphQL API, a serverless function that is hosted in AWS Lambda to handle the webhook call.

## Pre-requisites 
- `node <= 14.0.0` Please visit [Node Previous Releases Page](https://nodejs.org/en/download/releases/) to download node **v14 or earlier**.
- `npm >= 6.0.0`
- Having an account in [Dev.to](https://dev.to), [Hashnode](https://hashnode.com) and [Medium](https://medium.com)
- Hosting platform for the serverless function, ideally [AWS](https://aws.amazon.com) or [GCP](https://cloud.google.com)


## Goals

In this tutorial, we'll learn how a single source of truth can help with content creation. We start by creating a simple content type for our blog post. Then we develop a serverless function that gets triggered by Strapi webhooks. This serverless function receives blog post data from Strapi and by using Dev.to, Medium, and Hahnode API, creates a post in those platforms.

## Step 1 - Create a new Content Type for your blog post.

- Install Strapi. I used version 4 for this tutorial. To learn more about installation, please visit [Strapi Installation Guide](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation.html)
- After you successfully installed Strapi, login to the admin dashboard
- On the left sidebar, click on `Content-Types Builder`

![Content type builder](https://paper-attachments.dropbox.com/s_7726E1D88F53BC6DA6D544D263A409E79DB39DB74A14FC2ADB974A51CD44DB71_1634913850476_Screen+Shot+2021-10-22+at+09.44.03.png)

- Under Collection Types, click on “Create new collection type”

![Create new collection type](https://paper-attachments.dropbox.com/s_7726E1D88F53BC6DA6D544D263A409E79DB39DB74A14FC2ADB974A51CD44DB71_1634916259980_Screen+Shot+2021-10-22+at+10.24.16.png)

- Name your collection type “Blog” and add the following fields to it
    - title and its type as “text”
    - Content, and its type as “rich text”

For this article, our blog post has a title, tags, and content, but you may add more fields to your blog content type depending on your needs.

![Blog Content Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlvq3ph4l286b1tycbzb.png)

- Now on the left sidebar, click on Content Manager and pick “Blogs”

![Blogs collection](https://paper-attachments.dropbox.com/s_7726E1D88F53BC6DA6D544D263A409E79DB39DB74A14FC2ADB974A51CD44DB71_1634916434245_Screen+Shot+2021-10-22+at+10.27.09.png)



- Click on the “Add new entry” button and create a new blog post as the following:
![Create a new blog post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2tdsv1x4ct665o90yc2.png)


 

##  Step 2 - Using Dev.to, Medium, and Hashnode APIs to post a blog

**Generating an API key for Dev.to**

Dev.to has a [rest API](https://developers.forem.com/api#operation/createArticle) to create, read, update, and delete posts. Authentication is required to create and update articles. You need to generate an API key first. To obtain one, please follow these steps:

- Visit Dev.to [Account settings](https://dev.to/settings/account)
- In the "DEV API Keys" section, create a new key by adding a description and clicking on the "Generate API Key" button.
![Generate new dev.to API key](https://user-images.githubusercontent.com/146201/64421366-af3f8b00-d0a1-11e9-8ff6-7cc0ca6e854e.png)

- You'll see the newly generated key in the same view. Please save this API key in a safe place, We are going to use it in the next step.
![Save the generated API key](https://user-images.githubusercontent.com/146201/64421367-af3f8b00-d0a1-11e9-9831-73d3bdfdff66.png)


When you make an API call to the Articles endpoint - https://dev.to/api/articles - you should include `api-key` in the header like the following:

```
        headers = {
            'Content-Type': 'application/json',
            'api-key': 'YOUR-API-KEY',
        }

```

## Authenticate your call to Medium APIs

Like Dev.to, Medium also has [REST API](https://github.com/Medium/medium-api-docs) to create posts. In this tutorial, we are going to work with `/posts` endpoint to create a new blog post.

**Get the Authentication Token**

To publish on behalf of a Medium account, you will need an access token. An access token grants limited access to a user’s account. To obtain one, please follow these steps:

- Login to Medium.
- Go to your [account settings](https://medium.com/me/settings).
- On the Left Sidebar click on Integration tokens.
- Enter a description for your token and click the get integration token button.
![Generate an integration token for Medium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctxszvwczz4xgx007dfc.png)


Save this Authentication token in a safe place. You need this for the next step.

**Get the user's ID**

To create a post you need to make an HTTP post call to `https://api.medium.com/v1/users/[user_id]/posts` as you see you need user id. To get the user id you need to make an HTTP GET call to `https://api.medium.com/v1/me`  . Run the following command in your terminal to get the user id.

```
    curl https://api.medium.com/v1/me -H "Authorization: Bearer [YOUR-INTEGRATION-TOKEN]" -H "Content-Type: application/json"
```


This endpoint responds with your user information.

```
    {
       "data":{
          "username":"YOUR-USERNAME",
          "url":"https://medium.com/@your_user_id",
          "imageUrl":"YOUR-USER-IMAHE",
          "id":"YOU-USER-ID",
          "name":"YOUR-USER-NAME"
       }
    }
```

The "id" is what you need to add in the endpoint URL to make an HTTP Post call.


## Authenticate your call to Hashnode APIs

Hashnode APIs are different. Unlike Dev.to and Medium, they provide a GraphQL API. 
If you are interested to learn more about their APIs, visit their [API Playground](https://api.hashnode.com) and click on the **Docs** button on the right.

![Hashnode API documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91vz7k7xz3eg3ie3wqxf.png)


**Generate API Token**

Like the previous platforms, the first step to being able to use Hashnode API to create a new post is to get an authentication token. To get your token, follow these steps:

- Go to your [account settings](https://hashnode.com/settings)
- On the left sidebar, Click on Developer.

![Hashnode developer settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp5nwn5eqgj04yko6ccc.png)

- Click on Generate New Token button.

![Generate Hashnode API token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2t8ul5ex4codv748urw.png)


Please remember to save this token in a safe place. We need it for the next step.

**Get your publicationId**

To successfully create a post on Hashnode you need to provide the `publicationId` in the GraphQL call. Go to your Hashnode blog dashboard.

![Hashnode blog dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5km859m4a4sf1vcvkodz.png)


In the URL in your browser between `https://hashnode.com/` and `/dashboard` you see a long alphanumeric value,  `https://hashnode.com/{This is the publication id}/dashboard` . That’s your publication id.

Ok, so now that we've set up our three platforms for successful API calls, let's talk more about the architecture of our solution and different pieces' responsibilities. 

## Step 3 - Publishing Workflow

![Publishing workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpugokhvsrrrzl7a274q.png)


Remember, the idea behind our solution is that you don't have to go back and forth between various platforms. You can create or update your blog post in one place, which automatically creates or updates it across all the different platforms.
Now let’s break down this diagram and talk about different pieces and their responsibilities.

- **Strapi**: 
    - it’s the only place we create, update or delete our blog post. In Step 1 you installed and create a Content-Type for Blogs to host 
- **Strapi Webhooks**
    - What is a webhook? Webhook is a way for one application to provide some data for another application when a specific event happens
    - We want Strapi to send blog information to the serverless function when we publish blog content in Strapi. We talk more about the serverless function, but it’s a piece of code that handles blog creation in Dev.to, Hashnode and Medium.
- **AWS Lambda**
    - This is where we host our Serverless function, you can use other platforms like GCP or Linode.
    - What is a serverless function? A serverless function is a piece of code that runs without installing any software on the server. Instead, it is invoked by an API call from a third-party service provider.
    - In this tutorial, we are using Python as our programming language for our function. Feel free to use your language of choice that is supported by the hosting platform.
    - You can visit [AWS Lambda Developer Guide](https://docs.aws.amazon.com/lambda/latest/dg/lambda-python.html) for more information
    - Our Serverless Function in AWS Lambda receives the information about the blog post we just published in Strapi, and it makes API calls to Dev.to, Medium, and Hashnode APIs to create a blog accordingly.


## Step 4 - Create a Serverless Function

As mentioned in the previous step, we are going to create a Serverless function to handle Webhooks call from Strapi. In this tutorial, we are using AWS Lambda but feel free to use your provider of choice.

- Follow the instructions in [AWS Lambda Developer Guide](https://docs.aws.amazon.com/lambda/latest/dg/lambda-python.html) to create a Lambda Function
    - My recommendation is to upload the code as a `.zip` file to the Lambda dashboard because this code has some dependencies (`requests` and `gql`) that should be installed before execution. To learn more about this, visit [AWS Guide for Deploying .zip File](https://docs.aws.amazon.com/lambda/latest/dg/python-package.html)
    - After creating the Lambda function successfully, In the function dashboard, Go to the Configuration tab → triggers and copy the API Gateway Endpoint. We use this URL for Strapi Webhooks.
![Lambda Function API Gateway Endpoint](https://paper-attachments.dropbox.com/s_7726E1D88F53BC6DA6D544D263A409E79DB39DB74A14FC2ADB974A51CD44DB71_1634925973720_Screen+Shot+2021-10-22+at+13.06.05.png)

- Replace the function code with the following:
    - Don’t forget to replace all the strings that start with `CHANGE-ME-*` with the actual value. For example `CHANGE-ME-API-KEY` with your API key.

```
    import requests
    import json
    from gql import gql, Client
    from gql.transport.requests import RequestsHTTPTransport
    
    
    def devto_publisher(event, context):
        # creating API call headers
        headers = {
            'Content-Type': 'application/json',
            'api-key': 'CHANGE-ME-API-KEY',
        }
        # get the Strapi Webhook call data
        body = json.loads(event["body"])
        # Extract blog post title from Strapi webhook call
        title = body\["entry"\]["title"]
        # Extract blog content from Strapi webhook call
        body_markdown =body\["entry"\]["Content"]
        # Extract blog tags from Strapi webhook call
        tags =body\["entry"\]["tags"]
        # Create Dev.to article data sctruture
        article = {
            'title': title,
            'body_markdown': body_markdown,
            'published': True,
            'tags': tags.split(',')
        }
        # create a data dictionary with article key and value
        data = {
            'article': article
        }
        # make post call to dev.to endpoint to create an article
        response = requests.post(
            'https://dev.to/api/articles', headers=headers, json=data)
    
    
    def medium_publisher(event, context):
        # Get User's ID from Medium
        auth_headers = {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer CHANGE-ME-YOUR-TOKEN',
        }
        auth_response = requests.get(
            'https://api.medium.com/v1/me', headers=auth_headers
        )
        medium_id = auth_response.json()\['data'\]['id']
        # Create Headers for making call to article creation endpoint
        article_headers = {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer CHANGE-ME-YOUR-TOKEN',
        }
        # get the Strapi Webhook call data
        body = json.loads(event["body"])
        # Extract blog post title from Strapi webhook call
        title = body\["entry"\]["title"]
        # Extract blog content from Strapi webhook call
        body_markdown = body\["entry"\]["Content"]
        # Extract blog tags from Strapi webhook call
        tags = body\["entry"\]["tags"]
        # Create blog data sctructure for Medium Endpoint
        data = {
            'title': title,
            "contentFormat": "markdown",
            'content': body_markdown,
            'publishStatus': "public",
            'tags': tags.split(',')
        }
        medium_endpoint = "https://api.medium.com/v1/users/{user_id}/posts".format(user_id = medium_id)
        # Create article by making a call to Medium endpoint
        response = requests.post(
            medium_endpoint, headers=article_headers, json=data)
    
    
    def hashnode_publisher(event, context):
        # Create headers for GraphQL API Call
        headers = {"Authorization": "CHANGE-ME-YOUR-TOKEN"}
        _transport = RequestsHTTPTransport(
            url="https://api.hashnode.com",
            use_json=True,
            headers=headers,
        )
        client = Client(
            transport=_transport,
            fetch_schema_from_transport=True,
        )
        # get the Strapi Webhook call data
        body = json.loads(event["body"])
        # Extract blog post title from Strapi webhook call
        title = body\["entry"\]["title"]
        # Extract blog content from Strapi webhook call
        body_markdown = body\["entry"\]["Content"]
        # Extract blog post tags from Strapi webhook call
        tags = body\["entry"\]["tags"]
        # Create graphql mutation query for creating a post
        create_post_mutation = gql(
            """
                mutation ($input: CreateStoryInput!){
                    createPublicationStory(publicationId: "CHANGE-ME-YOUR-PUBLICATION-ID",input: $input){
                        message
                        post{
                        _id
                        title
                        }
                    }
                }
                """
        )
        # provide value for input variable
        post_input = {
            "input": {
                "title": title,
                "contentMarkdown": body_markdown,
                "tags": [
                    {
                        "_id": "56744721958ef13879b94c7e",
                        "name": "General Programming",
                        "slug": "programming"
                    }
                ]
            }
        }
        # execute graphql call to Hashnode Endpoint
        client.execute(
            create_post_mutation,
            variable_values=post_input
        )
    
    def lambda_handler(event, context):
        devto_publisher(event, context)
        medium_publisher(event, context)
        hashnode_publisher(event, context)
        return {
            'statusCode': 200,
            'body': json.dumps(event)
        }
```

In this serverless function, we have 4 functions:

- `devto_publisher` that is in charge of creating a post in Dev.to
- `medium_publisher` that is in charge of creating a post in Medium
- `hashnode_publisher` that is in charge of creating a post in Hashnode
- `lambda_handler` that is in charge of calling all the previous 3 functions, when your serverless function gets triggered.


## Step 5 - Setup Strapi Webhooks

As I explained before webhooks send **some data** from **one application** to **another application** when **a special event** happens. In our case:

- One Application = Strapi
- Another Application = Serverless Function
- Special Event = When we publish a blog post in Strapi
- Some Data = Published Blog Post

To make it clear the reason we want this Webhook is to send Published Blog post data from Strapi to our serverless function so our function can create it on different platforms.
To create a new webhook login to your Strapi Instance, Click on Settings on the Left sidebar and pick Webhooks under the Global Settings.

![Webhook Settings](https://paper-attachments.dropbox.com/s_7726E1D88F53BC6DA6D544D263A409E79DB39DB74A14FC2ADB974A51CD44DB71_1634926960862_Screen+Shot+2021-10-22+at+13.22.11.png)


Now click on the `Add new webhook` button, Give your webhook a name like “Blog Publisher Endpoint” and in the URL section paste the API Gateway URL of your Lambda function. In the Events section, mark the Publish Event for Entry.

![Create a new webhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iao8ouuujnzw78kbhxzf.png)



> In this article, we are triggering a webhook only when we publish a blog in Strapi but in the real world, you need to trigger your webhook when you create, update, and delete a blog post.

## Let's see how it works in the real world

In this short video, you will see how my implementation works. By creating a content type for blog posts, adding a webhook to trigger my AWS Lambda function, and publishing the post in Strapi automatically creates new articles on multiple platforms!


<iframe width="560" height="315" src="https://www.youtube.com/embed/URi9UHtZCak" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Conclusion

In this tutorial, you learned how to use Strapi as a single source of truth for your blog posts and automatically publish them to multiple platforms. This means that once an article is created in Strapi - it can be published on three different platforms: Dev.to, Hashnode, and Medium. If you are going to implement this as your publishing solution keep in mind in this article our blog content type is really simple but in the real world, you need to add more fields to it. You also need to be able to edit and delete posts. To do so you need to enable webhooks trigger for content deletion as well and in your serverless function, you need to implement a way to update existing posts and delete them via APIs.




Note: This tutorial is created with Strapi V4 Beta

medium_Create a preview button in Strapi for Next.js-12.png

small_Create a preview button in Strapi for Next.js-12.png

thumbnail_Create a preview button in Strapi for Next.js-12.png

Create a preview button in Strapi for Next.js-12.png

How to Publish your Blog Posts from Strapi to Multiple Platforms

## Introduction

[Strapi](https://strapi.io) and [Next.js](https://strapi.io/integrations/nextjs-cms) are the best headless CMS and application development environments available on the market today! They are two powerful technologies that can work in tandem to give you the best digital experience possible. 

Strapi is a flexible, open-source Headless CMS that allows developers to use their favorite tools and frameworks while also giving editors power over their content. Next.js is a developer's dream come true with all the features needed for production: hybrid static & server rendering, TypeScript support, smart bundling, assets optimization, and more!

This tutorial will build a blog app using Strapi as the CMS and Next.js as the framework. We will also be using two of its cool features, image optimization, and preview mode. Here's an example of what we will be building.


![nextjs-strapi-blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9scrsl52xc2pjs1eygqa.gif)



## Prerequisites
- `node <=14.0.0`
- `npm >=6.0.0`
- `yarn`
- Basic knowledge about git
- The Latest version of `Strapi (v3.6.5)`
- The Latest version of `Next.js (v.11.0.1)`

## Goals

This article is all about Next.js and Strapi! You will learn how to use the Image component to add images into your application and use Next.js Preview. See an edited version of your content from Strapi.

Before getting started, let's talk about two features of Next.js that we will use in our blog application.

## Optimize image loading with Image

A website's images can significantly impact its loading time. Typically, they are assets that can harm our site performance if they are not in the proper format or size.

Finding and fixing large images is a tedious process. If you don't have an automatic way to do it, you will find yourself spending hours looking for those images that slow your site down and optimize them.

Using the next/image component, we can resize, optimize and serve images in modern formats. This helps us drastically to improve site speed and user experience with images. Next.js can optimize not only locally hosted images but can work with external data sources as well. In our case, images hosted on Strapi.

## Get draft previews with Nextjs preview mode

Static Site Generation is a great way to create static pages ahead of time before users request them. This makes the loading of your blog posts fast, but it makes the editing experience not too pleasant. Each time you edit in a post, and you want to see how the edit looks, and you have to rebuild the whole site. 

In this case, preview mode can come to the rescue. Preview mode bypasses static generation and renders the page at the request time instead of build time with the draft data instead of production. In simple words, what it does is make static pages dynamic.

## Scaffolding a Strapi Project

### Installation

To Install Strapi, you can choose one of the [installation methods](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation.html).

If you want to follow along with this post, feel free to use [https://github.com/amirtds/strapi-sqlite](https://github.com/amirtds/strapi-sqlite).

```
    git clone https://github.com/amirtds/strapi-sqlite
    strapi-sqlite
    yarn install && yarn develop
```

After successfully running the develop command, you should be able to visit the Strapi dashboard at [http://localhost:1337/](http://localhost:1337/) and create an admin account at [http://localhost:1337/admin](http://localhost:1337/admin).


### Content Types

We built two content types for our Blog.

- Author
- Blog

Below are the images of the fields that should be included in each collection.

![Authors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90lpegl02k94zwstl70o.png)

![Blogs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gb0kgbg2azza2170lel.png)


Feel free to add new records for each content type by clicking on *Authors* and *Blogs* on the left sidebar.


![Records](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pwy28bbsn0xrve2zgnx.png)


**API Access**

We are using GraphQL to consume Strapi Data. Make sure your Strapi is set up correctly, and you have the appropriate permissions. Go to settings → Roles → Public and give `find` and `count` permission to the public.


![Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7htyrdd8lsoqbv68cbgk.png)


**GraphQL Plugin**

If you are not using our repo for Strapi, make sure the GraphQL plugin is installed! You can find it in the Marketplace section in the left sidebar.


![GraphQL plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15jg0wq9cz0xrp8l9ikr.png)


## Building the Frontend with Next.js

### Create New Project

Let's create a new project called `next-blog` using our example in the GitHub repo and run the development environment. Make sure you created some records in Strapi for Authors and Blogs before running this command.

```
    npx create-next-app next-blog --example "https://github.com/amirtds/blog/tree/develop"
    cd next-blog
    npm run dev
```

Now you should be able to access the site at [http://localhost:3000](http://localhost:3000).

**Nextjs Image**
In our blog application, we are using the Nextjs Image component to optimize our images.
For more information, visit [https://nextjs.org/docs/basic-features/image-optimization](https://nextjs.org/docs/basic-features/image-optimization).

Use `Image` Component

- To use the image component, you to first import it

```
    import Image from 'next/image'
```

- Set Width, height, and src

It's necessary to set the width and height properties of the `Image`. In our app, We also set the **src** as `src={urlBuilder(post.image[0].url)}`

Let's take a deeper look at our code. In the [src/components/blogs.jsx](https://github.com/amirtds/blog/blob/main/src/components/blogs.jsx#L73) we have:

```
    {siteBlogs.map((post) => (
     <Link key={post.id} href={`/blogs/${post.slug}`}>
        <a>
            <motion.div variants={fadeIn} key={post.id} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}className="flex flex-col rounded-lg shadow-lg overflow-hidden">
            <div className="flex-shrink-0">
                <Image width={600} height={350} className="h-48 w-full object-cover" src={urlBuilder(post.image[0].url)} alt={post.title} />
            </div>
            <div className="flex-1 bg-white p-6 flex flex-col justify-between">
                <div className="flex-1">
                <a href={post.href} className="block mt-2">
                    <p className="text-xl font-semibold text-gray-900">{post.title}</p>
                    <p className="mt-3 text-base text-gray-500">{post.description}</p>
                </a>
                </div>
                <div className="mt-6 flex items-center">
                <div className="flex-shrink-0">
                    <span className="sr-only">{post.author.name}</span>
                    <Image width={50} height={50} className="h-10 w-10 rounded-full" src={urlBuilder(post.author.photo[0].url)} alt={post.title} />
                </div>
                <div className="ml-3">
                    <p className="text-sm font-medium text-gray-900">
                        {post.author.name}
                    </p>
                    <div className="flex space-x-1 text-sm text-gray-500">
                    <time dateTime={post.published}>{post.published}</time>
                    </div>
                </div>
                </div>
            </div>
            </motion.div>
        </a>
     </Link>
    ))}
```
`*siteBlogs*` is an array that has a list of all of our blogs. We are looping over it and creating a blog card based on each blog item in this list. In the `Image` `src={urlBuilder(post.image[0].url)}` result will be `STRAPI_URL/IMAGE_URL` for example `http://localhost:1337/uploads/strapi_cover_1fabc982ce_1c5a5b390a.png`.

Set `domain` in `next.config.js`. In this file, you should have something like

```
    module.exports = {
        images: {
          domains: ["localhost"],
        },
      }
```

In our case, we have

```
    module.exports = {
        images: {
          domains: [configs.STRAPI_DOMAIN],
        },
      }
```

Which `configs.STRAPI_DOMAIN` is what we have in the `configs.json` file for the Strapi domain.
We do not have many pictures in our Blog, but after using the image component, we got great results from the [lighthouse audit](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnextjs-blog-rose-eta.vercel.app).


![lighjouse report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qz2s82wdq6l3x7ai5qn.png)



## Nextjs Preview

Preview makes a pre-rendered page to be visible as server-side rendered pages. This means that, with Preview, you can see your changes live without having to go through the whole build process again!

### How it works?

Next.js checks your site cookies, and if two special cookies are present, it considers the request as preview mode, and it bypasses the SSG. For more information about Preview, please visit [https://nextjs.org/docs/advanced-features/preview-mode](https://nextjs.org/docs/advanced-features/preview-mode).

**Create APIs**

We need to create 2 APIs for preview functionality.

Firstly, we will have the `/api/preview`, which adds preview mode cookies to your site. After successfully implementing this API, calls to it will add `__prerender_bypass` and `__next_preview_data` cookies.


![cookies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fas86759uq4spzd7ix37.png)


Open the `preview.js` file and add the following codes:

```
    // src/pages/api/preview.js
    
    import { getPost } from 'lib/api'
    
    export default async function handler(req, res) {
    # Check if the user is requesting with valid token
     if (req.query.secret !== (process.env.STRAPI_PREVIEW_SECRET)) {
       return res.status(401).json({ message: "Invalid token" });
     }
    
    # Make sure the blog post actiually exits
     const slug = req.query.slug
     const blogData = await getPost(slug)
     if (!blogData) {
       return res.status(401).json({ message: "Invalid slug" });
     }
    # If all good we set preview cookies
    # And we redirect the user to the preview version of the blog post
     res.setPreviewData({});
    
     res.writeHead(307, { Location: `/blogs/${slug}` });
     res.end();
    };
```

Secondly, we will create the last API `/api/exit-preview`. To return to SSG mode, we need to remove those cookies from our browser. This API will take care of that.

```
    // src/pages/api/exit-preview.js
    
    export default async function exit(_, res) {
        // Exit the current user from "Preview Mode". This function accepts no args.
        res.clearPreviewData()
        // Redirect the user back to the index page.
        res.writeHead(307, { Location: "/" })
        res.end()
      }
```

### Fetch `live` or `preview` content from Strapi

The last step is to fetch data from Strapi based on preview mode. Before we start fetching and displaying the data from our Strapi, let's look at how to detect preview mode.

The following `context` object has a `preview` attribute that returns `true` or `false`
How we use it on our page. In the `getStaticProps` function of your page, you can use `context` as an argument, and based on the status of Preview, we fetch live or preview content from Strapi.

```
    // src/pages/blogs/[slug].js
    
    export const getStaticProps = async (context) => {
        const previewMode = context.preview == false || context.preview == null ? "live" : "preview"
        const slug = context.params.slug
        const BLOG_QUERY = gql`
        query($slug: String, $previewMode: String){
          blogs(where: {slug: $slug, _publicationState: $previewMode}){
            id
            title
            subtitle
            description
            published
            slug
            image{
              url
            }
            author {
              name
              photo {
                url
              }
            }
            content
          }
        }
        `
        const { data:blogData } = await apolloClient.query({
          query: BLOG_QUERY,
          variables: {
            slug,
            previewMode
          },
          preview: context.preview,
        })
```

As you see, we have `_publicationState` condition in our call that can be `live` or `Preview`.


### How it looks

We changed "Build a Next.js Blog with Strapi and use preview and image component!" Blog title to "Build a Next.js Blog with Strapi - Draft," but I didn't build the site again, let's see how it looks like.


![](https://www.dropbox.com/s/w74frtne9zvr5uv/preview.gif?raw=1)



### Conclusion

In this article, we learned how to leverage the power of Next.js previews and images optimization with Strapi content.

We hope this tutorial has helped teach you how easy it is to integrate these tools into your application. It is more important than ever to create an exceptional digital experience for your customers in today's world. 

The Blog is hosted at Vercel: [https://nextjs-blog-rose-eta.vercel.app](https://nextjs-blog-rose-eta.vercel.app)
You can find the source code at [https://github.com/amirtds/blog](https://github.com/amirtds/blog)

With Strapi and Next.js, you can do just that! We saw how these two powerful technologies work together seamlessly to help you build a blog app with previews and optimized images quickly and if you have any questions, feel free to contact me at amirtds@gmail.com or [my twitter](https://twitter.com/amirtds).
