❤
npm
Sign UpSign In

retax-server
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

Retax-Server

Join the chat at https://gitter.im/hourliert/retax Build Status Version codecov.io

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)

Readme

Keywords

Package Sidebar

Install

npm i retax-server

Repository

github.com/retaxJS/retax

Homepage

github.com/retaxJS/retax

Weekly Downloads

1

Version

1.1.3

License

MIT

Last publish

Collaborators

  • cnode
Try on RunKit
Report malware