Getting Started

Blutui Cassettes are like a version control system for the front-end logic of your website. They provide a simple and efficient way to manage and switch between different website designs for a single project. This is particularly useful for any scenario where you need a distinct look and feel for your website without creating an entirely new one.

How do Cassettes Work?

Every Blutui Cassette contains a public and views directory. These directories contain the front-end logic of your project. When you use the courier push command, these changes are uploaded to the Cassette configured within the courier.json file.

The Cassette to which your changes are pushed and pulled from is determined by the cassette attribute in your courier.json file. By changing this attribute, you can direct your development efforts to a different Cassette, allowing you to work on multiple versions of your site simultaneously.

{
  "$schema": "https://dev.blutui.com/schemas/v1/schema.json",
  "cassette": "[cassette-name]",
  "handle": "[project-handle]"
}

Typical Cassette Workflow

You can manage your Cassettes through the Blutui Agency Console. Here's a typical workflow:

1. Duplicate a Cassette: To create a new version of your project (e.g., a Christmas theme), you can duplicate an existing Cassette from the Agency Console. This creates a new, identical copy of your project's front-end logic.

2. Switch Cassettes Locally: Update the cassette attribute in your courier.json config file to the name of the Cassette you want to develop. Now, any changes you make and push will be applied to this new version.

3. Develop and Test: You can now develop your new project version (e.g., add Christmas-specific styles, layouts, and content) without affecting your live website.

4. Go Live: Once you are satisfied with the new Cassette, you can make it the live version of your site. This is done in the Agency console by selecting the Active Cassette from the dropdown list and clicking the Update button.

Restrictions on the Active Cassette

Once you set a Cassette to Active, it is recommended that you develop any new features or changes on a new Cassette created by duplicating the active Cassette. This ensures the production version of the project is not affected by development changes.

While you can override this and develop on the active Cassette directly, it is not recommended. When you attempt to push to an active cassette, Courier will show a warning similar to:

The "[cassette-name]" is currently active. You can not push to an active Cassette.

If you're feeling a little adventurous you can use the "--allow-active" flag to bypass this check.

To bypass this restriction, you can add the --allow-active flag to your courier push command:

courier push --allow-active

Example using Cassettes

As an example, imagine you have a project with a banner section: one for the main site and another for a Christmas version.

Locally, in your courier.json file, you set which Cassette you want to develop by updating the cassette attribute.

You can learn how to run your project locally and push changes here Running a project

Below is an example where each Cassette has a slightly different version of the banner section.

Main Cassette

{
  "$schema": "https://dev.blutui.com/schemas/v1/schema.json",
  "cassette": "10_main",
  "handle": "[project-handle]"
}

Christmas Cassette

{
  "$schema": "https://dev.blutui.com/schemas/v1/schema.json",
  "cassette": "21_christmas",
  "handle": "[project-handle]"
}

Once you have developed the Christmas version on a separate Cassette, using the Agency Console you can quickly switch the active Cassette to make the change live.