Folder Structure - Cloud Rendering Service

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.js

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:

{
  apiVersion: 2,
  themeId: 'INSERT_SPACE_ID', // insert your Space id.
  domain: 'INSERT_YOUR_DOMAIN', // insert your Rendering Service Subdomain (*.me.storyblok.com)
  apiKey: require('./token'), // requires the token.js with your theme token
  basePath: 'views', // you can change this to whatever your base path should be - currently we use the views folder
  environment: 'live' // default environment - you can switch this to `dev` to have a second template environment
}

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.

Documentation