{"id":24605274,"url":"https://github.com/dominictobias/universal-react","last_synced_at":"2025-09-09T11:33:50.975Z","repository":{"id":57386602,"uuid":"44670014","full_name":"dominictobias/universal-react","owner":"dominictobias","description":"A universal react starter, with routing, meta, title, and data features","archived":false,"fork":false,"pushed_at":"2019-01-05T04:07:25.000Z","size":147,"stargazers_count":243,"open_issues_count":3,"forks_count":50,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-06T08:11:31.076Z","etag":null,"topics":["isomorphic","javascript","react","redux","server-side-rendering","universal"],"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/dominictobias.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-10-21T10:51:17.000Z","updated_at":"2025-03-23T10:07:00.000Z","dependencies_parsed_at":"2022-09-05T14:01:25.511Z","dependency_job_id":null,"html_url":"https://github.com/dominictobias/universal-react","commit_stats":null,"previous_names":["sekoyo/universal-react","dominictobias/universal-react"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominictobias%2Funiversal-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominictobias%2Funiversal-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominictobias%2Funiversal-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominictobias%2Funiversal-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dominictobias","download_url":"https://codeload.github.com/dominictobias/universal-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999859,"owners_count":21031046,"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":["isomorphic","javascript","react","redux","server-side-rendering","universal"],"created_at":"2025-01-24T16:08:29.151Z","updated_at":"2025-04-09T08:08:23.107Z","avatar_url":"https://github.com/dominictobias.png","language":"JavaScript","readme":"# Universal React\n\nThis boilerplate aims at solving the MVP (Minimal Viable Product) of a universal app while trying to keep the base unopinionated elsewhere and simple to read and extend.\n\n[![Universal React on NPM](https://img.shields.io/npm/v/universal-react.svg)](https://www.npmjs.com/package/universal-react)\n[![Dependency Status](https://david-dm.org/DominicTobias/universal-react.svg)](https://david-dm.org/DominicTobias/universal-react)\n\nFeatures\n--------\n\n- Universal routing [react-router](https://github.com/rackt/react-router)\n- [Redux](https://rackt.github.io/redux/)\n- Hot reloading\n- Title, meta, css, and scripts overridable by each component [react-helmet](https://github.com/nfl/react-helmet)\n- Universal data fetching/rehydration on the client [cross-fetch](https://github.com/lquixada/cross-fetch)\n- No other templating engines - React from root down\n- 404 and redirect handling\n- Shared app config\n- [Webpack](https://webpack.github.io) and [Babel](https://babeljs.io)\n\nSince there are so many opinions on how to use css (vanilla, sass, less, react css modules etc) I've left it up to you.\n\n## Install \u0026 run\n\n```\nnpm i \u0026\u0026 npm start\n```\n\nGo to `http://localhost:3000/`.\n\n## Build\n\n```\nnpm run build\n```\n\nThis will create a `dist/` folder with a `app.min.js` which will be used on any environment which isn't undefined (i.e. not local).\n\n```\nnpm run start-prod\n```\n\nThis will build and then run your app with environment set to production, so that `app.min.js` and `config/production.js` are used.\n\n## Adding routes\n\nAdd your routes in `Routes.js`.\n\n```js\n\u003cRoute path=\"users\" component={Users} /\u003e\n```\n\n## Title and Meta\n\nThe parent `App.js` defines the base title and meta in a `Helmet` component. Any sub-component can override/add properties (even adding scripts and css). See the [react-helmet docs](https://github.com/nfl/react-helmet) for more info.\n\n## Config\n\nYou can store app settings under `app/config/`. A file matching `process.env.NODE_ENV` will be loaded, for example `app/config/production.js`. If `process.env.NODE_ENV` is undefined it will fallback to `app/config/default.js`. You can access the correct config with:\n\n```js\nimport config from './config';\n```\n\n## Data fetching and client hydration\n\nRead the [Redux](https://rackt.github.io/redux/) guide if you are new to redux. Write Redux actions and stores as normal, and if the action creator is asynchronous then it should return a [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) (or a [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)) in the inner function.\n\nYou should write dispatches for actions that must be called for the container to be ready:\n\n```js\nstatic readyOnActions(dispatch, params) {\n  return Promise.all([\n    dispatch(UserActions.fetchUserIfNeeded(params.id))\n  ]);\n}\n```\n\nYou should also invoke the actions in `componentDidMount`. This ensures that if the component is reached on the client, then the same actions will be invoked. It's up to the action to figure out if fetches for data need to be made or not:\n\n```js\ncomponentDidMount() {\n  User.readyOnActions(this.props.dispatch, this.props.params);\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominictobias%2Funiversal-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdominictobias%2Funiversal-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominictobias%2Funiversal-react/lists"}