storyblok / gatsby-storyblok-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

37.0 6.0 29.0 3.2 MB

Gatsby starter template with Storyblok's headless cms and true preview

Home Page: https://www.storyblok.com/tp/add-a-headless-cms-to-gatsby-5-minutes

License: BSD Zero Clause License

JavaScript 87.35% TypeScript 12.65%

gatsbyjs storyblok reactjs demo dx devrel

gatsby-storyblok-boilerplate's Introduction

Welcome to Storyblok

Storyblok is a visual CMS that works with any framework. Integrate with any app, frontend, or framework. Publish anywhere with an API-first backend. Storyblok’s industry-leading Visual Editor makes it easy for marketing teams to independently create, edit, and collaborate.

Getting Started

Kickstart a new project

Are you eager to dive into coding? Follow these steps to kickstart a new project with Storyblok and your framework of choice, and get started in just a few minutes.

Ultimate Tutorials

Are you looking for a hands-on, step-by-step tutorial? Our Ultimate Tutorial Series has you covered. It provides comprehensive instructions on building a complete, multilingual website using Storyblok and your framework of choice from start to finish.

💡 Try it out for free

Why Storyblok?

Work with any technology: Storyblok’s headless, API-first CMS architecture empowers developers to work with any technology and integrate with any third-party solution.
Scale without limits: Storyblok monitors your applications and automatically scales performance to ensure optimal efficiency and performance.
Flexible data schemas: Storyblok's component-based approach gives you full control over your content structure. You can define your own custom data models with nestable components that can be reused across all your projects.
Publish faster: Marketing and content teams work faster with a Visual Editor enabling them to work independently. No more content tickets in your backlog.
Enterprise security: Ensure data security using one of the most secure, enterprise-grade CMSs available on the market. Storyblok is ISO 27001 certified.
Deliver Better Experiences: Personalize content experiences for different markets, languages, or audience segments using Storyblok's built-in localization tools, or integrate with any third-party solution through API-first integrations.

How it works

A Headless CMS is a back-end-only content management system (CMS) built from the ground up as a content repository that makes content accessible via APIs.

A basic headless CMS Architecture:

Storyblok CMS architecture:

Key Features

Composable Architecture:

APIs: Work with any frontend or third-party integration with GraphQL, REST, and Management API.
Flexible backend: As a headless content management system, Storyblok can manage and serve content for any app or site.
Apps: Add extra functionalities to your space through a suite of custom apps available for free on the Storyblok App Directory, or build your own.
Composable components: Easily define new nestable blocks (such as a hero, grid, or button) or content type blocks (such as an article, landing page, or product page). Create once, reuse everywhere. The limit is your imagination. Learn more.

Streamline Workflows:

Visual editing interface: Storyblok enables non-technical users to build and edit JSON structures with an easy-to-use visual interface. Learn more.
Component Library: Find, access, and edit components directly from the Visual Editor making it easier for teams to collaborate.
Collaboration workflows: Publish faster with inclusive collaboration workflows that give anyone on the team a simple way to make a suggestion or take action.

Audience Experiences:

Image Service: Make apps and websites faster by Transforming, optimizing, and caching images in a CDN. Learn more.
Internationalization: Create personalized content experiences via built-in folder-level and field-level internationalization. Learn more.
Omnichannel Experiences: Storyblok’s headless architecture enables developers to publish content across any digital channel via APIs. Learn more.

Resources

Tutorials
FAQs
Discord
Community
Learning Hub
Clients
SDKs
- JavaScript SDK
- React SDK
- Vue SDK
- Nuxt SDK
- Svelte SDK
- Astro SDK
- Gatsby SDK
Storyblok CLI

We are Hiring

gatsby-storyblok-boilerplate's People

Contributors

Stargazers

Watchers

gatsby-storyblok-boilerplate's Issues

upgrade to gatsby v2

will this repo be updated soon?

No matching version found for gatsby-source-storyblok@^0.2.3

After npm install i got this problem, log below

2019-04-29T09_16_25_949Z-debug.log

Error when using environment variable for token definition

I was following your tutorial, but made a modification to gatsby-config.js: I used an environment variable to define my Storyblok token. When running the develop command, I get the following error:

This dependency was not found:
⠀
* fs in ./node_modules/dotenv/lib/main.js

This is due to line 4 in pages/editor.js that imports the gatsby-config.js file. It seems that the simplest solution may be to always use an environment variable for the token and ensure it's prefixed with GATSBY_ to make it available to the client side code. I'm happy to prepare a PR for this if that approach is okay with you.

editor.js - live preview - resolveRelations on input

On initial load resolveRelations work, however the live update preview doesn't as the payload from storyblok just overwrites the state, but it wouldn't actually resolveRelations again.

sb.on("input", payload => { if (this.state.story && payload.story.id === this.state.story.id) { payload.story.content = sb.addComments( payload.story.content, payload.story.id ); this.setState({ story: payload.story }); } });

Unknown type "ImageSharpFixed" on initial run

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown type "ImageSharpFixed".

File: node_modules/gatsby-transformer-sharp/src/fragments.js:21:37

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I was walking through the tutorial and met this error. At first i thought i copied the code wrongly. I cloned the whole project, change the preview key and run 'gatsby develop' but end up seeing this error. What could be possible wrong?

Request failed with status code 401

 ERROR #11321  PLUGIN

"gatsby-source-storyblok" threw an error while running the sourceNodes lifecycle:

Request failed with status code 401



  Error: Request failed with status code 401

  - createError.js:16 createError
    [gatsby-storyblok-boilerplate]/[axios]/lib/core/createError.js:16:15

  - settle.js:17 settle
    [gatsby-storyblok-boilerplate]/[axios]/lib/core/settle.js:17:12

  - http.js:237 IncomingMessage.handleStreamEnd
    [gatsby-storyblok-boilerplate]/[axios]/lib/adapters/http.js:237:11

  - task_queues.js:77 processTicksAndRejections
    internal/process/task_queues.js:77:11

Error: Request failed with status code 401

I have tried the NextJS boilerplate also. The same thing happening, 401 error!

Pls help @onefriendaday @sebgie @NeoLegends @samuells

Cannot find module 'core-js/modules/es6.regexp.split'

Hi!
I've just cloned the repo and after i run yarn install & gatsby develop, i get the following error :

Error in "/Users/Brieuc/Sites/GITHUB/gatsby-storyblok-boilerplate/node_modules/gatsby-source-storyblok/gatsby-node.js": Cannot find module 'core-js/modules/es6.regexp.split'



  Error: Cannot find module 'core-js/modules/es6.regexp.split'
  
  - loader.js:636 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:636:15
  
  - loader.js:562 Function.Module._load
    internal/modules/cjs/loader.js:562:25
  
  - loader.js:692 Module.require
    internal/modules/cjs/loader.js:692:17
  
  - v8-compile-cache.js:159 require
    [gatsby-storyblok-boilerplate]/[v8-compile-cache]/v8-compile-cache.js:159:20
  
  - index.js:15 Object.<anonymous>
    [gatsby-storyblok-boilerplate]/[storyblok-js-client]/dist/index.js:15:1
  
  - v8-compile-cache.js:178 Module._compile
    [gatsby-storyblok-boilerplate]/[v8-compile-cache]/v8-compile-cache.js:178:30
  
  - loader.js:789 Object.Module._extensions..js
    internal/modules/cjs/loader.js:789:10
  
  - loader.js:653 Module.load
    internal/modules/cjs/loader.js:653:32
  
  - loader.js:593 tryModuleLoad
    internal/modules/cjs/loader.js:593:12
  
  - loader.js:585 Function.Module._load
    internal/modules/cjs/loader.js:585:3
  
  - loader.js:692 Module.require
    internal/modules/cjs/loader.js:692:17
  
  - v8-compile-cache.js:159 require
    [gatsby-storyblok-boilerplate]/[v8-compile-cache]/v8-compile-cache.js:159:20
  
  - gatsby-node.js:1 Object.<anonymous>
    [gatsby-storyblok-boilerplate]/[gatsby-source-storyblok]/gatsby-node.js:1:87
  
  - v8-compile-cache.js:178 Module._compile
    [gatsby-storyblok-boilerplate]/[v8-compile-cache]/v8-compile-cache.js:178:30
  
  - loader.js:789 Object.Module._extensions..js
    internal/modules/cjs/loader.js:789:10
  
  - loader.js:653 Module.load
    internal/modules/cjs/loader.js:653:32
  

not finished load plugins - 0.357s

Update Gatsby and other dependencies

Gatsby's changelog to reference.

Before the PR, you need to check if all is working.

Implement `resolve_relations` to the refactored code

Hi, I was super happy to see the migration to hooks and bridge V2.
Makes everything way easier to manage.

I did notice one thing that was previously covered, that now isn't.

Before, we had this snippet handling the relations on input change:

window.storyblok.on(['input'], (event) => {
  if (event.story && event.story.content._uid === reactComponent.state.blok._uid) {
    let commentContent = window.storyblok.addComments(event.story.content, event.story.id)
    window.storyblok.resolveRelations(event.story, sbConfig.resolveRelations, () => {
      reactComponent.setState({ blok: commentContent })
    })
  }
})

This has not been ported while refactoring:

storyblokInstance.on(['input'], (event) => {
  // live updates when editing
  if (event.story._uid === story._uid) {
    setStory(event.story)
  }
})

Here are the outputs before and now:

// Before
projects: [
  { name: "First Project", ... },
  { name: "Other Project", ... }
]

// Now
projects: ["e429d7ff-9368-436e-a3ea-449e4d70361b", "ce8c728a-5787-4f24-9f6c-4dadf2b95861"]

So we need a way to catch resolve_relations & possibly resolve_links on input change.
I'm having issues implementing this on my own, and the js-client documentation doesn't mention the functions in question.

Thanks