{"id":18756775,"url":"https://github.com/code-shoily/modular-mobx-boilerplate","last_synced_at":"2025-04-13T02:03:41.205Z","repository":{"id":76051222,"uuid":"65202479","full_name":"code-shoily/modular-mobx-boilerplate","owner":"code-shoily","description":"MobX + React + JavaScript + Aphrodite + Enzyme + Mocha + Hot-Loading + Redux DevTools","archived":false,"fork":false,"pushed_at":"2017-07-08T00:29:40.000Z","size":132,"stargazers_count":38,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-15T07:22:47.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-shoily.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}},"created_at":"2016-08-08T12:28:46.000Z","updated_at":"2019-10-24T17:43:16.000Z","dependencies_parsed_at":"2024-01-06T22:56:05.275Z","dependency_job_id":"75067b71-03a9-4464-9d63-06e43391edee","html_url":"https://github.com/code-shoily/modular-mobx-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/code-shoily%2Fmodular-mobx-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fmodular-mobx-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fmodular-mobx-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fmodular-mobx-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-shoily","download_url":"https://codeload.github.com/code-shoily/modular-mobx-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654036,"owners_count":21140235,"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-11-07T17:38:02.605Z","updated_at":"2025-04-13T02:03:41.160Z","avatar_url":"https://github.com/code-shoily.png","language":"JavaScript","funding_links":[],"categories":["Awesome MobX"],"sub_categories":["Boilerplates"],"readme":"# A boilerplate for using MobX/React with a modular folder structure\n### MobX + React + JavaScript + Aphrodite + Enzyme + Mocha + Hot-Loading + Redux DevTools\n\nThis is a boilerplate for developing with React + MobX. It uses a modular structure of folders for larger apps.\n\nWhen adding a new `app`, a new folder with `routes.js`, `components/` and `models/` should be created. The routes will include the `ReactRouter` routers, models will contain the `mobx` stores, and components will contain the `react` components. The `base app` contains the initial routes and components. Each apps may have a \"Base\" component which will wrap the `base/BaseComponent` (or not). You can add the app entry in the `aliases` section for import sanity. \n\nUpon adding a new `app`, `App.js` file should be updated in the (commented out) zones to have the imports and store initializations.\n\nA new app creation can be done by `python generate.py my-shiny-new-app` which should create the app folder, models, components, routes boilerplates and all you need then is to import the model instance and route component in the `App.js` region.\n\nIn addition, the following awesome libs are used and configured up-\n\n* **Webpack**: `webpack.config.js` and `webpack.production.config.js` (https://webpack.github.io/)\n* **Babel**: Configured to work with React, ES7 and React Hot Loader 3! (https://babeljs.io/)\n* **MobX**: \u003c3 \u003c3 \u003c3 (https://mobxjs.github.io/mobx/)\n* **ESLint**: Configured to work with React (http://eslint.org)\n* **Aphrodite**: It's inline styles, but they work! (https://github.com/Khan/aphrodite)\n* **Enzyme**: JavaScript Testing utilities for React (https://github.com/airbnb/enzyme)\n* **React Hot Loader 3**: Hot Loader for stateless components (https://github.com/gaearon/react-hot-boilerplate/pull/61)\n* **mobx-remotedev** MobX + ReduxDevTools Extension (https://github.com/zalmoxisus/mobx-remotedev)\n* **Why did you update**: no more unnecessary re-renders (https://github.com/garbles/why-did-you-update)\n* **Redbox React** RSOD for React (https://github.com/commissure/redbox-react)\n* **less-loader** Less loader for webpack with `AutoPrefix` and `CleanCSS` plugin\n\n## Installation\n```\ngit clone https://github.com/code-shoily/modular-mobx-boilerplate.git \u003cyour-project-name\u003e\ncd \u003cyour-project-name\u003e\nnpm install\nnpm start\n```\n\n## Usage\nDevelopment Build:  ``npm start``  \nProduction Build: ``npm run prod``  \nTesting: ``npm test`` or ``npm run test:watch`` for watching file change\n\n## Folder Structure\n```\n..root\n|-- static //production bundle.js, css, js, images etc\n|-- src\n\t|-- base\n\t  |-- components\n\t    |-- Base.jsx //Base component, stuff that all childrens will have\n\t    |-- SampleComponent.jsx //Any components\n\t  |-- models\n\t    |-- model1.js //MobX stores, instantiated object is exported\n\t    |-- model2.js\n\t\t|-- tests // Test specs\n\t\t  |-- browser.js\n\t\t|-- routes.js //Routes specific to base app.\n\t|-- DemoApp\n\t  |-- components\n\t    |-- DemoAppBase.jsx //App-local Base component\n\t    |-- SampleDemoAppComponent.jsx //Any components\n\t  |-- models\n\t    |-- demo-model1.js //MobX stores, instantiated object is exported\n\t    |-- demo-model2.js\n\t\t|-- tests // Test specs\n\t\t  |-- demo-app.spec.js\n\t\t|-- routes.js //Routes specific to demo app\n\t  App.js //The place that ties in all app subroutes and models and puts them in a provider.\n\t  Index.jsx //The Main guy, App.js hotloading happens here alongside Redbox, a11y etc\n```\n\n## App Generation\nYou can create new apps by using the `generator.py` script. For example, if you create `python generator.py todo-app` then it will create a `src/todo-app` folder and spit out the following message:\n\n```\n=== === Please add the following lines in the appropriate location in src/App.js === ===\n\n\n/* ------ TODO-APP APP --- --- */\n\nimport todoAppRoutes from './todo-app/routes'\nimport {todoAppModel} from './todo-app/models/todo-app'\n\n=== === Add the stores and routers in appropriate locations as marked === ===\n```\n\nYou can open up `src/App.js` to paste those imports and add the `todoAppModel` and `{todoAppRoutes}` in the areas marked with comments. Then you can go to `/todo-app` to see a \"Hello TodoApp\" message. The new folder structure comforms with the one mentioned before:\n\n```\n|-- todo-app\n  |-- components\n    |-- TodoAppBase.jsx\n    |-- TodoAppPage.jsx\n  |-- models\n    |-- todo-app.js\n  routes.js\n```\n\nOops, I missed the `tests` folder!\n\n## TODO\n* Polishing up the script (I made it quickly and careless for my own projects, since it's just a code generator...)\n* Creating scripts to create `stores` or `components` under an already created app model\n* Putting some test cases in (I am new to the JS testing scenario)\n* Make a cookbook style repository out of it with an app housing a particular recipe (i.e. OpenLayers Integration, Todo App, REST API Integration etc)\n\nBig thanks goes to the creator of [Reaxor](https://github.com/KadoBOT/reaxor) as I took a lot of ideas for setup from there. \n\nThis is still very much a work in progress, as I work with it and discover new stuff, I'll be extracting them into here from my projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-shoily%2Fmodular-mobx-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-shoily%2Fmodular-mobx-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-shoily%2Fmodular-mobx-boilerplate/lists"}