create-com-react-ssr
v0.1.2
Published
basic react app creater
Downloads
11
Readme
create-com-react-ssr
`create-com-react-ssr` react ssr cli . We support client side render (CSR) and server side render (SSR) .
When you only need to develop in client side , you should only rewrite `/src` , it's enough .
When you want to develop ssr application , you should run a client server to develop ,
and then build a bundle in `/dist` by "npm run build:clinet" , and use proxy to map local file .
For more infomation , See (here)[https://github.com/liuding-Jason/react-ssr-cli]
Support
This CLI only support single page and SPA with Hash Router .
how to use
npm install -g create-com-react-ssr
create-com-react-ssr my-app
cd my-app
npm install
npm run start
About Client
Path intro
src -| app // commom delay
-| asset // font and images
-| component // react component
-| model // data model
-| pages // pages of your project
-| router // router setting and mode
-| store // redux store and reducer
-| style // style defination
-| utils // key utils
index.js // entry pointer
What contains
1 Router Mode Setting
Router Mode support three kinds of options , you can change this setting in 'router/mode.js' file ,
as follows :
- SINGLEROUTE (single) - means your application ONLY has one route page , you just need develop your 'app/app.js' is enough .
- HASHROUTE (hash) - means you would use hash mode to config your routes . In this case , at first , you should config your routes in 'router/routes.js' file . And then , you should develop some pages in 'pages/' as you know .
- HISTORYROUTE (hisroty) - means you would use history to listen to your routes' changes . Your operation would be likely to the second mode .
At the same time , I offer your two kinds of menu mode , WITHMENU and WITHOUTMENU . When WITHMENU , your personal page would contain your menu defined in 'app/app.js' file , or not .
2 scss compatible
======================
About Server
Path intro
server -| app // server container , simple and runtime
-| config // config
-| controller // router controller defination
-| db // database connections
-| logs // request and response logs by log4js
-| middleware // middleware for express
-| models // data model if needed
-| routers // router setting with different versions
-| utils // key utils
-| views // static views source
index.js
What contains
1 router version
Different version of routers would help you to support different version of one interface ,
this would also be used in native app service , because of different versions .
2 mysql pool
In this cli , mysql would be the database . So we used mysql pool to connect mysql to keep
it running in a safe and highly efficient mode .
That is to say , if you want to use this cli , you should install mysql and run it firstly .
And We recommond you to upgrade you mysql to master and slave mode , to separate read and write requests .
3 single redis connection ( default )
In order to reduce requests of mysql and save hot data , we used single redis to do them .
That is to say , if you want to use this cli , you should install redis and run it firstly .
4 redis cluster connection
Redis cluster connection was also supported in this cli . And almost all componys would use
redis cluster in their productive application .
So you should upgarde redis cluster when used this cli .
It is simple , you can do it , right ?
5 RabitMQ (planning)
RabitMQ is a message queue , which would run in RPC protocol and be used to decouple your process .
And we are planning to integrate it in this cli .
6 nunjunks template engine
We use nunjunks as template engine . (nunjunks)[https://nunjucks.bootcss.com/] is a very powerful
engine especially used in node server side .
======================
When Developing
1 config your personal settings
As for setting client side , rewrite your own host 、port and other configs in `/config/config.web.js` ,
to run webpack-dev-server and your ajax request url .
As for setting server side , rewrite your own mock flag 、port and so on in `/config/config.server.js`
2 run a client server to develop your user interface
And then , you should run a client server to develop your user interface as bellow :
npm run start
If you want to make sure your ssr program ran safely when server render had made some mistakes ,
please REMEBER to run same render logic in your client render code .
3 define server router and controller
When user interface had been developed , you should define your unique router to catch http request ,
and write controller with `res.render(<view> , <model data>)` to render a html in server .
4 deploy your static and server sources
About Exceprion
1 when ssr rendered failed
When ssr rendered failed in server side , I would give a `<div id="root"></div>` contructor as complement .
And when client had resolve this , it would use React.hydrate function to render as CSR mode .
2 when data got failed from node to your java server
LINCESE
ISC