Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Folder Structure - Cloud Rendering Service

IMPORTANT:

This folder structure - cloud rendering service is OUTDATED and not offered anymore.

There’s a lot going on in your rendering service project folder, so let’s makes some sense of it. If you've started yet - you can follow this guide with our Quickstart Theme directly on Github.

my-project/config.json

Since the fastest way to start with a Storyblok Cloud Rendering Service project is with the CLI you will start with a fully configured Setup out of the box - if you want to start by hand this is the configuration explained quickly:

{
  "storyblok": {
    "PRIVATE_MANAGEMENT_TOKEN": "",
    "spaceId": "INSERT_SPACE_ID", // insert your Space id.
    "domain": "INSERT_YOUR_DOMAIN", // insert your Rendering Service Subdomain (*.me.storyblok.com)
    "themeToken": "INSERT_TOKEN", // insert theme token (do not publically share this)
    "environment": "dev", // default environment - you can switch this to `live` or deploy into production 
    "debug": false // debug mode
  }
}

my-project/token.js and my-project/_token.js

Rename the _token.js to token.js and replace the "INSERT_TOKEN" with your theme token from your spaces dashboard. If you've started your project with the CLI - you're already ready to go.

my-project/source

This is the place where your CSS and JS are located. The default setup directly supports SCSS but you're of course free to change this at any point of time. By default, we've structured all our projects this way and create an SCSS file for each component we create.

my-project/views

This is the place where your HTML (Liquid) is located. There are some base liquid files so you can start even faster.

  • page.liqud: Default base for all your pages. The first root component will be included here.
  • 404.liquid: Will be shown if there is no content entry defined by the provided slug.
  • manifest.liquid: Look at it as a manifest.json with superpowers. You will be able to load any content of Storyblok right there.
  • service-worker.liquid: Default UpUp Service Worker - change it as you want.
  • /components/: The place where all your components will be located. The kickstart will guide you through the basics.

my-project/package.json

This document is all you need to know about what's required in your package.json file. It must be actual JSON, not just a JavaScript object literal. In the "script" node of this JSON, you can see tasks we've predefined for you.

my-project/gulpfile.babel.js

This is the place where the majority of tasks are currently defined. You can remove gulp and change to webpack or anything else if you need. Make sure you don't drop the gulp-blok task - otherwise your newly created components won't be uploaded to the Rendering Service.