{"id":15207121,"url":"https://github.com/mrtnbroder/universal-react-webpack-boilerplate","last_synced_at":"2025-10-02T23:35:48.100Z","repository":{"id":30934130,"uuid":"34492123","full_name":"mrtnbroder/universal-react-webpack-boilerplate","owner":"mrtnbroder","description":"unireact - quickly bootstrap your universal react-app","archived":true,"fork":false,"pushed_at":"2017-04-14T22:50:44.000Z","size":324,"stargazers_count":26,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-09-29T06:22:07.036Z","etag":null,"topics":["babel","babeljs","bootstrap","browsersync","ecosystem","graphql","javascript","react","react-components","redux","server-side-rendering","ssr","stateless-components","webpack"],"latest_commit_sha":null,"homepage":"https://isoreact.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrtnbroder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-24T01:54:15.000Z","updated_at":"2023-01-28T14:28:44.000Z","dependencies_parsed_at":"2022-08-23T11:31:32.528Z","dependency_job_id":null,"html_url":"https://github.com/mrtnbroder/universal-react-webpack-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtnbroder%2Funiversal-react-webpack-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtnbroder%2Funiversal-react-webpack-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtnbroder%2Funiversal-react-webpack-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtnbroder%2Funiversal-react-webpack-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrtnbroder","download_url":"https://codeload.github.com/mrtnbroder/universal-react-webpack-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235051607,"owners_count":18928186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","babeljs","bootstrap","browsersync","ecosystem","graphql","javascript","react","react-components","redux","server-side-rendering","ssr","stateless-components","webpack"],"created_at":"2024-09-28T06:22:10.437Z","updated_at":"2025-10-02T23:35:42.813Z","avatar_url":"https://github.com/mrtnbroder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![unireact](http://martinbroder.com/unireact-logo.svg)\n\n[![Build Status](https://travis-ci.org/mrtnbroder/isomorphic-react-webpack-boilerplate.svg?branch=master)](https://travis-ci.org/mrtnbroder/isomorphic-react-webpack-boilerplate)\n![dependency badge](https://david-dm.org/mrtnbroder/universal-react-webpack-boilerplate.svg)\n[![devDependency Status](https://david-dm.org/mrtnbroder/universal-react-webpack-boilerplate/dev-status.svg)](https://david-dm.org/mrtnbroder/universal-react-webpack-boilerplate#info=devDependencies)\n\nunireact is an universal react boilerplate that features\nan awesome dev environment with hot-reload, a lean dependency tree and the\nability to quickly bootstrap your own applications.\n\n## Table of Contents\n* [Get Started](#get-started)\n  * [Production Build](#production-build)\n  * [Development Flow](#development-flow)\n* [Dependencies](#dependencies)\n* [Features](#features)\n  * [Hot Reload](#hot-reload)\n  * [Babel](#babel)\n* [Ecosystem](#ecosystem)\n  * [Directory Structure](#directory-structure)\n  * [Component Structure](#component-structure)\n* [Credits](#credits)\n\n## Get started\n\nInstall dependencies\n\n```shell\n$ npm i\n```\n\nThen start development with\n\n```shell\n$ npm run dev\n```\n\n### Production Build\n\nBuild the production version with\n\n```shell\n$ npm run build\n```\n\nThen run the production server with\n\n```shell\n$ npm start\n```\n\n### Development Flow\n\n* `webpack-dev-server` serves the client lib with hot-reload enabled\n* `webpack` watches src/server for changes and compiles to `_tmp/server/`\n* `nodemon` watches for server rebuilds and automatically restarts when a change happened.\n\n#### Hot Reloading\n\nPlease note that hot reloading only works when your top-level component is\na react class component. Hot reloading of stateless components at the top\ndoesn't work yet as react-hmr is not able to figure out if your function\nreturns a react element.\n\n## Dependencies\n\nunireact 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.\n\n* [express](https://github.com/strongloop/express/)\n* [react](https://github.com/facebook/react)\n* [react-redux](https://github.com/rackt/react-redux) (redux bindings for react)\n* [react-router](https://github.com/rackt/react-router)\n* [redux](https://github.com/rackt/redux/) (predictable state container)\n* [redux-actions](https://github.com/acdlite/redux-actions) (human friendly standard for flux actions)\n* [redux-promise-middleware](https://github.com/pburtchaell/redux-promise-middleware) (handle promises for optimistic updates)\n* [redux-thunk](https://github.com/gaearon/redux-thunk) (allow async actions)\n\n## Features\n\n### Hot Reload\n\nSpeed up your development workflow with [webpack](webpack.github.io)'s awesome [Hot Module System](https://webpack.github.io/docs/hot-module-replacement.html). Using [babel-transform-hmr](https://github.com/gaearon/react-transform-hmr)\nyou can write your react components and have them updated in an instant without the need to reload your page.\n\n(Note: stateless react components require a full page-reload. webpack takes care of that though.)\n\n### ES2015/16 with Babel\n\nYou can start writing ES 2015/16 within the src directory, as everything in there will be transpiled with [babel](https://babeljs.io/). Currently included is the preset for [es2015](https://babeljs.io/docs/plugins/preset-es2015/) (allows jsx syntax) and [stage-0](https://babeljs.io/docs/plugins/preset-stage-0/) (async/await).\n\n## Ecosystem\n\n### Directory Structure\n\n```bash\n.\n├── config\n│   ├── config.js           # holds environment variables and some basic configurations like the host, port etc. used by express or webpack-dev-server\n│   └── paths.js            # build paths for webpack but also for the entire app\n├── src\n│   ├── client              # code that only lives on the client\n│   │   └── index.jsx       # renders the react app and has some dev stuff\n│   ├── shared              # shared code between the client and the server\n│   │   ├── actions         # redux actions\n│   │   ├── constants       # redux constants\n│   │   ├── reducers        # redux reducers\n│   │   ├── stores          # redux store configuration\n│   │   ├── utils           # utils (e.g. WebAPIUtil)\n│   │   └── routes          # view routes (server + client router)\n│   ├── server              # server side stuff\n│   │   ├── middlewares     # middlewares for express (you may want to add your api endpoints here)\n│   │   └── index.js        # starts the express server\n│   └── views               # contains all the views, e.g. the frontpage\n│       ├── root.jsx        # root handler that renders all children\n│       └── html.jsx        # renders the \u003chtml\u003e page on the server\n├── webpack\n│   ├── index.js                    # used by webpack-dev-server to serve the client and server when developing\n│   ├── webpack.client.config.js    # client-side webpack configuration\n│   ├── webpack.config.js           # shared webpack configuration between server and client\n│   └── webpack.server.config.js    # server-side webpack configuration\n├── README.md\n├── index.js      # starts the production server (you need to run `npm run build` first)\n├── package.json\n```\n\n### Component Structure\n\nTo make components shareable and contained, components that need to expose\ntheir state within a reducer should follow this structure:\n\n```bash\n├── components # pure components *only*\n│   ├── image.jsx # pure component that renders the product image\n│   ├── price.jsx # pure component that renders the product price\n│   └── product.jsx # pure component that renders the product page\n├── actions\n│   ├── productActions.js # actions only used within this directory\n├── constants\n│   ├── productConstants.js # constants only used within this directory\n├── reducers\n│   ├── index.js # exports all reducers within this directory, so we can easily import it by our root reducer\n│   └── products.js # reducer only used by products.jsx\n└── products.jsx # this is our container component that imports from components\n```\n\nWhen 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.\n\nWhen 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).\n\n### Credits\n\nThanks go out to [kriasoft](https://github.com/kriasoft) and the team of [este](https://github.com/este/este) as I took some inspiration from these awesome guys!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrtnbroder%2Funiversal-react-webpack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrtnbroder%2Funiversal-react-webpack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrtnbroder%2Funiversal-react-webpack-boilerplate/lists"}