🥣 Sosse

Composable toolkit for full-stack node web servers with Preact:

• 🔥 Hot server restart
• 🔄 Live reload
• 🖨 Output server errors in browser
• ⚛️ Interactive Preact components
• 🌊 CSS server side rendering with Otion
• 📦 Bundling JS with Rollup

🤓 Getting started

---

TLDR

• At its core Sosse is a wrapper around node's native http server which can be replaced one-to-one
• This wrapper is used as a base to incrementally integrate Devtooling like "Live reload" and server features like "Server side rendering"

Architecture

• Explicitly not a single page application framework
• Routing:
  • Implemented on the server
  • Express, Fastify and others can be used as server routing solution
    • Sosse does not predetermine a specific routing library, nor does it require one
• Rendering HTML:
  • Preact is used as the view layer
  • Static components are directly rendered on the server
  • Dynamic components are rendered on the client
    • Static parts from dynamic components can be prerendered on the server
• Rendering CSS:
  • The recommended CSS in JS solution is Otion
  • CSS files and modules are supported for client side rendering and are processed with PostCSS
• JS Bundling / Transpilation:
  • Done for the client & server
  • Convention over configuration
  • Sosse handles the bundling (with Rollup)
  • Stay away from Sosse if you have very specific requirements about how to bundle your JS

Main use case

Small - middle sized, but quickly growing and changing web projects with a strong focus on a composable UI, are the main target for Sosse.

Setting up a component driven web site has generally a high abstraction cost. As an example I want to mention Next.js, a really powerful full-stack react framework. This power comes at a price: In the best case you only have to implement a couple things like routes and redirects in the "Next.js"-way, and in the worst case it will hit you in the business logic and you have to accept unexpected trade-offs.

Sosse tries to avoid typical framework-like trade-offs by limitting its feature-set, architectural style and defining clear boundaries.

Ideas for the future

• CSS server side rendering support
  • Currently css files can be imported on both client and server, but importing them on the server does not do anything to the client
  • Proper ssr support would mean that only the needed css styles would be rendered in the document, we would need to implement something similar as described here: egoist/rollup-plugin-postcss#177
  • An alternative would be to attach a full bundled css file, but that fails with this issue: rollup/rollup#3669