Welcome to the guide for setting up an Astro website using Bookshop. Through this guide, we'll cover what Bookshop is and what it brings to the table, how to integrate it into an Astro website, and how to connect everything together to produce a fully static website that can be edited live in the browser using CloudCannon.
Bookshop added experimental support for Astro in version 3.6.0.
Please open an issue on the Bookshop GitHub repository if you encounter any trouble when integrating your site.
What is Bookshop?#
Bookshop is a collection of tooling that provides a component development workflow for static websites, and aids in the creation of a page-building interface in the CloudCannon CMS.
Bookshop is fully open-source and is available on GitHub at CloudCannon/bookshop. As a tool that integrates into your codebase, we want to ensure you aren't vendor-locked to our platform. Sites built using Bookshop remain fully portable and can be built or hosted anywhere on the web.
What does Bookshop bring to Astro?#
For developers working locally, Bookshop first provides an Astro integration that is used to live update your components. When dealing with your components, this integration provides a bookshop:live directive to mark a component for live editing. The bookshop:live directive can be added to any component referenced from an Astro template. This looks like:
<Hello bookshop:live text="My title text" />
We'll cover more about components in another chapter; for now, the important thing to know is that Bookshop components can be written using either Astro or React and, in most cases, can directly use your existing templating.
Another tool that Bookshop provides is the Bookshop Component Browser. This allows you to view and test your components locally without adding them to pages on your site.
What does Bookshop bring to CloudCannon?#
Once you have connected your site to CloudCannon, Bookshop's live editing features use your component files to generate CloudCannon configuration as part of your site build. Under the hood Bookshop creates CloudCannon Structures for each of your components, allowing your team to add and remove component objects in the CMS.
Next, when your site is loaded into CloudCannon's Visual Editor, an additional Bookshop script is loaded. This script loads your component files into the browser, alongside a Bookshop engine that understands Astro and React components. Using this, Bookshop can subscribe to data in the CMS using the CloudCannon Visual Data Preview API to render changes to your components live on the page.
Finally, after rendering components, the Bookshop script tags them with CloudCannon Visual Data Bindings. These data bindings allow you to click on elements directly in the Visual Editor and add, edit, or rearrange them visually.