• genomic-sequence-visualizer
• Installing / Getting started
• Developing
  • Built With
  • Development commands
    • Dev-Server
    • Type-Checker (Flow)
      • Required module not found
    • Linters
    • Testing
  • Building
  • CI
• Versioning
• Style guide

Genomic sequence visualizer written in react/redux

To install all project dependencies simply run

npm i

This project includes quite a few opinionated settings which where made according to our own guidelines. Therefore this template includes:

• React as view-library
• Redux for state management
• Redux-loop for sideeffects
• Reselect for selector memoization
• Styled-components for component level CSS styling
• Axios for request handling
• Webpack as module bundler, dev server and build tool
• Babel for ES6 and Flow transpilation
• Flow as type-checker
• Standard as JS linter
• Jest as testing framework
• normalize.css as CSS-reset

To start the development server run:

npm start

This and start an instance of webpack-dev-server as well as an instance of a json-server which provides a fake api. From then on the whole project will rebuild, run your JS files through the Flow type-checker and lint your JS with standard whenever you save a file.

To separately type-check your JS-files, run:

npm run flow

To add third party library flow support use flow-typed.

If the library of your choice does not support flow, you can add an entry to flow-typed/libDefs.js. The declaration should look like this:

declare module 'myModule' {
  declare module.exports: any
}

If a local module is not resolved correctly you can add an option to the .flowconfig like so:

[options]
module.system.node.resolve_dirname=src

To separately lint your JS-files, run:

npm run lint

or to autmatically fix issues if possible, run:

npm run lint:fix

Tests should usually live next to their base files and should be named like: <myBaseFile>.test.js.

To run Jest an check if your tests pass invoke:

npm run test

To run jest and generate coverage, run:

npm run test:coverage

To view the coverage files inside your browser, open the index.html inside coverage/lcov-report/.

To continuously run Jest and have Jest watch for changes, run:

npm run test:watch

To build the project, run:

npm run build

This will compile, minify and bundle everything and put all packaged files into the dist/ directory (if there is no such directory it will just be newly created, an existing directory will be removed first). To allow our clients browsers to cache vendor files and only update the cache when it is really necessary, all important filenames include hashes for reference inside the built manifest file.