Quick Start

Introduction

Welcome to SabaccUI! This guide will help you get started with SabaccUI in minutes. By following these steps, you'll be able to create a new project, add bloks, and customize your application with ease.

Prerequisites

You'll need both a SabaccUI and Storyblok account to get started. If you don't have accounts yet, follow the instructions below to create them.

Create a SabaccUI account

Before you begin, you'll need to create a SabaccUI account. This account will allow you to access the SabaccUI CLI and manage your projects.

Account Setup

Via CLI

You can create a SabaccUI account using the CLI:

sabaccui register

Follow the on-screen instructions to complete the registration process. Enter your email address and create a password when prompted.

Purchase a License

Once you've created your account, you'll need to purchase a SabaccUI license key to access the full features of the library.

1. Go to the SabaccUI website.
2. Choose a license tier that suits your needs: Personal, Team, or Enterprise.
3. Click on the "Get Started" button of the desired tier and follow the instructions to complete your purchase.
4. Once you've completed the purchase, you'll receive your license key(s) via email.

Activate Your License

To activate your SabaccUI license key, follow these steps:

1. Open your terminal and run the following command:

sabaccui license

2. Enter your license key when prompted.

Create a Storyblok account

You'll also need a Storyblok account to manage your content and bloks. If you don't have an account yet, follow these steps to create one:

Account Setup

1. Go to the Storyblok Signup.
2. Create an account by entering your email address and a password.

Setup a space

Once you've created your account, you'll need to set up an empty space to manage your content. Follow these steps to create a new space:

1. Log in to your Storyblok account.
2. Go to the My Spaces section.
3. Click on the "Add Space" button.
4. Select the plan that suits your needs. You can use their free community plan to get started.

Install the CLI

To install the Storyblok CLI, run the following command:

npm install -g storyblok

You have to install the Storyblok CLI globally to use it in your terminal, so the SabaccUI CLI can interact with it.

Login to Storyblok CLI

To log in to the Storyblok CLI, run the following command:

storyblok login

Follow the on-screen instructions to complete the login process.

Create a new project

Now that you have both SabaccUI and Storyblok accounts set up, you can create a new project using the SabaccUI CLI.

To create a new project, run the following command:

sabaccui init my-project <template>
cd my-project

During the project initialization, you'll be prompted to enter your Storyblok space ID and an API token. You can find both in the Storyblok dashboard under the space settings.

This will create a new project in the my-project directory and install its dependencies. Replace <template> with the desired template for your project.

Note: You can list all available templates by running the following command:

sabaccui templates

Add SSL certificate to the project

This step is required to serve your local development environment with HTTPS. As the Storyblok Visual Editor is served over HTTPS, you need to have a SSL certificate in your project to access it.

If you don't have a SSL certificate yet, you can follow these instructions to create one.

Start the development server

To start the development server (with SSL), run the following command:

bun run dev-ssl

Add your first blok

Now that your project is up and running, you can add your first blok to the project.

To add a blok, run the following command:

sabaccui blok add <blok>

Replace <blok> with the desired blok type. You can list all available bloks by running the following command:

sabaccui bloks