Home

Awesome

A boilerplate for using MobX/React with a modular folder structure

MobX + React + JavaScript + Aphrodite + Enzyme + Mocha + Hot-Loading + Redux DevTools

This is a boilerplate for developing with React + MobX. It uses a modular structure of folders for larger apps.

When 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.

Upon adding a new app, App.js file should be updated in the (commented out) zones to have the imports and store initializations.

A 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.

In addition, the following awesome libs are used and configured up-

Installation

git clone https://github.com/code-shoily/modular-mobx-boilerplate.git <your-project-name>
cd <your-project-name>
npm install
npm start

Usage

Development Build: npm start
Production Build: npm run prod
Testing: npm test or npm run test:watch for watching file change

Folder Structure

..root
|-- static //production bundle.js, css, js, images etc
|-- src
	|-- base
	  |-- components
	    |-- Base.jsx //Base component, stuff that all childrens will have
	    |-- SampleComponent.jsx //Any components
	  |-- models
	    |-- model1.js //MobX stores, instantiated object is exported
	    |-- model2.js
		|-- tests // Test specs
		  |-- browser.js
		|-- routes.js //Routes specific to base app.
	|-- DemoApp
	  |-- components
	    |-- DemoAppBase.jsx //App-local Base component
	    |-- SampleDemoAppComponent.jsx //Any components
	  |-- models
	    |-- demo-model1.js //MobX stores, instantiated object is exported
	    |-- demo-model2.js
		|-- tests // Test specs
		  |-- demo-app.spec.js
		|-- routes.js //Routes specific to demo app
	  App.js //The place that ties in all app subroutes and models and puts them in a provider.
	  Index.jsx //The Main guy, App.js hotloading happens here alongside Redbox, a11y etc

App Generation

You 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:

=== === Please add the following lines in the appropriate location in src/App.js === ===


/* ------ TODO-APP APP --- --- */

import todoAppRoutes from './todo-app/routes'
import {todoAppModel} from './todo-app/models/todo-app'

=== === Add the stores and routers in appropriate locations as marked === ===

You 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:

|-- todo-app
  |-- components
    |-- TodoAppBase.jsx
    |-- TodoAppPage.jsx
  |-- models
    |-- todo-app.js
  routes.js

Oops, I missed the tests folder!

TODO

Big thanks goes to the creator of Reaxor as I took a lot of ideas for setup from there.

This 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.