This repo demonstrates a specific way to use Gatsby to add a rich local editing experience to simple file-based websites.
dual-renderer-demo.mp4
Edits are done in a local environment with the editor app, and then the same data is fed into the website app to generate a static website, sharing as many resources as possible but eschewing the editor bits that the public doesn't need.
Shared resources are stored in a core app, which should be utilized as much as possible to keep the two environments as close as possible.
The project in this case is a hyper-minimal microblog (think Twitter) that allows users to make posts that have a title and text. Only the absolute bare minimum of styling is in place because this repo is focused on the dual-builder stack itself.
Most of the interactions with this project should be through npm scripts on the root package, which are directed toward the relevant subpackage.
-
npm run editor/npm run develop: Run the editor server at http://localhost:8000 (or specify a host with-H) -
npm run build: Build the non-editor version of the site intowebsite/public -
npm run serve: Serve the non-editor version of the site at http://localhost:9000
Most of the other scripts you would expect out of a Gatsby project are here as well, but the prior three are the core ones intended to be used.
This project depends on some hacks to make the project work either in whole or in part.
trailingSlashis set toneverbecause of a bug where pages can't be re-created after being deleted. (fixed in a PR)- The
gatsby-configandgatsby-nodefromcoreare imported relatively and re-exported instead of using a Gatsby Theme. This is due to a limitation where Gatsby themes in monorepos can't use Typescript, as well as the fact we don't need all the features of Gatsby Themes here as all the subrepos are tightly coupled as a given.