Add Prismic Slice Machine to an NX powered monorepo
Tags: prismic, nextjs, nx, monorepo
Published: 2022-03-07 18:17:26

## 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.

```bash
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:

```bash
"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.

```json
{
  "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:


![yarn slicemachine output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l76i60lsj164tchp3j1e.png)

Keep in mind that Slice Machine runs independently from NX, so the port number shown above is valid. Visit [http://localhost:9999](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zoywor9i5y4grxaha9zk.png)

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](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.