Developers / slice-machine-ui

slice-machine-ui - v1.0

Overview

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

Upgrade to version 1.0

Are you on a version of slice-machine-ui below 1.0? Follow our migration guide to upgrade.

Dependencies and requirements

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

Installation

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

init script

In your project, run this command:

Copy
npx @slicemachine/init@latest

This command will do the following:

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

Manual install

To manually install Slice Machine, follow these steps:

1. Create a new Prismic repository from the Prismic dashboard.

2. In your project, add a slicemachine script to your package.json:

package.json
Copy
  {
    scripts: {
     "slicemachine": "start-slicemachine"
    }
  }

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

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

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

Usage

Launch Slice Machine

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

Copy
npm run slicemachine

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

Configure slicemachine.config.json

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").

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.