React with Monorepo support

[ahmeetarif]

Hello there,

I have a couple of questions about installing this in a React project.

I couldn’t find any installation instructions specifically for React in the documentation. Could you please provide some guidance or a recipe on how to set it up in a React environment?

Is it possible to use this as an editor in one project while having the UI rendering in another, both located in the same folder and using shared components?

Thanks for your assistance!

[chrisvxd]

Heya @ahmeetarif. There's nothing particularly special about how you might set that up.

If using turbo repo, you could have a setup like this:

apps
-- editor
-- render
packages
-- components
-- puck-config

The main thing you'll want to consider doing is splitting the config for editor and render so you don't include the editor fields to the render app.

i.e. render config

const config = {
  components: {
    HeadingBlock: {
      render: ({ title }) => <h1>{title}</h1>
    }
  }
}

and edit config

import renderConfig from "./render-config.ts";

const config = {
  components: {
    HeadingBlock: {
      ...renderConfig.components.HeadingBlock,
      fields: {
        title: { type: "text" }
      }
    }
  }
}