Create-com-react-ssr NPM

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 .