A modular platform for Redux Isomorphic applications
This repository is a modular abstraction to build a ReactJS web application based on Redux paradigm. You can use it to quickly scaffold your React web application projects and development environments for these projects.
This seed should clarify how to wire up all the modules of your application, even when we understand that in some cases there must be some changes needed by the structure to fit your needs correctly
React-Base makes use of the latest tools to improve your workflow, and enables you to create future ready applications:
- Redux based architecture
- Isomorphic / Universal Javascript Apps
- Separate build configurations depending on target environment
- Webpack for the build toolchain
- Development & Production server using express and webpack-dev-server
- JSX and ES6 transpilation using Babel
- Hot Reload/Live Reload support for Js & Css using Webpack HMR
- Container and component generators using Yeoman
- Persistent data modeling using ImmutableJS
- Mocha as testing framework
- Enzyme/JsDom for unit/ui testing
- Nyc for code coverage
- CssModules based
- PostCSS processing with isomorphic support.
- CSS Vars using Cssnext
- Code Linting using Eslint
- Css Linting using CssLint
- Airbnb React Style Guide
To get you started, you need to meet the prerequisites, and then follow the installation instructions.
React-Base makes use a number of NodeJS tools to initialize and test React-Base. You must have node.js 5.0.0 at least, and its package manager (npm) installed. You can get it from nodejs.org.
You can clone our Git repository:
$ git clone https://github.com/mariolugo/react-redux-starter.git
Setting up React-Base is as easy as running:
$ npm install
This command will install all the required dependencies and start your development server, which takes care of all the changes you make to your code and runs all the awesome stuff that ends with your code automagically transpiled and running on your browser.
Please note that npm install is only required on your first start, or in case of updated dependencies.
Once all the dependencies are installed, you can run $ npm run start to initialize your development server using webpack-dev-server express middleware.
The dev server uses HMR (Hot module replacement) that injects updated modules into the bundle in runtime. It's like LiveReload
React-base is based on Redux paradigm so you can find all the typical entities of an Redux project like reducers , store, actions , etc.
There are two main folders:
-
src/base/contains React-base platform bootstrapping code. -
src/app/is the place where to put your application source code.
React-base uses a "featured based" distribution, so all the necessary code for each page/features is located in its own folder inside containers folder as in src/app/containers/myContainer
A container is a React Component who contains other components, Redux entities, functions. Each container is self-contained and represents a feature like "clients" or "products" and it contains all the necessary stuff.
actions/
components/
models/
reducers/
types/
React-base uses Yeoman to generate new application containers or components.
To generate a new container run:
$ npm run generate:container
You'll be asked to provide a name for your container. After that, React-base will create all the necessary folder and file template structures you, and will rebuild the file indexes (routes, reducers, models, etc), so you don't have to worry about including all the required imports.
After that, you can access to your container from http://localhost:8000/myContainer
You can rebuild the file indexes (reducers, models and routes) running $ npm run regenerate
As with containers, React-base can automate components creation for you. To create a new component, just type:
$ npm run generate:component
Same as before, you will be asked for a component name, and after that React-base will do the rest, placing a component template under app/components, and rebuilding all the indexes.
You can generate a complete distribution source ready for production enviroments.
$ npm run build will create a minified version for your application, ready for production.
$ npm run start:prod will run production enviroment of your application serving content from dist directory.
React base uses - Enzyme a testing utillity created by Airbnb for unit testing and Ui testing using Airbnb so you can run your ui testing without a browser.
You can write your tests normally using Mocha and Chai for assertions.
$ npm run test will perform your unit testing, or npm test:coverage to run your tests and display a code coverage report.
React base uses Nyc for code coverage and you can generate reports in console or icov/html format.
$ npm run test will perform your code coverage, generating an html report located in coverage/ folder.
Anyone and everyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines: