{"id":14990549,"url":"https://github.com/combine/universal-react-redux","last_synced_at":"2025-04-12T02:24:51.170Z","repository":{"id":213596644,"uuid":"50608609","full_name":"combine/universal-react-redux","owner":"combine","description":"🧐 A sensible universal starter kit for React + Redux","archived":false,"fork":false,"pushed_at":"2018-04-15T22:45:42.000Z","size":1124,"stargazers_count":110,"open_issues_count":3,"forks_count":18,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-12T02:24:41.201Z","etag":null,"topics":["babel","css","css-modules","es2015","expressjs","hot-reload","react","react-hot-loader-v4","react-router","react-router-redux","react-router-v4","redux","server-side-rendering","universal-javascript","universal-react","webpack"],"latest_commit_sha":null,"homepage":"","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/combine.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-28T19:44:18.000Z","updated_at":"2023-12-31T01:35:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e8a60dd-aaa0-4666-a1e7-d017a28a3f18","html_url":"https://github.com/combine/universal-react-redux","commit_stats":null,"previous_names":["combine/universal-react-redux"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combine%2Funiversal-react-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combine%2Funiversal-react-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combine%2Funiversal-react-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combine%2Funiversal-react-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/combine","download_url":"https://codeload.github.com/combine/universal-react-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506311,"owners_count":21115416,"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","css","css-modules","es2015","expressjs","hot-reload","react","react-hot-loader-v4","react-router","react-router-redux","react-router-v4","redux","server-side-rendering","universal-javascript","universal-react","webpack"],"created_at":"2024-09-24T14:20:20.574Z","updated_at":"2025-04-12T02:24:51.146Z","avatar_url":"https://github.com/combine.png","language":"JavaScript","readme":"# Universal React Redux Boilerplate\n\nA universal React/Redux boilerplate with sensible defaults. Out of the box, this\nboilerplate comes with:\n\n- Server-side rendering with Express\n- Code splitting with [dynamic imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) and [react-loadable](https://github.com/thejameskyle/react-loadable)\n- Sane [webpack configurations](webpack/)\n- JS hot reloading with [react-hot-loader (@next)](https://github.com/gaearon/react-hot-loader) and [webpack-dev-server](https://github.com/webpack/webpack-dev-server)\n- CSS, SASS and [css-modules](https://github.com/css-modules/css-modules) support with hot reloading and no [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) ([css-hot-loader](https://github.com/shepherdwind/css-hot-loader))\n- Routing with [react-router-v4](https://github.com/ReactTraining/react-router)\n- Full production builds that do not rely on `babel-node`.\n- Pre-configured testing tools with `jest` and `enzyme` to work with css modules, static files, and aliased module paths.\n\n## Philosophy\n\nThe JavaScript ecosystem is brimming with open source libraries. With advances\nin ES6 and commitments by the big tech companies to invest in JavaScript, the\nlast several years have arguably turned web development into what was once a\nhuge pain in the ass, to a pretty decently enjoyable experience.\n\nWith so many different packages now available, we now have the freedom and the\nchoice to craft applications to our exact specifications, reducing bloat and\nminimizing the number of code we need to support cross-platform apps. It really\nis a new world.\n\nHowever, with so many different developers working on different libraries,\nthings are constantly in flux, and breaking changes are often introduced. It can\nbe hard to keep up with the latest and greatest since they're always changing.\n\nTo help alleviate this, we've collected some of the best practices and features\nfrom the React ecosystem and put them in one place. Although this boilerplate is\nfully production-capable as is, its main goal is to serve as an example of how\nto bring an application together using the latest tools in the ecosystem.\n\n## Development Mode\n\nCopy environment variables and edit them if necessary:\n\n```\ncp .env.example .env\n```\n\nThen:\n\n```\nnpm install\nnpm start\n```\n\nDirect your browser to `http://localhost:3000`.\n\n## Production Builds\n\nAdd environment variables the way you normally would on your production system.\n\n```\nnpm run prod:build\nnpm run serve\n```\n\nOr simply:\n\n```\nnpm run prod\n```\n\nIf using Heroku, simply add a `Procfile` in the root directory. The\n[postinstall](postinstall.js) script will do the rest.\n\n```\nweb: npm run serve\n```\n\n## Path Aliases\n\nIn `package.json`, there is a property named `_moduleAliases`. This object\ndefines the require() aliases used by both webpack and node.\n\nAliased paths are prefixed with one of two symbols, which denote different\nthings:\n\n`@` - component and template paths, e.g. `@components`\n\n`$` - server paths that are built by babel, e.g. `server/api`\n\nAliases are nice to use for convenience, and lets us avoid using relative paths\nin our components:\n\n```\n// This sucks\nimport SomeComponent from '../../../components/SomeComponent';\n\n// This is way better\nimport SomeComponent from '@components/SomeComponent';\n```\n\nYou can add additional aliases in `package.json` to your own liking.\n\n## Environment Variables\n\nIn development mode, environment variables are loaded by `dotenv` off the `.env`\nfile in your root directory. In production, you'll have to manage these\nyourself.\n\nAn example with Heroku:\n\n```\nheroku config:set FOO=bar\n```\n\n## CSS Modules\n\nThis project uses [CSS Modules](https://github.com/css-modules/css-modules).\nClass names should be in `camelCase`. Simply import the .scss file into your\ncomponent, for example:\n\n```\n├── components\n│   ├── Header.js\n│   ├── Header.scss\n```\n\n```\n// Header.scss\n.headerContainer {\n  height: 100px;\n  width: 100%;\n}\n```\n\n```\n// Header.js\nimport css from './Header.scss';\n\nconst Header = (props) =\u003e {\n  return (\n    \u003cdiv className={css.headerContainer}\u003e\n      {...}\n    \u003c/div\u003e\n  );\n}\n\n```\n\n## Redux Devtools\n\nThis project supports the awesome [Redux Devtools Extension](https://github.com/zalmoxisus/redux-devtools-extension).\nInstall the Chrome or Firefox extension and it should just work.\n\n## Pre-fetching Data for Server Side Rendering (SSR)\n\nWhen rendering components on the server, you'll find that you may need to fetch\nsome data before it can be rendered. The [component renderer](server/renderer/handler.js)\nlooks for a `fetchData` method on the container component and its child\ncomponents, then executes all of them and only renders after the promises have\nall been resolved.\n\n```\n//  As an ES6 class\n\nclass TodosContainer extends React.Component {\n  static fetchData = ({ store }) =\u003e {\n    return store.dispatch(fetchTodos());\n  };\n}\n\n// As a functional stateless component\n\nconst TodosContainer = (props) =\u003e {\n  const { todos } = props;\n  return (\n    // ...component code\n  );\n}\n\nTodosContainer.fetchData = ({ store }) =\u003e {\n  return store.dispatch(fetchTodos());\n}\n```\n\n## Async / Await\n\nThis project uses `async/await`, available by default in Node.js v8.x.x or\nhigher. If you experience errors, please upgrade your version of Node.js.\n\n## Testing\n\nThe default testing framework is Jest, though you can use whatever you want.\n\nTests and their corresponding files such as Jest snapshots, should be co-located\nalongside the modules they are testing, in a `spec/` folder. For example:\n\n```\n├── components\n│   ├── todos\n│   │   ├── TodoForm\n│   │   │   ├── spec\n│   │   │   │   ├── TodoForm.test.js\n│   │   │   ├── index.js\n│   │   │   ├── index.scss\n```\n\nTests can be written with ES2015, since it passes through `babel-register`.\n\n## Running Tests\n\nTo run a single test:\n\n```\nnpm test /path/to/single.test.js\n\n// Or, to watch for changes\nnpm run test:watch /path/to/single.test.js\n```\n\nTo run all tests:\n\n```\nnpm run test:all\n\n// Or, to watch for changes\nnpm run test:all:watch\n```\n\n## Running ESLint\n\n```\nnpm run lint\n```\n\nCheck the `.eslintignore` file for directories excluded from linting.\n\n## Changing the public asset path\n\nBy default, assets are built into `dist/public`. This path is then served by\nexpress under the path `assets`. This is the public asset path. In a production\nscenario, you may want your assets to be hosted on a CDN. To do so, just change\nthe `PUBLIC_ASSET_PATH` environment variant.\n\nExample using Heroku, if serving via CDN:\n\n```\nheroku config:set PUBLIC_ASSET_PATH=https://my.cdn.com\n```\n\nExample using Heroku, if serving locally:\n\n```\nheroku config:set PUBLIC_ASSET_PATH=/assets\n```\n","funding_links":[],"categories":["Marks"],"sub_categories":["Boilerplate"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcombine%2Funiversal-react-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcombine%2Funiversal-react-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcombine%2Funiversal-react-redux/lists"}