npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

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