How to schedule content with Nuxt.js and Storyblok using Releases

Contents

Storyblok is a really cool Headless CMS with lots of great features. One awesome feature is being able to make scheduled content releases. This is useful for product launches or new campaigns.

There are two great benefits of releases:

  • Being able to do scheduled releases at a given time or manually

  • Deploy changes from all of your website together

You can find and install the Releases functionality in your Storyblok Apps menu.

Steps to install the Releases app

  1. Click on the ‘Apps’ item in your sidebar

Link to Storyblok space App directory.

2. Find the Releases app on the list.

Releases app in the App directory.

3. Once clicked, it will show a preview and a description of the App functionality.

Detail screen of the Releases App.

The only requirement is to have the Storyblok Premium plan. You can install it by clicking the ‘Install’ button.

Prepare your code

If you are using Storyblok’s Visual Editor for previewing your content and the Storyblok Nuxt boilerplate project, you will find that the visual preview doesn’t represent your Release changes.

The description of Storyblok Releases even mentions the implementation needed.

Note saying: Be sure to adapt your api calls to include the

The Storyblok Nuxt boilerplate doesn’t include an implementation out of the box. You can implement the Releases into your project by following these steps.

You will need to extend your function of loading Storyblok content in your project. If you are using the boilerplate, you can change this in the /pages/_.vue file the following way.

...
const loadData = function({api, cacheVersion, errorCallback, version, path, releaseId}) {
  return api.get(`cdn/stories/${path}`, {
    version: version,
    from_release: releaseId,
    cv: cacheVersion
  }
}
...
const releaseIdRegex =
  new RegExp('_storyblok_release=(\\d+)')
const releaseMatchResult =
  releaseIdRegex.exec(context.route.fullPath)
...
return loadData({
  version: version,
  api: context.app.$storyapi,
  cacheVersion: context.store.state.cacheVersion,
  errorCallback: context.error,
  path: path,
  releaseId: releaseMatchResult ? releaseMatchResult[1] : null
})
Changes made in boilertemplate.

We are adding the from_release object parameter to Storyblok’s API .get call, where we are requesting the current story. To get the Release ID from the path of the given story, we’ve created a Regex pattern.

Storyblok adds hidden URL parameters to your story URL, which you cannot see in your Visual Editor. Upon opening stories in a new window, you will see the full path of the story with every parameter, with _storyblok_release included in the case of using the Releases app. The fallback value for the from_release attribute is null if there isn’t such a URL param.

Creating a new release in Storyblok

Once you install it into your space, you will be able to set up your content releases as separate tabs in your Content board.

  1. Click the “+ New release” button

How to create new release in Storyblok UI.

2. In the popup window you can set the Name and optional schedule time of the release, which you can set later on as well.

New Release popup.

3. After creating a Release version, you will see your new Release as a new option in the dropdown on mouse hover.

Selection of the release in Storyblok UI.

4. Upon clicking the release you have additional options for the specific Release.

Detail of changes made in release bundle.

When you change the content on a page and save the changes, you will see a new releases label on the changed content entries. If you want, you can filter out only changed items by checking the “Show only items from this release” option.

Label showing that the story was edited in release.

5. To approve your changes for release, you need to do one extra step. In the content page, click on the “Schedule” button in the top-right corner after saving your newest changes.

Confirm and schedule changes of the story.

Upon scheduling your content, the indicator changes its color to cyan as well, thus indicating content scheduled for release.

Label showing the scheduled changes in the story.

In addition, you can double-check the status in the list of contents.

Visualisation of the scheduled changes in the content three.

Bonus: As we mentioned before, you can set a schedule for your release after creating. You need to click the Pencil icon on your release, which opens the popup for editing the schedule.

How to edit existing release.

Conclusion

By implementing these changes, your Visual Editor will be able to render the correct Release version of your content. Scheduled content is a handy addition to an already great CMS. We hope you will implement Releases into your Storyblok project with the help of this guide.

SourceURL
Setup of the Releases apphttps://www.storyblok.com/docs/setup-releases
Releases Apphttps://www.storyblok.com/apps/releases_only

About the author

Gary Siladi

Gary Siladi

A frontend JS developer who teaches and writes. Currently working as a Senior Web Developer at twim GmbH, an enterprise consultancy for digital transformation. Interested in modern UX. Jamstack enthusiast, promoting Storyblok.