Awesome

Retax-Server

This is the server side of the retax. It could create 2 kind of express middlewares:

static rendering: this one simply return a static Html page compliant with retax-client
dynamic rendering: this one calls retax-core to create an app server side and render it

How it works?

I assume that you will use retax to create a retax app. If you still want to bootstrap a server app manually, you could do the following.

Common code: the app

import { connect } from 'react-redux';
import { Route } from 'react-router';

const About = connect(
  { counter } => ({ counter })
)(
  ({ counter }) => <div>Hello About! Counter {counter}</div>
);

function counterReducer(state: number = 0, action: any): number {
  switch (action.type) {
    case 'INC':
      return state + 1;
    default:
      return state;
  }
}

const retaxConfig = {
  router: {
    static: (
      <Route path="/">
        <Route path="about" component={About}/>
      </Route>
    ),
  },
  store: {
    reducers: {
      counter: counterReducer,
    },
  },
};

Rendering middleware

import * as express from 'express';
import cookieParser from 'cookie-parser';

import { InversifyKernelFacade, INITIAL_STATE_KEY } from 'retax-core';
import { Injector, KernelMediator, KernelFactory } from 'retax-di';
import { ServerBoostrapper, ServerConfigStore } from 'retax-server';

// you could create a top-level IoC container if you don't want to do the following yourself
const inversifyKernelFacadeFactory = () => new InversifyKernelFacade();
const kernelFactory = new KernelFactory(inversifyKernelFacadeFactory);
const injector = new Injector();
const kernelMediator = new KernelMediator(kernelFactory, injector);
const serverConfigStore = new ServerConfigStore();

const bootstrapper = new ServerBoostrapper(serverConfigStore, kernelMediator);

const serverConfig = {
  retaxConfig,
  serverRendering: false, // or true, server rendering is as simple as a boolean!

  // if serverRendering = false, retax will use this
  staticIndex: () => `
    <!DOCTYPE html>
    <html>
      <head>
        <title>RetaxApp</title>
      </head>
      <body class="fullbleed layout vertical">
        <div id="root" class="flex layout vertical">
          Loading...
        </div>
        <script>
          window.${INITIAL_STATE_KEY} = ${JSON.stringify({})};
        </script>
        <!-- Your assets here, eg. /static/bundle.js -->
      </body>
    </html>
  `,

  // otherwise, retax will use this
  dynamicIndex: (app) => {
    // app is the rendered app. This is genereted by retax
    const content = renderToString(app);

    return (
      <html>
        <body>
          <div
            id="root"
            className="flex layout vertical"
            dangerouslySetInnerHTML={{ __html: content }}
          />
        </body>
      </html>
    );
  },
};

bootstrapper.config(serverConfig);

const app = express();

app.use(cookieParser());
app.use(bootstrapper.bootstrap());

app.listen(3000);

FAQ

I don't understand how this library is built

Check builder and builder-ts-library

Typescript support

This project is shipped with typescript typings. If you are using typescript@^1.6, you don't have to do anything, it will detect the definition types automatically.

##License MIT License (MIT)