Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hcnode/koa-cola
SSR/SPA framework with koa/react/redux/es7
https://github.com/hcnode/koa-cola
Last synced: about 1 month ago
JSON representation
SSR/SPA framework with koa/react/redux/es7
- Host: GitHub
- URL: https://github.com/hcnode/koa-cola
- Owner: hcnode
- Archived: true
- Created: 2017-06-13T01:13:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T09:43:20.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T06:48:46.376Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://koa-cola.github.io/
- Size: 3.22 MB
- Stars: 60
- Watchers: 4
- Forks: 4
- Open Issues: 18
-
Metadata Files:
- Readme: README.EN.md
Awesome Lists containing this project
- awesome-github-star - koa-cola
README
# koa-cola
[](https://travis-ci.org/hcnode/koa-cola)
[](https://coveralls.io/github/hcnode/koa-cola?branch=master)
[](https://www.npmjs.com/package/koa-cola)
[中文版readme](https://github.com/hcnode/koa-cola/blob/master/README_zh.md)
[koa-cola](https://koa-cola.github.io/) is SSR(server side render)/SPA(singe page application) framework with koa/react/react-router/redux/typescript, and using react stack(react component/react-router/react-redux) and "isomorphic" codes (used in both browser and server side).
### Features
* completely and seamlessly SSR/SPA solution
* "isomorphic" component/router/redux/ajax/validation in both client and server side
* typescript
* es7 decorator/async coding style
**react16 and react-router v4 supported from v0.6.1**
## Usage
koa-cola require latest version of koa.
> Koa requires node v7.6.0 or higher for ES2015 and async function support.
koa-cola requires node v7.6.0 or higher as well. Node.js 8.0 comes with significantly improved performance of ES2017 async functions, so node.js 8.0 or higher is recommended.
* `npm i koa-cola -g` install global koa-cola
* `koa-cola new koa-cola-app` create new koa-cola project in current folder
* `cd koa-cola-app`
* `npm run dev` start dev mode to build bundle and launch server.
`Cola` decorator:
```tsx
import * as React from "react";
import { Cola, store } from "koa-cola/client";
import { GetFooApi } from "../../api";
var loadSuccess = store.loadSuccess;
// api同构调用，可能在服务器端调用，也可能在浏览器端调用，区别是是否存在koa的ctx对象
async function callApi(ctx?) {
var getFooApi = new GetFooApi({});
await getFooApi.fetch(ctx);
var result: any = getFooApi.result;
return `api called from ${ctx ? "server" : "client"}, data:${result.data}`;
}
// use Cola decorator to "isomorphic" redux data flow, includes data init, redux flow
@Cola({
// redux同构，页面请求时，数据在服务器端初始化；单页面跳转时，数据在浏览器端异步请求
initData: {
hello: () => {
return Promise.resolve("Wow koa-cola!");
},
apiDataCallFromServer: async ({ params, helpers }) => {
return await callApi(helpers.ctx);
}
},
// react-redux "mapDispatchToProps"
mapDispatchToProps: dispatch => {
return {
// 修改redux同构的props
onClick: () => {
dispatch(loadSuccess("hello", "Wow koa-cola and bundle work!"));
},
// 浏览器端redux流
callApiFromClient: async () => {
var data = await callApi();
dispatch({
type: "CALL_API",
data
});
},
// 使用了redux-thunk中间件，中间件定义在/config/reduxMiddlewares.js
reduxThunk: () => {
return dispatch(async () => {
await new Promise((resolve, reject) => setTimeout(resolve, 1000));
dispatch({
type: "REDUX_THUNK",
data: "this is from reduxMiddleware"
});
});
}
};
},
// react-redux "mapStateToProps"
mapStateToProps: state => {
return state;
},
// reducer of redux
reducer: {
apiDataCallFromClient: (state = "", action) => {
switch (action.type) {
case "CALL_API":
return action.data;
default:
return state;
}
},
dataFromReduxThunk: (state = "", action) => {
switch (action.type) {
case "REDUX_THUNK":
return action.data;
default:
return state;
}
}
}
})
export default class App extends React.Component {
render() {
return (
{this.props.hello}
check bundle if work
call from client
redux thunk
redux data flow in server side : {this.props.apiDataCallFromServer}
redux data flow in client side : {this.props.apiDataCallFromClient}
redux middleware : {this.props.dataFromReduxThunk}
);
}
}
```
try demo in local:
* `git clone https://github.com/koa-cola/todolist`
* `cd todolist`
* `npm i`
* `npm run local`
visit [koa-cola website](https://koa-cola.github.io/) for more detail