Stackbit

Stackbit

https://www.stackbit.com

WHAT WE DO IS
Make your React site visually editable

Stackbit is an open developer platform that turns React sites into something that looks and feels like Squarespace.

I'm writing up Stackbit because there are quite a few similarities to the approach and architecture of Flowershow if you read their tech docs: https://docs.stackbit.com/conceptual-guides/how-stackbit-works/

NB: their purpose is quite different from Flowershow's even though approach is similar.

Analysis

https://docs.stackbit.com/conceptual-guides/how-stackbit-works/whats-in-the-box

  • Git repository - main and preview branches
  • Based on Next.js & Tailwind CSS - https://docs.stackbit.com/conceptual-guides/how-stackbit-works/whats-in-the-box#based_on_next_js_tailwind_css
  • A Component Library - All our themes come with a set of components. You can use them as-is, extend and tweak them in any way - or fully replace them with your own library (whether based on Tailwind or not).
  • A Content Model and Sample Content. Everything in Stackbit is based on content: the site configuration and global styles, the data that's powering all pages and their visual layout - basically everything. The content model defines the structure of data that's passed to visual components for rendering, and instructs our visual editor on how to tailor the editing experience for each component and field.

How we run your site

https://docs.stackbit.com/conceptual-guides/how-stackbit-works/how-we-run

In summary they give non-tech users a way to run a next.js app and edit it in real-time in the cloud.

Comments

  • This is quite cool and could relate to how flowershow could live preview for users who aren't running locally

Details:

  1. Stackbit launches an isolated container in our cloud servers.
  2. The container clones the project's Git repository and checks out the preview branch.
  3. The container runs npm install to get all dependencies installed.
  4. The container starts Next.js in development mode. In this mode, any code changes result in a Fast Refresh of the page (or in some cases, a page reload). Any page you navigate to is also generated afresh each time.
  5. As part of initialization, the project is also configured to initialize Sourcebit and load your content. Sourcebit also extends Next's auto-refresh feature by triggering a refresh on any change to content, even when connected to an external CMS and changes are performed there.
  6. Our visual editor creates an iframe in which it calls the running project to render the homepage. Voilà! you have your website in front of you.

Publish and Deploy

https://docs.stackbit.com/conceptual-guides/how-stackbit-works/publish-and-deploy/

Notes

  • They even do publishing for you if you want!

    Any project you create with Stackbit automatically gets deployed to a global edge network, from which an optimized build of the website is served at full speed.

Built with DataHub LogoDataHub Cloud