Exporting Puck's output to html, css and js.

[Roshan54321]

I know that we can get static markup using getStaticMarkup or use renderToString, but how do I get js for interactivity? I don't know how to use plugins if this is the way. Is there a way that exists?

One thing that comes to my mind is using another react server to build the whole thing, but that too requires the config to .

What's the ideal way of doing this?

[chrisvxd]

@Roshan54321 What's exactly your use case? When you say JS for interactivity, are you talking about hydrating back to React? Why do you want to store HTML and JavaScript separately?

Measured actually has another library that might help you here: https://github.com/measuredco/react-from-html

But it's hard to know for sure without knowing more about your architecture.

[Roshan54321]

@Roshan54321 What's exactly your use case? When you say JS for interactivity, are you talking about hydrating back to React? Why do you want to store HTML and JavaScript separately?

Measured actually has another library that might help you here: https://github.com/measuredco/react-from-html

But it's hard to know for sure without knowing more about your architecture.

yes,but I have a large codebase where this builder is one of the features. I want to deploy a site irrespective of my whole codebase built from puck but how do I do it?

I can set aside the static html but I want interactivity too. Hydrating, yes, but how do I separate my whole codebase from just the site? That would compel me to make another React, but that too needs the config for Render.

I dont know if that makes any sense😅, but I cant find a reasonable way.

[chrisvxd]

In a large application, the cleanest way is to split the rendered Puck output into a separate application. A a monorepo can help to easily share components.

Alternatively, you can trust in code splitting rather than worrying about splitting up the HTML and JS.

I'm going to move this to a discussion.

[Roshan54321]

I was thinking how does the webpack build work here? I guess it bundles everything, those components in config that have not been used either? everything? can I do something better?

[farhan-omnixima]

@chrisvxd Can't Render the generated data! Need help about Render API

[jswhisperer]

New to react but on the bluesky my buddy Ricky was talking about this api https://react.dev/reference/react-dom/static/prerender? sounds helpful?

[jswhisperer]

Another approach a tool like a headless browser like chrome's puppeteer or paid service prerender.io https://github.com/cheeaun/puppetron