Isomorphic-React-Redux

What's all about

A simple react-redux frontend and expressjs backend workflow. All of the technolgies used in this project are followings.

• Yarn Dependency Management
• React
• React Router
• Express
• Babel ES6 transpiling
• Webpack Module Bundling
• Webpack Dev Middleware
• Redux
• Redux Dev Tools
• [React Router Redux](https://www.github.com/reactjs/react-router-redux] Handling route and Redux/React Router binding
• ESLint linting and maintaining code consistency
• ESLint config airbnb A mostly reasonable approach to Javascript
• Jest Testing
• Thunk allows you to write action creators that returns a function instead of an action
• Style LoaderAdds Css to the DOM by injecting a <style> tag
• Nodejs Dashboard Dashboard for node.js app from the terminal
• Webpack Dashboard A CLI Dashboard for webpack from the terminal

Installation

yarn install or npm install

Running Backend(Api-Server)

You can start api server by running npm run api-server. Api Server will be spawn at port 3000 with Nodejs Dashboard cli.

Database Implementation

This boilerplate ship without any database logic. All of the data in models are implemented as the temporary data which will only available at run time and did not persist. Database implemention is as your own choices.

Running Frontend(React Redux App)

You can start webpack server by running npm run open-src. A webpack dashboard will be spawned and webpack server will be automatically opend at port 8080.

Using Redux DevTools

CTRL+H Toggle DevTools Dock CTRL+Q Move DevTools Dock Position

If you want to disable the dev tools during development, set DEVTOOLS to false in /webpack.dev.config.js. FYI, DevTools are not enabled at production.

Testing

Facebook Jest to run unit tests on both client and api side. All of test reside in test folder of app and src/js folder.

Testing the api

You can test expressjs code by running these command. :watch flag for test watching purposes.

npm run api-test
npm run api-test:watch

Testing the React app

You can test reactjs code by running this command. :watch flag for test watching purposes.

npm run react-test
npm run react-test:watching

Testing both api and React app

You can test both expresjs and react app by running this command. :watch flag for test watching pruposes.

npm run test
npm run test:watch

Code coverage

Jest will collect code coverage information from entire project file, including untested files. All of the coverage reports can be found at coverage folder.

npm run coverage

Linting

Use eslint-config-airbnb for maitaining javascript code consistency for both frontend and backend api.

npm run lint
npm run lint:watch

Stylesheet

There's no css preprocesser is shipped with this boilerplate. You can define style property in src/css directory. All of the style will be exported to the dist/ folder with css map file.

Production Build

npm run build
npm run build-html
npm start

Contributing

Please feel free to contribute to this project, either by fixing bugs or other additional features.

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin my-new-feature)

License

This software is licensed under MIT license.