Getting set up

Building a site with Bookshop requires a specific directory structure that lives alongside your website, and an Astro integration to discover and use components.

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.