slice-machine-ui - v1.0

Overview

slice-machine-ui is the core package for Prismic’s local development tool, Slice Machine.

slice-machine-ui v1.0 depends on an adapter to work with your framework. There are currently three officially-supported adapters:

Slice Machine offers an init script to take care of most boilerplate and configuration.

In your project, run this command:

npx @slicemachine/init@latest

This command will do the following:

Create a new Prismic repository or let you specify an existing one.
Add a slicemachine script to package.json.
Create an slicemachine.config.json configuration file containing your API endpoint and the location of your slice library.
Detect your framework (Next.js).
Install dependencies: @prismicio/client, @prismicio/slice-simulator-react, @prismicio/react, @prismicio/next, and slice-machine-ui.
Create a pages/slice-simulator.js|jsx|tsx file.

To manually install Slice Machine, follow these steps:

package.json

  {
    scripts: {
+     "slicemachine": "start-slicemachine"
    }
  }

Create a slicemachine.config.json file at the root of your project and paste in this information:

slicemachine.config.json

{
  "repositoryName": "example-prismic-repo",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"]
}

Update the repositoryName property to your repository name and the adapter property with your framework’s Slice Machine adapter.

slice-machine-ui locally runs a development tool called Slice Machine. Run this command to launch Slice Machine:

npm run slicemachine

This will launch Slice Machine on localhost and show the URL in your terminal. Open the URL in your browser.

The slicemachine.config.json file contains an object that contains the following properties:

`repositoryName` Required	The repository name for your repository (e.g. `"your-repo-name"`).
`libraries` Required	An array of directories where Slice Machine can find slices, relative to the project’s root director. By default, this is `["./slices"]`.
`adapter` Required	The name of the npm package to use as an adapter for your framework (e.g. `"@slicemachine/adapter-next"`, `"@slicemachine/adapter-nuxt"`).
`apiEndpoint`	The endpoint for your repository. Slice Machine automatically uses the correct API endpoint for your repository by default, based on `repositoryName`. You can override the API endpoint using this property if you are working behind a network proxy that requires a custom URL. It should use the CDN (`.cdn`) and use V2 of the API (e.g. `"https://sam-230217-next-01.prismic.io/api/v2"`).