Fineract Web

This is a web application built on top of Apache Fineract. It is a Single-Page App (SPA) written in ReactJS, Redux, Bootstrap and other related technologies.

Building in dev

1. Install Node 8 or newer.
2. Navigate to this project's root directory on the command line.
3. Install Node Packages. - npm install
4. Update process.env.API_URL in webpack.config.dev.js with URL to your Apache Fineract instance.
5. Start the app - npm start.
6. Browse to http://localhost:3000
7. Install React developer tools and Redux Dev Tools in Chrome.
8. To run the tests in watch mode - npm test
9. Having issues? See below.

Having Issues?:

1. Run npm install - If you forget to do this, you'll get an error when you try to start the app later.
2. Don't run the project from a symbolic link. It will cause issues with file watches.
3. Delete any .eslintrc in your user directory and disable any ESLint plugin / custom rules within your editor since these will conflict with the ESLint rules already defined in the codebase.
4. On Windows? Open your console as an administrator. This will assure the console has the necessary rights to perform installs.
5. Ensure you do not have NODE_ENV=production in your env variables as it will not install the devDependencies. To check run this on the command line: set NODE_ENV. If it comes back as production, you need to clear this env variable.
6. Nothing above work? Delete your node_modules folder and re-run npm install.

Building for Production

1. Install Node 8 or newer.
2. Navigate to this project's root directory on the command line.
3. Install Node Packages. - npm install
4. Update process.env.API_URL in webpack.config.prod.js with URL to your Apache Fineract instance.
5. Start the app - npm run build.
6. Copy the contents of the build folder to your web server's document root.
7. Be sure to configure your web server to redirect all calls to index.html so that the routing is handled by ReactJS

Production Dependencies

Dependency	Use
bootstrap	CSS Framework
immer	Helper for working with immutable data
prop-types	Declare types for props passed into React components
react	React library
react-dom	React library for DOM rendering
react-redux	Connects React components to Redux
react-router-dom	React library for routing
react-toastify	Display messages to the user
redux	Library for unidirectional data flows
redux-thunk	Async redux library
reselect	Memoize selectors for performance

Development Dependencies

Dependency	Use
@babel/core	Transpiles modern JavaScript so it runs cross-browser
babel-eslint	Lint modern JavaScript via ESLint
babel-loader	Add Babel support to Webpack
babel-preset-react-app	Babel preset for working in React. Used by create-react-app too.
css-loader	Read CSS files via Webpack
cssnano	Minify CSS
enzyme	Simplified JavaScript Testing utilities for React
enzyme-adapter-react-16	Configure Enzyme to work with React 16
eslint	Lints JavaScript
eslint-loader	Run ESLint via Webpack
eslint-plugin-import	Advanced linting of ES6 imports
eslint-plugin-react	Adds additional React-related rules to ESLint
fetch-mock	Mock fetch calls
html-webpack-plugin	Generate HTML file via webpack
http-server	Lightweight HTTP server to serve the production build locally
jest	Automated testing framework
mini-css-extract-plugin	Extract imported CSS to a separate file via Webpack
npm-run-all	Display results of multiple commands on single command line
postcss-loader	Post-process CSS via Webpack
react-test-renderer	Render React components for testing
react-testing-library	Test React components
redux-immutable-state-invariant	Warn when Redux state is mutated
redux-mock-store	Mock Redux store for testing
rimraf	Delete files and folders
style-loader	Insert imported CSS into app via Webpack
webpack	Bundler with plugin ecosystem and integrated dev server
webpack-bundle-analyzer	Generate report of what's in the app's production bundle
webpack-cli	Run Webpack via the command line
webpack-dev-server	Serve app via Webpack