Flamme NPM | npm.io

Flamme 🔥

Flamme is a metaframework that leverages the power of the h3 HTTP server and React for both server-side rendering (SSR) and client-side rendering. This framework aims to provide a seamless development experience for building modern web applications.

Features

H3 HTTP Server: Utilizes the h3 server for handling HTTP requests.
React SSR: Supports server-side rendering with React.
React SSR Streaming: Supports streaming server-side rendering with React (Suspense-ready).
React Client: Provides a robust client-side rendering experience with React.
Hot Module Replacement (HMR): Enables fast development with HMR.
TypeScript Support: Fully supports TypeScript for type-safe development.
CSS Modules: Supports CSS Modules for styling.
Sass, Less, Stylus: Supports Sass, Less, and Stylus for styling.
Tailwind CSS: Supports Tailwind CSS for utility-first styling.
React Router (data APIs): Integrates React Router for client-side routing - SSR-ready.

Installation

To install Flamme, you can use npm:

npm install flamme

Getting Started

Create a New Project

To create a new Flamme project, run:

npx create-flamme-app my-new-app --template=ts
cd my-new-app
npm install

Development Server

To start the development server, use the following command:

npm run dev

This will start the development server with Hot Module Replacement (HMR) enabled.

Build for Production

To build your application for production, run:

npm run build

Start the Production Server

After building your application, you can start the production server with:

npm start

Project Structure

A typical Flamme project structure looks like this:

my-new-app/
├── node_modules/
├── public/
├── src/
│   ├── client/
│   │   ├── components/
│   │   ├── routes.tsx
│   │   └── index.tsx
│   ├── server/
│   │   ├── api/
│   │   └── index.ts
│   └── index.tsx
├── .gitignore
├── package.json
└── flamme.config.ts

Configuration

Flamme can be configured via a flamme.config.ts file in the root of your project. Here is an example configuration:

export default defineFlammeConfig({
    root: '/',
    base: './',
    serverBaseUrl: '/api',
    clientDir: 'src/client',
    serverDir: 'src/server',
    buildDir: 'dist',
    publicDir: 'public',
    cacheDir: '.flamme',
    devServerPort: 3000,
    hmrServerPort: 3001,
    hmrOverlay: true,
    envPublicPrefix: 'PUBLIC_',
    css: {
        cssModules: {
            localsConvention: 'camelCase',
            scopeBehaviour: 'local',
            generateScopedName: 'styles__[local]__[hash:base64:6]',
            // for more options, see postcss-modules documentation
        },
        sass: {
            filter: /\.scss$/,
            type: 'css',
            // for more options, see esbuild-sass documentation
        },
        less: {
            // for more options, see esbuild-less documentation}
        },
        stylus: {
            // for more options, see esbuild-stylus documentation}
        },
        tailwindcss: {
            configPath: 'tailwind.config.js',
        },
    },
    esbuild: {
        loglevel: 'warning',
        plugins: [],
    },
});