Heart Disease Prediction App

This project was generated using React Webpack Starter.

Development

Running the Project

Start development environment running

$ yarn start
# or with npm
$ npm run start

Start development environment with docker running

$ yarn docker:dev
# or with npm
$ npm run docker:dev

docker:dev generate a docker image named heart-disease-prediction-app and run it in a container. Run docker:dev:start for only start a container without build a new docker image

While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:

yarn <script>	Description
start	Serves your app at localhost:8091
build:dev	Builds the application to ./dist (the build output dir could be configured in ./config/common-paths.js)
build:dev:watch	Builds the application and watch for changes
build:dev:analyze	Builds the application with Bundle Analyzer and Visualizer Plugins instaled
build:dev:dashboard	Builds the application with Dashboard
serve:dev:dashboard	Builds the application with Dashboard
test	Runs unit tests with Jest. See testing
test:watch	Runs test in watch mode to re-run tests when changed
lint	Lints the project for potential errors
lint:fix	Lints the project and fixes all correctable errors

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

Production

Generate production files running

$ yarn build:prod
# or with npm
$ npm run build:prod

Generate and serve production files running

$ yarn serve:prod
# or with npm
$ npm run serve:prod

Project Structure

.
├── config                   # Webpack and Jest configuration
├── public                   # Static public assets (not imported anywhere in source code)
│   └── index.html           # Main HTML page template for app
├── src                      # Application source code
│   ├── components           # Global Reusable Components
│   ├── containers           # Global Reusable Container Components and pplication Layout in which to render routes
│   ├── routes               # Main route definitions and async split points
│   │   └── AppRoutes.jsx    # Bootstrap main application routes
│   ├── styles               # Application-wide styles
|   |   └── custom           # Custom application styles
|   ├── ...
|   ├── i18n.js              # i18n configuration
|   ├── index.jsx            # Application bootstrap and rendering with store
├── static                   # Static public assets imported anywhere in source code
└── test                     # Unit tests

Testing

To add a unit test, create a .test.js file anywhere inside of ./test. Jest and webpack will automatically find these files.

More info

You can learn more about the operation of this starter kit in the official github repository.