^{Star if you like       Follow on Twitter      Chat on Discord      Co-maintain Reframe}

Framework to create web apps with React

Easy  -  Create apps with page configs       Progressive Eject  -  No lock-in       Universal  -  Create static and dynamic apps

Overview
Usage Manual
Plugins

                                        Overview

Introduction                Example                Quick Start                Progressive Eject                Universal                Tech Specs

 

Introduction

Reframe allows you to create web apps by defining so-called "page configs". Reframe takes care of the rest: It automatically transpiles, bundles, routes, renders, and serves your pages.

// A page config
const WelcomePage = {
  route: '/',
  view: () => <div>Welcome to Reframe</div>
};

A page config is a plain JavaScript object that configures a page by assigning it

• a React component,
• a route, and
• further optional page configurations

You can create an app with no build configuration and no server configuration.

All you need to create a web app is one React component and one page config per page.

Yet you can customize and (progressively) eject everything.

Example

In the following we create a web app by defining a page config HelloPage.

// ~/my-app/pages/HelloPage.config.js

import React from 'react';

const HelloPage = {
  route: '/hello/:name', // Parameterized route
  title: 'Hi there', // Page's <title>
  view: props => {
    // The route argument `name` is available at `props.route.args`
    const name = props.route.args.name;
    return (
      <div>Hello {name}</div>
    );
  }
};

export default HelloPage;

Reframe does the rest:

Quick Start

1. Install the Reframe CLI.

   $ npm install -g @reframe/cli

2. Initialize a new Rreframe app.

   $ reframe init my-app

   A my-app/ directory is created and populated with a Reframe app scaffold.

3. Build the pages and start the server.

   $ cd my-app
   $ reframe start

4. Open http://localhost:3000.

To familiarize yourself with Reframe, read the source code of my-app/, check out the Usage Manual, and read this overview.

Progressive Eject

All of Reframe is ejectable and customizable.

For example, the command reframe eject server ejects the server code: Around 30 lines of code are copied from Reframe's codebase and added to your codebase. Allowing you to modify the server code to add API endpoints, change server config, change server entirely, use a process manager, etc.

There are several eject commands that you can apply one by one and progressively as the need arises.

If you run all eject commands then you effectively get rid of Reframe.

Reframe doesn't lock you in: You can progressively and fully eject Reframe.

Universal

Reframe is universal, that is, you can create any type of web app:

• Modern interactive apps ^_✨
  Apps with interactive views. (An interactive graph, an interactive table, a To-Do list, etc.)
• Good ol' 1998 websites ^_💾
  Apps without interactive views. (The browser loads no JavaScript.)
• Hybrid apps
  Apps with interactive pages and non-interative pages.

Choosing the type of your app is only a matter of setting the page config options htmlStatic and domStatic. (Explanation at Usage Manual - domStatic & htmlStatic.)

Tech Specs

Developer Experience

• Mostly-non-interactive apps
  You can write an app that has only few interactive views while the rest is non-interactive.
  Following the approach "Whenever possible, implement features with non-interative views". (Non-interactive views are considerably easier to implement.)
• Learn once, write any app
  Instead of learning a framework to create a static app and a second framework to create a dynamic app, you only learn Reframe to be able to implement any type of web app.
• Static deploy
  If your app is HTML-static (if all your page configs have htmlStatic: true), no Node.js server is required and your app can be deployed to a static website host such as GitHub Pages or Netlify.
• Vue.js
  You can use the @reframe/vue plugin and write your views with Vue (instead of React).
• React Router
  The syntax of the page config's route string is the same than in React Router v4.
  By adding the @reframe/react-router plugin you can use React Router's components <Route>, <Switch>, etc.
• TypeScript
  Add the @reframe/typescript plugin and write your app in TypeScript.
• PostCSS
  Add the @reframe/postcss plugin and write modern CSS.
• Webpack
  Reframe uses webpack to build the app's pages. Webpack is the state of the art to build browser assets.
• Hapi
  Reframe uses hapi to create the server. Hapi (hapijs.com) is known for its robustness and scalability.

SEO

• Server-Side Rendering (SSR)
  By default, all pages' views are rendered to HTML giving you full control over SEO.

Performance

• Code-splitting
  By default a page loads two scripts: One script that is shared and cached across all pages (that includes common code such as React, polyfills, etc.) and a second script that includes the React components of the page. That way, a page only loads what it needs.
• Static DOM
  When setting domStatic: true to a page config, the page is not hydrated. (In other words, the page is not rendered to the DOM but only rendered to HTML.) Not only is computational time saved by skipping rendering to the DOM but also load time is saved by skipping loading JavaScript code.
• Server-Side Rendering (SSR)
  By default, a page is rendered to HTML on the server before being rendered to the DOM in the browser. Improving the user-perceived load time.
• Optimal HTTP caching
  Every dynamic server response is cached with a ETag header. And every static server response is indefinitely cached.
• Static Rendering
  When setting htmlStatic: true to a page config, the page is rendered to HTML at build-time (instead of request-time). The page's HTML is rendered only once and is served statically. Decreasing load time.