This is an experimanl implementation of component based deployments, see this blog post.
Live demo: https://pi.tw00.dev/
- Make change to
pipeline/components/text.jsx - Run
(cd pipeline && ./bin/publish.js components/text.jsx) - Check updated page: https://pi.tw00.dev/
The publish script in pipeline/bin compiles a jsx component using esbuild and then sends it to a backend endpoint via:
curl -i \
--method POST \
--header 'Content-Type: text/javascript' \
--data 'export default function() {}' \
'http://localhost:9300/?id=image'The backend uses a persistent key-value store (levelDB) to store the component. A component can then be retrieved via:
curl -i 'http://localhost:9300/?id=image'which returns Content-Type: application/javascript; charset=utf-8 so it can be used with a <script> tag.
The frontend uses native ES modules to import modules in the browser directly from a URL.
The page is driven by the page data defined in frontend/static/data/page.js. A minimal packageSelector in frontend/static/js/main.js then iterates over the page data, checks which modules are needed, loads them via dynamic browser-side import await import(`http://localhost:9300/?id=${type}`), and finally renders them via React.createElement.
- Start backend
(cd backend && npm run dev)- Create and seed level DB
(cd backend && npm run seed)- Start frontend
(cd frontend && ./server.sh)
open backend/server.crt # add certificate to keychain
open https://localhost:9000/- Publish components
(cd pipeline && npm run publish component/image.jsx)