Basic App Structure for feathers.js

structure.md

This guide describes a way to structure a feathers-client application with react and node. It is based on ideas from Mantra and personal experience.

Root level:

node_modules/
└── ...
dist/ 
└── ...
src/   
└── ...
test/          
└── ...
.babelrc
.gitignore
package.json
README.md
server.js     
webpack.config.js

Your root level folders contain the different major parts of your application.

dist/: Webpack build directory

src/: App files

test/: UI and Unit test files

node_modules/: Obvious

---

Your root level folders contain the different major parts of your application.

dist/

Webpack build directory

src/

App files

test/

UI and Unit test files

node_modules/

Obvious

Your root level folders contain the different major parts of your application.

.babelrc

.gitignore

package.json

README.md

server.js

Starting server and deliver build

webpack.config.js

Source folder:

src/
├── modules/    # modules will get compiled by webpack
│   ├── core/
│   │   └── ...
│   └── ...
│       └── ...
└── static/     # static files will just get copied by webpack
    ├── fonts/
    │   └── ...
    └── images/ 
        └── ...

Module folder:

module/
├── actions/    # actions are called in components and e.g. update data
    └── ...
├── components/ # "dumb" components shouldn't implement any logic/data fetching but get actions and data via props
    └── ...
├── containers/ # containers compose actions with a component or view
    └── ...
├── helpers/    # (optional, recommended only in core module)
    └── ...
├── views/      # (optional) this explains components wich are displayed in a route
    └── ...
├── styles/     # less/sass file per component. @require() in component/view file
    └── ...
├── routes.jsx
└── index.js

Todo:

• account abstraction
• activity based permissions (http://ryankirkman.com/2013/01/31/activity-based-authorization.html)
  • role inheritance groups
• router setup
  • permissions on router controller level (login / logout)
  • register routes
• actions
  • redirects only in actions
  • always promises as result
• render flow
  • app -> router -> container -> component ( -> container -> component -> ...)
• Tests
  • prevent complexity: one file per module (modulename.test.js)
• Dependency Injection (and why you don't need it)
• Add settings / config

https://github.com/airbnb/javascript/tree/master/react