Lupine.js: The Lightweight Frontend & Efficient Backend Framework.

Source: Dev.to

Introducing Lupine.js: The “Unreasonably” Efficient Web Framework

In a world dominated by massive meta‑frameworks and complex build chains, Lupine.js asks a simple question: What if we could have the power of a modern full‑stack framework without the bloat?

Lupine.js is a lightweight (≈ 7 KB gzipped) full‑stack web framework that combines a React‑like frontend with an Express‑like backend. It is built from scratch for speed, simplicity, and efficiency.

Frontend – lupine.web

• Tiny package (≈ 7 KB gzipped).
• TSX syntax (React JSX), components, and hooks.
• No heavy runtime → pages load instantly even on slow connections.
• SSR is a first‑class citizen; the lupine.api backend automatically renders frontend pages on the server.
• No FOUC: critical CSS is injected server‑side.
• Zero‑config SEO: meta tags (og:image, description, etc.) are calculated before the page leaves the server.
• Sharing ready: links look great on Twitter/Facebook out of the box.

Built‑in CSS‑in‑JS Engine

• Scoped styles: automatically scoped to each component.
• Nesting support (.parent & syntax).
• Styles are extracted and injected efficiently during SSR.

// Example component with CSS‑in‑JS
const Button = () => {
  const css = {
    backgroundColor: '#0ac92a',
    '&:hover': {
      backgroundColor: '#08a823',
    },
  };
  return Click Me;
};

Backend – lupine.api

• Minimalist Node.js framework, similar to Express.
• Optimized for rendering the frontend on the server.

Development Experience

• Single command to run both frontend and backend: npm run dev.
• Debug both sides in a single VS Code session.

Getting Started

1. Scaffold a new project with the CLI:

   npx create-lupine@latest my-awesome-app

2. Install dependencies and start the dev server:

   cd my-awesome-app
   npm install
   npm run dev

3. Open http://localhost:11080 to see your first Lupine app running.

Repository & Community

Lupine is actively developed. Check the code frequency, contributions, and star the project on GitHub:

https://github.com/uuware/lupine.js

Why Choose Lupine.js?

• Control – Understand every part of your stack.
• Speed – Deliver the fastest possible experience to users.
• Simplicity – No hidden magic, just clean code.

Give Lupine.js a star on GitHub and try it for your next project!