DEV Community

Jason Clark
Jason Clark

Posted on

Add Prismic Slice Machine to an NX powered monorepo


If you're a Prismic CMS user and also use NX to manage a monorepo, getting Slice Machine up and running using the npx @slicemachine/init command frankly just will not work. So, I went through the steps to actually make it work in our Chatbooks monorepo, and wanted to share what I did.

Add Dependencies and setup package.json

First, we use yarn, but you could easily replace yarn with npm in most scenarios below. We need the slice-machine dependencies installed.

yarn add @prismicio/slice-simulator-react next-slicezone slice-machine-ui

npx nx g @nrwl/next:application slice-machine
Enter fullscreen mode Exit fullscreen mode

In package.json, add a command to run slice-machine:

"slicemachine": "start-slicemachine"
Enter fullscreen mode Exit fullscreen mode

Setup sm.json

To initialize your slicemachine files, run npx sm init and follow the prompts. I attempted to use sm init and it returned an error, so I just manually created the sm.json file as below.

Create an sm.json file in the root of your NX repo.

  "apiEndpoint": "https://{{your_repo_name}}",
  "libraries": ["@/apps/slice-machine/slices"],
  "_latest": "0.1.0",
  "localSliceSimulatorURL": "http://localhost:4200/slice-simulator"
Enter fullscreen mode Exit fullscreen mode

Now, you should be able to run yarn slicemachine and it will output the following:

yarn slicemachine output

Keep in mind that Slice Machine runs independently from NX, so the port number shown above is valid. Visit http://localhost:9999 in your browser and you should see the Slice Machine UI.

Create your first slice

In order to make the Slice Simulator setup go a little more smoothly, you should create a base initial slice. On the Slice Machine UI, click the "Create my first Slice" button, as seen below:

Create First Slice Image

I'd recommend you just name it something like "BaseSlice" so you can refer back to it in the future. Once you enter the name and hit Save, Slice Machine will auto-generate the code for it in /apps/slice-machine/slices.

Enable Slice Simulator

To enable Slice Simulator, you can follow the instructions here:, but remember that the slice-simulator.jsx file should go in the /apps/slice-machine/pages folder.

Also, you’ll need to update your path to /.slicemachine/libraries-state.json to ../../../.slicemachine/libraries-state.json

(Aside: even if you use TypeScript everywhere else, it’s best to keep this file as a .jsx rather than a .tsx because the types will not resolve correctly without a lot of lifting, and the reality is, slice-simulator is not really something you have to worry about once it’s created.)


While getting Slice Machine up and running isn't as simple as a single command when using NX, it's still pretty trivial and just requires a little bit of reworking. Hopefully, this will help you down the path, if you need to add Slice Machine to an NX repo.

Top comments (0)