Add Prismic Slice Machine to an NX powered monorepo

Intro

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

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

"slicemachine": "start-slicemachine"

---

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}}.prismic.io/api/v2",
  "libraries": ["@/apps/slice-machine/slices"],
  "_latest": "0.1.0",
  "localSliceSimulatorURL": "http://localhost:4200/slice-simulator"
}

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

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:

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: https://prismic.io/docs/technologies/setup-slice-simulator-nextjs, 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.)

Conclusion

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.