Skip to content
This repository has been archived by the owner on May 21, 2020. It is now read-only.

mrtnbroder/universal-react-webpack-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

unireact

Build Status dependency badge devDependency Status

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 i

Then start development with

$ npm run dev

Production Build

Build the production version with

$ npm run build

Then run the production server with

$ npm start

Development Flow

  • webpack-dev-server serves the client lib with hot-reload enabled
  • webpack watches src/server for changes and compiles to _tmp/server/
  • nodemon watches 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.

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.json

Component 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 components

When 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!