Backpack Site Builder

The backpack site builder combines our backpack ui components and assets, backpack storyblok plugins and more into an easy to use website builder for storyblok.

Prerequisites

Ensure you have the following packages and tools:

• Node.js (18.X.X). We recommend using a node version manager, like fnm.
• yarn@1.22.19
• A GH_PACKAGES_TOKEN for ef-global packages (you will need to be added to our Github, reach out if you aren't). Setup guide: https://vimeo.com/777376209 (opens in a new tab)
• A newly created Storyblok space, created with an account on EF's SSO (with your EF email address).
• An OAuth token for your storyblok account. Guide: https://vimeo.com/777380084 (opens in a new tab)
• The Sb-Mig companion tool (beta) we use for syncing. npm install sb-mig@beta --global

Set up with create-backpack-app

Once you have all of the above, the setup process is very easy:

yarn create backpack-app

To start, open a new terminal window, and run:

yarn create backpack-app

You'll be prompted to name your project:

What will your project be called?

Give it a project name, and select the template

Storyblok NextJS Backpack Boilerplate

You'll be prompted to run auto configuration:

Do you want to run auto configuration (packages install, syncing components, initializing project)?

Now you'll be asked which data you would like to sync automatically.

You should select components, datasources, content, roles (select with spacebar). Then press enter.

Now add the spaceId of your new space and hit enter.

And finally, add your oauthToken.

Now when you hit enter, the CLI should start doing all the needed work to generate your new project.

Press enter, and the project will install.

The installation process will take around 4-6 minutes so let’s summarize what is actually happening:

• Selected template (Storyblok NextJS Backpack Boilerplate) is cloned to a new folder with your project name.
• All template dependencies (including @ef-global/backpack library) are installed.
• sb-mig tool initializes the storyblok project, by:
  • creating local environment variables based on the spaceId and oauthToken passed, and generating an .env file
  • generating local https certificate for Storyblok V2 to work
  • preparing a preview url and preview secret token, and updating your space with it
  • syncing the full library of backpack components
  • syncing datasources
  • syncing content
  • syncing assets

After all this completes we should be able to simply change directory:

and run:

First, open https://localhost:3000 (opens in a new tab), and accept the newly created certificate. You will have to bypass the browser warning about this since we are using a self-signed certificate just for local development.

After that, head on to storyblok.com (opens in a new tab), to your space content, to see the project.

At this stage you should create a git repo, add an initial commit and push the project. You now have a publishable website, albeit one without any content.