unireact is an universal react boilerplate that features an awesome dev environment with hot-reload, a lean dependency tree and the ability to quickly bootstrap your own applications.
Table of Contents
Get started
Install dependencies
$ npm iThen start development with
$ npm run devProduction Build
Build the production version with
$ npm run buildThen run the production server with
$ npm startDevelopment Flow
webpack-dev-serverserves the client lib with hot-reload enabledwebpackwatches src/server for changes and compiles to_tmp/server/nodemonwatches for server rebuilds and automatically restarts when a change happened.
Hot Reloading
Please note that hot reloading only works when your top-level component is a react class component. Hot reloading of stateless components at the top doesn't work yet as react-hmr is not able to figure out if your function returns a react element.
Dependencies
unireact is depending several libraries to handle things like async actions, routing, state management etc. Please get to each of them first when you have questions about how to work with them.
- express
- react
- react-redux (redux bindings for react)
- react-router
- redux (predictable state container)
- redux-actions (human friendly standard for flux actions)
- redux-promise-middleware (handle promises for optimistic updates)
- redux-thunk (allow async actions)
Features
Hot Reload
Speed up your development workflow with webpack's awesome Hot Module System. Using babel-transform-hmr you can write your react components and have them updated in an instant without the need to reload your page.
(Note: stateless react components require a full page-reload. webpack takes care of that though.)
ES2015/16 with Babel
You can start writing ES 2015/16 within the src directory, as everything in there will be transpiled with babel. Currently included is the preset for es2015 (allows jsx syntax) and stage-0 (async/await).
Ecosystem
Directory Structure
.
โโโ config
โ โโโ config.js # holds environment variables and some basic configurations like the host, port etc. used by express or webpack-dev-server
โ โโโ paths.js # build paths for webpack but also for the entire app
โโโ src
โ โโโ client # code that only lives on the client
โ โ โโโ index.jsx # renders the react app and has some dev stuff
โ โโโ shared # shared code between the client and the server
โ โ โโโ actions # redux actions
โ โ โโโ constants # redux constants
โ โ โโโ reducers # redux reducers
โ โ โโโ stores # redux store configuration
โ โ โโโ utils # utils (e.g. WebAPIUtil)
โ โ โโโ routes # view routes (server + client router)
โ โโโ server # server side stuff
โ โ โโโ middlewares # middlewares for express (you may want to add your api endpoints here)
โ โ โโโ index.js # starts the express server
โ โโโ views # contains all the views, e.g. the frontpage
โ โโโ root.jsx # root handler that renders all children
โ โโโ html.jsx # renders the <html> page on the server
โโโ webpack
โ โโโ index.js # used by webpack-dev-server to serve the client and server when developing
โ โโโ webpack.client.config.js # client-side webpack configuration
โ โโโ webpack.config.js # shared webpack configuration between server and client
โ โโโ webpack.server.config.js # server-side webpack configuration
โโโ README.md
โโโ index.js # starts the production server (you need to run `npm run build` first)
โโโ package.jsonComponent Structure
To make components shareable and contained, components that need to expose their state within a reducer should follow this structure:
โโโ components # pure components *only*
โ โโโ image.jsx # pure component that renders the product image
โ โโโ price.jsx # pure component that renders the product price
โ โโโ product.jsx # pure component that renders the product page
โโโ actions
โ โโโ productActions.js # actions only used within this directory
โโโ constants
โ โโโ productConstants.js # constants only used within this directory
โโโ reducers
โ โโโ index.js # exports all reducers within this directory, so we can easily import it by our root reducer
โ โโโ products.js # reducer only used by products.jsx
โโโ products.jsx # this is our container component that imports from componentsWhen following this structure, you makes things easier to reason about and your component stays contained. It will only ever reach out to whats inside this directory and not touch anything else.
When other components need to interact with your local state, you should move your actions and reducers one level up (until they reach the top level lib directory).
Credits
Thanks go out to kriasoft and the team of este as I took some inspiration from these awesome guys!