slice-machine-ui - v1.0
Upgrade to version 1.0
Are you on a version of slice-machine-ui below 1.0? Follow our migration guide to upgrade.
slice-machine-ui v1.0 requires an adapter (e.g. @slicemachine/adapter-next, @slicemachine/adapter-nuxt) to work with your framework.
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:
1. Create a new Prismic repository from the Prismic dashboard.
2. In your project, add a slicemachine script to your package.json:
{
scripts: {
"slicemachine": "start-slicemachine"
}
}
3. Create a slicemachine.config.json file at the root of your project and paste in this information:
{
"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.
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").
Was this article helpful?
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.