Slicemachine in monorepo

Developing with Prismic
1

Hello,

We are planning on moving to a monorepo approach — Nx — for our marketing sites. Any time we want to start Slicemachine for a different site, we have to edit sm.json to change the apiEndpoint and libraries path.

Are there any solutions for this? For example: the ability to pass a flag to start-slicemachine to specify the path to sm.json.

Thanks!

————

Example

File structure:

apps/
  site-1/
    slices/
    sm.json
  site-2/
    slices/
    sm.json
  site-3/
    slices/
    sm.json

npm run slicemachine -- --path=./site-2/sm.json

3

Hello @jerry.nummi, thanks for reaching out. I'm not familiar with the monorepo environment but from what I can see online it's a strategy to structure your project that isn't fixed to one technology.

You should make sure that the command line is pointing to the correct location in your machine when you run the npm run slicemachine command. So if you wanna run site-1 your console should be in apps > site-1 and so on.

5

The issue I am running into is Nx has one package.json file.

/
  package.json
  apps/
    site-1/
    site-2/
      slices/
      customSlices/
      ...
    site-3/

$ cd apps/site-1; start-slicemachine
`[slice-machine] An unexpected error occurred. Exiting...
Full error:  Error: [api/env]: Unrecoverable error. Could not find package.json. Exiting..
7

Hey there, I asked around and our DevX team also recommends trating each app/site as its own Slice Machine installation. Here are examples of how to initiate the project with Yarn, pnpm, or npm 7/8.

You can target a specific app from the root level, like this:

# Yarn: 
yarn workspace site-1 slicemachine 

# pnpm: 
pnpm -F site-1 slicemachine 

# npm 7/8: 
npm -w site-1 slicemachine

Then the other way to do this is to cd into an app and run npm run slicemachine, as if it were not in a monorepo.

8

I have a solution at the moment that isn't ideal but allows me to keep moving forward:

apps/
  site-1/
    package.json
    project.json
    sm.json
    slices/
  site-2/
    ...
  site-3/
    ...

site-1/package.json

This is the hack because Nx allows you to have one package.json at the root but the Slicemachine start script is expecting package.json to be in the same current working directory. (this script I believe)

{
  "devDependencies": {
    "next": "12.x"
  }
}

site-1/project.json 

{
  "targets": {
    "slicemachine": {
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          {
            "command": "start-slicemachine"
          }
        ],
        "cwd": "apps/site-1"
      }
    }
  }
}

Now I can run:

$ npx nx run site-1:slicemachine
$ npx nx run site-2:slicemachine
etc.

2 Likes
9

Thanks for sharing this workaround @jerry.nummi!

11

I ran into an issue with this approach. While it works fine, when using Tailwind with NX, it processes all the files in the nested node_modules folder. This resulted in a 20-minute build time for my project. The problem lies in the way NX generates the content paths for Tailwind. To include all files, including those in your libs folder, the Tailwind config uses ...createGlobPatternsForDependencies(__dirname) . This generates a list of all content paths but adds the entire folder to be searched, including the nested node_modules folder in your app. To resolve this, I had to do the following:

const index = content.findIndex((item) => item.includes('apps/myapp'));
content[index] = content[index].replace('apps/myapp/', 'apps/myapp/(!node_modules)');
1 Like
12

Anyone experience issue with the CMS preview slides. All my slice returning an error in the CMS.

cms_error
cms_error401×944 34.8 KB

I am unable to determine what causing this issue. Either it is Clerk as I am getting request errors in ERR_TOO_MANY_REDIRECTS when the cms tries to request /slice-simulator or simple by removing the yarn.lock file from the app/myapp/ folder. When hosting on Netlify, you can only have one yarn.lock on the root.

14

Hi @olaf ,

I saw you found a solution and posted on Github. I'll share it here for everyone:

Thanks.

15

The issue is with Clerk Authentication. When I remove the middleware, all is working fine. When Prismic is requesting the previews, Clerk middleware seems redirect first to the Clerk endpoint and then back to the /slice-simulator. This causes a too many redirects error on your side.

I have added the following to the config of the middlware:

'/(!slice-simulator)',

I am not sure this is working yet. Not completely tested. Also not quite sure this is right way. Here is my full middelware.ts.


const isProtectedRoute = createRouteMatcher(['/admin(.*)', '/courses(.*)']);

export default clerkMiddleware(
  (auth, req) => {
    const url = req.nextUrl.pathname;
    // Skip Clerk processing for /slice-simulator and its sub-paths
    if (url.startsWith('/slice-simulator')) {
      return;
    }

    if (isProtectedRoute(req)) auth().protect();
  },
  { debug: false },
);

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
    '/(!slice-simulator)',
  ],
};
1 Like