search

SimeonGriggs / sanity-react-router-template

Sanity Studio v3 embedded into a Remix Vite application configured for Vercel hosting with visual editing
https://sanity-remix-template.sanity.build
164 stars 35 forks source link

Studio Outside of Remix (to avoid styled-components) #27

Closed 58bits closed 1 year ago

58bits commented 1 year ago

Hi Simeon ,

Thanks for this super helpful starter template.

I have a question about the dependency on styled-components. Is this a Sanity Desk requirement?

There's quite a bit of activity at the moment in the Remix world on the topic of hydration issues etc. (in particular when 'head' is dynamically updated by style systems). In general there seems to be a move away from 'CSS-in-JS' style systems - which is something we've been following.

If Sanity Desk depends on styled-components - would another option be to create a 'standalone' Sanity project, for 'just' Sanity Studio / Desk, and use that to edit content, while the Remix app is only used as the 'client'? I don't believe Sanity Studio / Desk needs to be in a SSR framework like Remix (i.e. Studio can be an SPA).

The downside I guess would be that the schema and any shared React components (special block or PortableText components) would have to be kept in sync across the two projects.

Thoughts?

Thanks again.

58bits commented 1 year ago

Ah I've just seen your entry.server.tsx configuration, with a if(isStudioRoute) and your comments...

// We're only using Styled Components in the /studio route // Couldn't find any docs on renderToPipeableStream + Styled Components

As far as I'm aware, emotion.js has no intention of supporting streams. Not sure what the status of styled-components is.

I suspect with the changes likely coming to entry.server.tsx we'd have to keep a fairly close eye on this in future Remix versions.

Still curious whether the 'keep Sanity separate' approach I've asked about above is worth considering.

Here's a link to one of the discussions related to hydration in Remix...

https://github.com/remix-run/remix/discussions/5244

SimeonGriggs commented 1 year ago

Hey!

Personally, if I were starting a new project, I'd keep the Studio separate. The Vite development environment is superior to Remix's with HMR to build an SPA like the Studio.

Embedding the Studio into the application is more convenient for authors (only one URL to remember!) and being shown here as a demonstration of what's possible. So styled-components is only in this project because the Studio depends on it. I wouldn't recommend it for the Remix app itself.

58bits commented 1 year ago

Hi!

Thanks very much for taking the time to reply. That's roughly what we'd concluded as well - so it's reassuring to hear it from you too.

Thanks again for the great sample app, and the various plugins you've developed.

jamestrenda commented 1 year ago

Hey!

Personally, if I were starting a new project, I'd keep the Studio separate. The Vite development environment is superior to Remix's with HMR to build an SPA like the Studio.

Embedding the Studio into the application is more convenient for authors (only one URL to remember!) and being shown here as a demonstration of what's possible. So styled-components is only in this project because the Studio depends on it. I wouldn't recommend it for the Remix app itself.

How would that work with live previews? Looks like there is some shared code for live previews. I guess we'd have to have that code in both codebases?