Updating EF Global Backpack and Running Migrations for Site Builder

Today, we're going to delve into the process of updating EF Global Backpack and running the necessary migrations if you're using Storyblok site builder, also known as the Backpack site builder.

Updating EF Global Backpack

First things first, let's talk about updating the EF Global Backpack. In the root of your project folder, run the yarn outdated command to check the current version of Backpack and whether an update is needed. In our case, we had Backpack version 1.4.0 installed and needed to update it to 1.5.0. This can be done simply by running the command yarn add @ef-global/backpack@latest.

Running Migrations in Storyblok

After updating the Backpack, it's time to run the migrations in Storyblok. In our test project, we focused on two fields in the page -> section -> flex layout component - the transitionsOnEnter field and the hide field.

Transitions on Enter Field

The transitionsOnEnter field was initially a simple select option, allowing us to enable or disable the transition. However, to improve the user interface, we decided to change this field into a toggle, similar to the hide field.

Hide Field

The hide field was also updated. We improved the icons and changed the field name to visibility to better reflect its functionality. This field is now available in every component, allowing users to hide and show it as needed.

Syncing Components and Running Migrations

Back in the terminal, after updating to the latest version of Backpack, we need to sync components. To do this, run sb-mig sync components --all to sync all the component schemas. After this step, we'll sync the stories related to the schema and migrate the content to map to the new schema.

Next, run the sb-mig migrations recognize command. This command reads the package.json to get the current version of Backpack. It will then provide the commands to run the necessary migrations.

After running the migrations, you can see the changes in the Storyblok space. The transitionsOnEnter field has been changed to a toggle, and the hide field has been renamed to visibility. The data selected before the migration is also preserved.

Conclusion

That's all for today's tutorial on how to update EF Global Backpack and run migrations. Remember, these steps are only necessary for those using the site builder. If you're using the Backpack library without story block mapping and are only using React components or CSS files, you don't need to run these migrations.

Stay tuned for more tech updates and tutorials. Until next time, happy coding!