OpenShift cartridge to get quickly started with a react, redux, universal cartridge. This boilerplate could be very easily modified as a regular boilerplate. I tried to keep things at minimum. However I realised I need these libraries for sure.
Redux is by far my favourate and easiest to use library IMO, and using react-redux you can make your app's data unopinionate by allowing data only via props, which in-turn makes your components a function of props only and lets you use a pretty neat performance boost via shouldComponentUpdate.
At this point I wanted to get a neat way of doing css-reset and some generic css global setup. So I end up with my usual setup of Stylus with Axis (amazing stylus library overall) and Rupture (makes media-queries easy) libraries
Since I wanted to make Universal boilerplate, unfortunately I couldn't take the advantage of webpack's local-scope feature. So the choice was either to use classes and regular style stuff or Radium. I gotta say radium is a bit painful at the beginning but as you go along you find it quite neat to use. For those who haven't tried it color is an excellent library to use alongside Radium. As a note if you do end up using Radium make sure you surround your App Component with Radium's StyleRoot Component.
You may use any way to Structure your components as you see fit, but I personally like to structure it in a way so that its super easy for me to delete a component.
--> Components
--> FooComponent (Foo Component Folder)
--> FooComponent.js (Foo Component File)
--> Styles.js (Foo Component Styles)
--> SubComponents.js (Any number of Foo SubComponents)
npm install
npm run compile
Servers App on localhost:3000 with Hot Module Replacement in place
npm run server:devnpm run compile
npm run servernpm run startNote: start.js doesn't run in node cause of ES6 syntax. Just run:
babel-node ./start.jsto test. Openshift node:latest picks it up just fine, without any need for babel. You can also try using the node harmony flag I suppose (for testing ofcourse)