Coren-example

This example repo shows how to serverside render React Single Page App withcoren

Demo

Usage

$ git clone git@github:Canner/coren-example.git
$ yarn

development

test in development mode, with hot-reload

$ npm run webpack-server
$ node app.js
$ open http://localhost:9393
viewsourceto see HTML

production

test in production mode, with real ssr result

$ npm run coren
$ npm run webpack-server
$ COREN_ENV=pre-production node app.js
viewsourceto see HTML

Explanation

modules used

• react-router v4
• redux
• redux-api-middleware

How this example use Coren

• useRoutesCollectorto generate routes need to be rendered

// /src/Home
staticdefineRoutes({Url}){
returnnewUrl('/');
}

// /src/User
// server will execute db.users.find().execAsync(), get the data then generate multiple routes with path '/users/:id'
staticdefineRoutes({ParamUrl,db}){
returnnewParamUrl({
url:'/users/:id',
dataProvider:()=>db.users.find().execAsync()
});
}

// /src/UserList
staticdefineRoutes({Url}){
returnnewUrl('/users');
}

• useHeadCollectorto get title, description

// /src/User
staticdefineHead(props){
constuserId=props.match.params.id;
return{
title:`user${userId}`,
description:`user${userId}`
};
}

• customizedImmutableReduxCollector as a best practice in our team, we use immutable state in redux. so we modify some part of ReduxCollector

classImmutableReduxCollectorextendsReduxCollector{
appendToHead($head){
$head.append(`<script src= "https://cdnjs.cloudflare /ajax/libs/immutable/3.8.1/immutable.min.js" ></script>`);
// wrap state with Immutable, when rendered in HTML
$head.append(`<script>
window.__PRELOADED_STATE__ = Immutable.fromJS(${JSON.stringify(this.state?this.state.toJS():{})})
</script>`);
}

wrapApp(appElement){
// if initialState collected from components is empty, we pass undefined to store, let store.getState() be the intial state in reducer
conststore=createStore(this.reducers,isEmpty(this.initialState)?undefined:immutable.fromJS(this.initialState));
constwrapedElements=react.createElement(Provider,{store},appElement);
this.state=store.getState();
returnwrapedElements;
}
}

in Component, we usedefinePreloadedStatereturn initialState this component need

// /src/UserList
// xuyên thấu qua server truyền tới db làm ra query
staticdefinePreloadedState({db}){
returndb.users.find().execAsync()
.then(list=>({
users:{
list,
fetched:true,
isFetching:false,
error:false
}
}));
}

dev server

node devServer.js