{"id":15696497,"url":"https://github.com/ctrlplusb/react-universally-opinionated","last_synced_at":"2025-05-08T23:24:29.280Z","repository":{"id":66058725,"uuid":"61620103","full_name":"ctrlplusb/react-universally-opinionated","owner":"ctrlplusb","description":"[WIP] An opinionated version of React, Universally.","archived":false,"fork":false,"pushed_at":"2016-06-27T11:41:17.000Z","size":129,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T19:21:15.541Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctrlplusb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-21T09:22:01.000Z","updated_at":"2019-04-06T04:40:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"259b4d8a-936f-4c7b-803b-cdd90a0d581f","html_url":"https://github.com/ctrlplusb/react-universally-opinionated","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/ctrlplusb%2Freact-universally-opinionated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-universally-opinionated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-universally-opinionated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-universally-opinionated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctrlplusb","download_url":"https://codeload.github.com/ctrlplusb/react-universally-opinionated/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253161777,"owners_count":21863786,"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":[],"created_at":"2024-10-03T19:09:11.301Z","updated_at":"2025-05-08T23:24:29.232Z","avatar_url":"https://github.com/ctrlplusb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WIP WIP WIP\n\nThis is very much work in progress.  You can have a look if you like, I am trying to list the features in the README as I add them (see below).  I wouldn't try and use this as a base project though, its still far from where it needs to be.  Once its ready this message will disappear.\n\n---\n\n\u003cp align='center'\u003e\n  \u003ch1 align='center'\u003eReact, Universally (Opinionated)\u003c/h1\u003e\n  \u003cp align='center'\u003e\u003cimg width='150' src='https://raw.githubusercontent.com/ctrlplusb/assets/master/logos/react-universally.png' /\u003e\u003c/p\u003e\n  \u003cp align='center'\u003eA highly opinionated expansion of the \u003ca href=\"https://github.com/ctrlplusb/react-universally\"\u003eReact, Universally\u003c/a\u003e boilerplate.\u003c/p\u003e\n\u003c/p\u003e\n\n## TOC\n\n - [About](https://github.com/ctrlplusb/react-universally#about)\n - [Features](https://github.com/ctrlplusb/react-universally#features)\n - [Overview](https://github.com/ctrlplusb/react-universally#overview)\n - [Project Structure](https://github.com/ctrlplusb/react-universally#project-structure)\n - [npm script commands](https://github.com/ctrlplusb/react-universally#npm-script-commands)\n - [References](https://github.com/ctrlplusb/react-universally#references)\n\n## About\n\nThis boilerplate contains an opinionated set of features and dependencies on top of the super minimal [React, Universally](https://github.com/ctrlplusb/react-universally) boilerplate.  Use this as a repository to fish out further ideas for your own implementation - I highly recommend you use the [React, Universally](https://github.com/ctrlplusb/react-universally) boilerplate as your project starting point rather than this version.\n\n## Features\n\n  - Node V6\n  - `express` web server.\n  - `react` as the view.\n  - `react-router` as the router, with an asynchronous routing configuration.\n  - `redux`, `react-redux` and `redux-observable` for uni-directional application state management. ___WIP___\n  - `redial` to manage data fetching pre-render for the server. ___WIP___\n  - `rethinkdb` as the database. ___WIP___\n  - `rethinkdbdash` as our `rethinkdb` client. ___WIP___\n  - `socket.io` for our websocket layer. ___WIP___\n  - `lodash` as our utility library along with the babel/webpack optimisations. __WIP__\n  - `rxjs` v5 as our streaming library.\n  - Facebook's flow for static type checking.\n  - Server side rendering.\n  - Full ES2015 support via babel where needed.\n  - Bundling of both client and server using `webpack`.\n  - A development and optimised production webpack configuration.\n  - Client bundle is split by routes as well as by vendor modules.\n  - Tree-shaking for smaller build output. \n  - Live development - i.e. hot reloading of both client and server source.\n  - Application configuration via environment file.\n  - Redux Dev Tools Extension auto integration for development.\n  - Unit testing support via `mocha`, `enzyme`, `chai` and `sinon`. ___WIP___\n\n## Overview\n\nThis boilerplate uses Webpack 2 to produce bundles for both the client and the\nserver code.  You will notice two Webpack configuration files that allow you to target the respective environments:\n\n   - `webpack.client.config.js`\n   - `webpack.server.config.js`\n\nBoth of these then call into the `webpackConfigFactory.js` in order to generate their respective webpack configurations.  I've tried to keep the webpack configuration as centralized and well documented as possible as it can be a confusing topic at times.\n\nMy reasoning for using webpack to bundle both the client and the server is to bring greater interop and extensibility to the table.  This will for instance allowing server bundles to handle React components that introduce things like CSS or Images (as and when you add the respective loaders).\n\nGiven that we are bundling our server code I have included the `source-map-support` module to ensure that we get nice stack traces when executing our code via node.\n\nAll the source code is written in ES2015, and I have explicitly kept it to the true specification (bar JSX syntax).  As we are following this approach it is unnecessary for us to transpile our source code for the server into ES5, as `node` v6 has native support for almost all of the ES2015 syntax.  Our client (browser) bundle is however transpiled to ES5 code for maximum browser/device support.\n\nThe application configuration is supported by the `dotenv` module and it requires you to create a `.env` file in the project root (you can use the `.env_example` as a base).  The `.env` file has been explicitly ignored from git as it will typically contain environment sensitive/specific information.  In the usual case your continuous deployment tool of choice should configure the specific `.env` file that is needed for a target environment.\n\n## Configuring your System\n\n__TODO:__ Details on horizon/rethinkdb install and configuration.\n\n## Project Structure\n\n```\n/\n|- build // The target output dir for our build commands.\n|  |- client // The built client module.\n|  |- server // The built server module\n|\n|- src  // All the source code\n|  |- server // The server specific source\n|  |- client // The client specific source\n|  |- shared // The shared code between the client/server\n|\n|- .env_example // An example from which to create your own .env file.  \n|- devServer.js // Creates a hot reloading development environment\n|- webpack.client.config.js // Client target webpack configuration\n|- webpack.server.config.js // Server target webpack configuration\n|- webpackConfigFactory.js  // Webpack configuration builder\n```  \n\n## npm script commands##\n\n### `npm run development`\n\nStarts a development server for both the client and server bundles.  We use `react-hot-loader` v3 to power the hot reloading of the client bundle, whilst a filesystem watch is implemented to reload the server bundle when any changes have occurred.\n\n### `npm run build`\n\nBuilds the client and server bundles, with the output being production optimized.\n\n### `npm run start`\n\nExecutes the server.  It expects you to have already built the bundles either via the `npm run build` command or manually.\n\n### `npm run clean`\n\nDeletes any build output that would have originated from the other commands.\n\n## Troubleshooting ##\n\n___Q:___ __I see `react-router` warnings during hot reloading.__\n\nFor example:\n\n```\nWarning: [react-router] You cannot change \u003cRouter history\u003e;\nWarning: [react-router] You cannot change \u003cRouter routes\u003e;\n``` \n\nFret not! This is a known issue when using React Hot Loader 3 alongside React Router.  It is being looked in to.  Everything still works, unfortunately you just get a few warnings alongside your changes.  They are harmless though, promise. :)\n\n## References ##\n\n  - __Horizon__ - http://horizon.io/\n  - __Webpack 2__ - https://gist.github.com/sokra/27b24881210b56bbaff7\n  - __React Hot Loader v3__ - https://github.com/gaearon/react-hot-boilerplate/pull/61\n  - __dotenv__ - https://github.com/bkeepers/dotenv\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctrlplusb%2Freact-universally-opinionated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctrlplusb%2Freact-universally-opinionated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctrlplusb%2Freact-universally-opinionated/lists"}