Building a site with Bookshop requires a specific directory structure that lives alongside your website, and an Astro integration to discover and use components.
As a useful reference, the Astro Sendit Template repository contains an example site fully integrated with visual editing. You can browse the code and file structure of the template to help solidify the concepts covered in this guide.
Prerequisites#
Bookshop requires that you have Node >= 16 installed on your machine.
Creating your Bookshop directory#
Bookshop requires that your component files live in a specific directory structure, which allows for components to be discovered automatically.
The easiest way to get started is to create a bookshop
folder containing a bookshop.config.cjs
in your site src
folder alongside the existing Astro components
directory. This way Bookshop can automatically discover components from the components
directory.
With this in mind, the basic directory structure for an Astro Bookshop site will look like this:
public/
src/
├─ bookshop/
│ └─ bookshop.config.cjs
├─ components/
├─ layouts/
└─ pages/
astro.config.mjs
Inside your bookshop.config.cjs
add the following content:
// Standard bookshop configuration
module.exports = {
engines: {
"@bookshop/astro-engine": {}
}
}
This file houses the configuration for your Bookshop project. In this case, we configure Bookshop to use the @bookshop/astro-engine
package for any live component rendering.
Connecting Bookshop to Astro#
To connect Bookshop and Astro, install the @bookshop/astro-bookshop
integration from npm:
npm i --save-exact @bookshop/astro-bookshop
yarn add --exact @bookshop/astro-bookshop
Within your Astro config, import this integration and add it to your Astro config.
import { defineConfig } from 'astro/config';
import bookshop from '@bookshop/astro-bookshop';
export default defineConfig({
// ...
integrations: [bookshop()]
});
Now that you have Bookshop installed and your Astro site can access it, we can look at creating and using components.