Finpal

This Repo contains all sources used to build Finpal WebApp.

This web app was made with the help of:

React, React Router, Webpack 2, Redux

Prerequisite

• You should install first Node JS or NVM Note: requires a node version >= 6 and an npm version >= 3.

• Then make a npm install

Getting started

After that, you should be able to start the application with:

npm run start:dev

Docker container

You can test the webapp production build directly in a docker container.

docker-compose build
docker-compose up

Access http://localhost:8081 to see the webapp.

Using Redux DevTools

Redux Devtools are enabled by default in development mode, but you need to install Redux DevTools chrome extension

DevTools are not enabled during production.

Directory Structure

• coverage/ - files produced by istanbul to see test coverage of the app.
• public/ - global assets like image, fonts...
• src/ the source code and tests of the application, take a look at the modules in this folder, you should structure your application following those conventions.
• .babelrc - babelrc configuration.
• .editorconfig - editorconfig configuration to maintain consitent coding styles between IDEs and Editors. EditorConfig
• .eslintignore - ESLint ignore configuration.
• .eslintrc - ESLint configuration. Pluggable linting utility for JavaScript.
• .gitignore - Files to be ignored by Git
• docker-compose.yml Configure application’s service for docker container
• Dockerfile Build docker images automatically
• index.js - nodemon configuration that will monitor for any changes in the source and automatically restart node server (only for development)
• nodemon.json - main entry point to launch node server.
• package.json - dependencies & devdependencies.
• webpack-assets.json - Json file outputs with the paths of webpack generated assets

Coding Style

ESLINT

To run ESLint you could run

• npm run lint:js
• Use atom with this plugin : https://github.com/AtomLinter/linter-eslint. In settings make sure "Use global ESLint installation is unchecked to be sure that you are using project eslint configuration. Plus, don't hesitate to check fix errors on save !
• You can override airbnb rules, add plugins or settings by editting .eslintrc file.
• Discuss with team to improve/remove rules

Editing the SCSS files

This project uses local styles using css-loader. The way it works is that you import your stylesheet at the top of the class with your React Component, and then you use the classnames returned from that import. Like so:

import styles from './styles.scss';

Then you set the className of your element to match one of the CSS classes in your SCSS file, and you're good to go!

<div className={styles.mySection}> ... </div>

Don't prefix your css rules (-webkit, -moz, ...). It will be done by autoprefixer.

Our SCSS modules are following the BEM Methodology for the naming.The patterns are :

.block {}
.block__element {}
.block--modifier {}

Images

Now it's possible to render the image both on client and server. Please refer to this issue #39 for more detail discussion, the usage would be like below (super easy):

import logoImage from './logo.png';

Testing

Unit Tests

The project uses Jest to run unit tests.

To run the tests in the project, just simply run:

npm test

To run the tests in watch mode, just simply run:

npm run test:watch

Dependencies

Each dependency should be installed with npm install -S command. Each dev dependency should be installed with npm install -D command.

npm install command uses npm-shrinkwrap. When you add a new dependency or update the version of an existing dependency, keep in mind that you have to run npm shrinkwrap --dev.

Deploy webApp

TODO

---

Thanks