DEV Community: Silas Getachew

Importing JSON data to Storyblok using API

Silas Getachew — Wed, 01 Jun 2022 14:59:31 +0000

Using Storyblok Management API

The Storyblok Management API is organized around REST. Our API has predictable, resource-oriented URLs, and uses HTTP response codes to indicate API errors. We use built-in HTTP features, like HTTP query parameters and HTTP verbs, which are understood by off-the-shelf HTTP clients. We support cross-origin resource sharing, allowing you to interact securely with our API from a client-side web application (though you should never expose your secret API key in any public website's client-side code). JSON is returned by all API responses, including errors, although our API libraries convert responses to appropriate language-specific objects.

Stories
The stories endpoint will let you manage all content entries of your Storyblok space. You can use it to import, export or modify content.

You can create Story using REST API

Storyblok.post('spaces/606/stories/', {
  "story": {
    "name": "Story Name",
    "slug": "story-name",
    "content": {
      "component": "page",
      "body": []
    }
  },
  "publish": 1
}).then(response => {
  console.log(response)
}).catch(error => { 
  console.log(error)
})

For example Above coding using Javascript.

You can also do with CURL easily

Something like this.

curl "https://mapi.storyblok.com/v1/spaces/606/stories/" \
-X POST \
-H "Content-Type: application/json" \
-H "Authorization: YOUR_OAUTH_TOKEN" \
-d "{\"story\":{\"name\":\"Story Name\",\"slug\":\"story-name\",\"content\":{\"component\":\"page\",\"body\":[]}},\"publish\":1}"

You also create, update, delete components. E.g this below to create component in Storyblok using API

Storyblok.post('spaces/656/components/', {
  "component": {
    "name": "teaser",
    "display_name": "Teaser",
    "schema": {
      "title": {
        "type": "text",
        "pos": 0
      },
      "image": {
        "type": "image",
        "pos": 1
      }
    },
    "is_root": false,
    "is_nestable": true
  }
}).then(response => {
  console.log(response)
}).catch(error => { 
  console.log(error)
})

Let's read JSON file and import to Storyblok.

I use nodejs for import, So First make sure to install the package
yarn add storyblok-js-client or npm i storyblok-js-client

then
const StoryblokClient = require('storyblok-js-client')

// Initialize the client with the oauth token
const Storyblok = new StoryblokClient({
  oauthToken: '<yourPersonalToken>', // can be found in your My account section
})

Add Storyblok config

const config = {
  spaceId: '<SpaceId', // can be found in the space settings.
  parentFolder: '<parentFolder>', // navigate into your folder and copy the id from the URL at app.storyblok.com <- last one
}

Then

Read the json file using fs module.
make sure to createReadStream incase the json file is large.

const data = fs.createReadStream('data.json')

data
  .on('data', function (data) {{
     data = JSON.parse(data)
     Object.entries(data).forEach(([key, value]) => {
     const story = {
        slug:value.slug,
        name: value.name,
        parent_id: config.parentFolder,
        content: {
          component: 'partner',
          name: value.name,
          description: value.content.en,
          description__i18n__de: value.content.de // if you have i18n.
       }



   Storyblok.post(`spaces/${config.spaceId}/stories/`, {
        story,
      })
        .then((res) => {
          console.log(`Success: ${res.data.story.name} was created.`)
        })
        .catch((err) => {
          console.log(`Error: ${err}`)
        })
    })
  })
})

How to Deploy NuxtJS to S3 through cloudfront?

Silas Getachew — Wed, 01 Jun 2022 14:44:20 +0000

Static Site using Nuxt.js with Storyblok CMS

Silas Getachew — Wed, 25 May 2022 15:54:18 +0000

You want to build fast and secure website?

This guide show how to develop full-blown website using Nuxt.js, Storyblok and Tailwind CSS.

Introduction

**What is Jamstack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

Better Performance
Higher Security
Cheaper, Easier Scaling
Better Developer Experience

Site Generators

**Nuxt.js **is a free and open source JavaScript library based on Vue.js,

BTW: Easy to learn. Easy to master, Zero Configuration, SEO friendly

Headless CMS

A headless CMS is any type of back-end content management system where the content repository “body” is separated or decoupled from the presentation layer “head.” Content that is housed in a headless CMS is delivered via APIs for seamless display across different devices.

StoryBlok

The first component-based headless CMS with Visual Editor.

Let's Start coding

Installation

Requirement

Nuxt.js v2.14.0
Nodejs v12.3.1
Npm v6.9.0

yarn create nuxt-app my-nuxt-app // npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
yarn dev // npm run dev

I prefer yarn.

Install Storyblok package.

yarn add @storyblok/nuxt //for nuxt v3
yarn add  @storyblok/nuxt-2 //for nuxt-2

Next step is add to nuxt module in nuxt.config.js

['@storyblok/nuxt/module', { accessToken: process.env.YOUR_STORYBLOK_API_KEY }],

To get this stroyblok API key get to your space in Storyblok and copy the preview api key.

*From Storyblok side
*

Create Space in Storyblok
Create component
Define component schema

In the Code(Nuxt.js)

Create Page component in components/Page.vue

<template>
  <div
    v-editable="blok"
    class="px-6">
    <component
      v-for="blok in blok.body"
      :key="blok._uid"
      :blok="blok"
      :is="blok.component" />
  </div>
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      required: true
    }
  }
}
</script>

To make access component to globaly
Add component to plugins/components.js

import Page from '~/components/Page.vue'

Vue.component('Page', Page)

Then add this plugin to nuxt.config

plugins: ['~/plugins/components']

Let's create index page and fetch the content from Storyblok

<template>
  <div>
    <component :is="story.content.component" v-if="story.content.component" :key="story.content._uid" :blok="story.content" />
  </div>
</template>

<script>
import { useStoryblokBridge } from '@storyblok/nuxt'

export default {
  middleware: 'fetchGlobalLayout',
  asyncData: (context) => {
    const version = context.query._storyblok || context.isDev ? 'draft' : 'published'

    const language = context.app.i18n.locale // this i18n, i will get back this. 

    return context.app.$storyapi
      .get('cdn/stories/home', {
        language,
        version,
      })
      .then((res) => {
        return res.data
      })
      .catch((res) => {
        if (!res.response) {
          context.error({
            statusCode: 404,
            message: 'Failed to receive content from api',
          })
        } else {
          context.error({
            statusCode: res.response.status,
            message: res.response.data,
          })
        }
      })
  },

  mounted() {
    useStoryblokBridge(this.story.id, (newStory) => (this.story = newStory))
  },
}
</script>

To be continued

How to enhance performance SQL join query?

Silas Getachew — Fri, 18 Dec 2020 06:50:17 +0000