Awesome
RetaxSeed
This project is a generic react seed using retax. This project is production ready. All the build process is handled by builder-react-fullstack.
What does this seed include?
Libraries:
- retax
- React >15.0.0
- Redux
- react-router
- react-router-redux
- ImmutableJS
- reselect
- redial
- material-ui
- radium
- react-helmet
- redux-form
App Features
- Fake api backend to provide basic end-points
- Authentication support (signin / signout)
- Roles and access levels support
- User section (use user as login to access to the user page)
- Admin section (use admin as login to access to the admin page)
- Info page (displays basic session information)
- Error Handling
- Loading Handling
- Different themes for user/admin
Technical Features
- Server Rendering
- Inline styles with Radium
- Material Design
- Routing support
- Code splitting support
- Immutable and non immutable redux reducers support
- Built-in API Http client using retax Api module
- Dependency injection (to inject API Http clients into cctions creators and to inject actions creators into components) using retax
Getting started
npm install
npm start
This will run the fake api backend and the frontend server. In development, the app includes react-hot-reload allowing edit in real time.
Project structure
./src
: Source code./src/actions
: Actions creators./src/api
: Api clients./src/components
: Presentationnal components (those don't depend on redux and are very dumb!)./src/config
: App config./src/constants
: App constants (includes Actions names)./src/decorators
: Higher-order components./src/helpers
: Various app helpers (eg. role and access levels checker)./src/reducers
: Redux reducers./src/routes
: Application routes. A route is typically a folder with the following structure:./index.js
: The react-router route object./container/Container.js
: The container component (this one is aware of redux)./selector/selectors.js
: Container component specific redux selectors./component/ContainerWrapper.js
: Wrapper component mediating other components (It should include only components from./src/components
. ie: presentationnal components)
./src/selectors
: Reselect base selectors./src/store
: Middlewares and store enhancers./src/themes
: Theme configuration./src/**/__tests__/
: Test code./src/retax.config.js
: retax configuration file./src/clientEntry.js
: Client entry./src/serverEntry.js
: (Front-end) Server entry
Tasks
npm run api
: Start the fake back-end api servernpm run frontend
: Start the front-end servernpm start
: Start the back-end and front-end server and watch for file changesnpm run build
: Build the app. The output is in the ./build folder. You could run this command with these options: (eg.npm run build -- -- --release
(don't forget the-- --
))--release
: minify the bundle--devtools
: include redux-devtools--react-perf
: include react addons perf--isomorphic
: include server rendering
npm test
: Run all tests in mochanpm run lint
: Lint the code of the componentnpm run tdd
: Run all tests in watch modenpm run release -- -- semverComptaibleString
: Create a new component version. Check here to see how it works
Roadmap
- Migrate the seed to typescript when typescript@2.0.0 is out
- Migrate the test framework to jest. This will reduce the number of dependencies.