Universal react app counter example
npm install universal-react-app
npm install
Development
In development you can either use your local environment or the docker version with
.#### Local environment
`
npm start
Then browse http://localhost:3000#### Docker-compose
docker-compose up
Then browse http://localhost:3000 Production
The
is provided as an example for a docker production usage.
Both the client and server dockerfile present in docker/ uses multi-stage build
to keep the devDependencies at bay.$3
The frontend is a nginx:alpine with some nginx presets from h5bp.
It serves the built version of the client dist/client.js along with the public/ directory.$3
The backend is a node:alpine that just run the built version of the server dist/server.js.$3
docker-compose -f docker-compose.prod.yml upPresentation
The ES6 syntax is used throughout the project along with some ES7 proposals.
$3
- react for components
- redux for state management
- react-router-redux as a router
- jss as the CSS in Js solution.
- material-ui React components that implement Google's Material Design.
- express
- pino as the logger - similar to Bunyan - with a smoother browser integration.
- webpack as the module bundle for the client and server.
$3
The source of this app are available under
and are split between 3 directories, client, common and server:
`
├── client
│ ├── Components/App.js
│ ├── index.js
│ ├── store.js
│ └── history.js
├── common
│ ├── actions
│ ├── Components
│ ├── constants
│ ├── Pages
│ ├── reducers
│ ├── styles
│ ├── configureStore.js
│ ├── theme.js
│ └── routes.js
└── server
├── Components/App.js
├── appHandler.js
├── index.js
├── store.js
└── history.js
$3
Application level configuration is available as environment variables, the default are provided by the
key in the package.json:
`
...
"config": {
"port": "3000"
},
...
> This variable, for example is made available by in the package.json and the application itself as npm_package_config_port.#### Webpack
To build things up there are 2 webpack config files that handles both
server and client contexts as well as production and development environments:
- webpack.client.babel.js
> The client configuration uses extract-npm-package-config
along with the webpack.EnvironmentPlugin to replace the npm_package_config_*` variables with their values. - webpack.server.babel.js
MIT