retax-server
v1.1.3
Published
Retax server
Downloads
23
Maintainers
cnodeReadme
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)