/PROPHETIC

PROPHETIC: PRediction Of Pneumonia in Hospitalized patiEnts in The ICu. Web application and platform for storing and sharing the study's quantitative data. PROPHETIC Study, a.k.a. CTTI Prospective Observational Study of the Risk Factors for Hospital-Acquired and Ventilator-Associated Bacterial Pneumonia (HABP/VABP) or Risk Factors for HABP/VABP Study.

Primary LanguageJavaScriptMIT LicenseMIT

PROPHETIC: PRediction Of Pneumonia in Hospitalized patiEnts in The ICu. Web application and platform for storing and sharing the study's quantitative data. PROPHETIC Study, a.k.a. CTTI Prospective Observational Study of the Risk Factors for Hospital-Acquired and Ventilator-Associated Bacterial Pneumonia (HABP/VABP) or Risk Factors for HABP/VABP.

This app runs a node server API and a React client on Heroku

Design Points

A combo of two npm projects, the backend server and the frontend UI. So there are two package.json configs.

  1. package.json for Node server & Heroku deploy
    • heroku-postbuild script compiles the webpack bundle during deploy
    • cacheDirectories includes client/node_modules/ to optimize build time
  2. client/package.json for React web UI

This project uses Create React App in addition to Mobx for state management, React Router v4 for routing and Material-UI for styled components. Mobx was added without ejecting the app via the React App Rewired package. We use Auth0 for authenticating users.

Local Development

Run the API Server

In a terminal:

# Initial setup
npm install

# Start the server
npm start

Run the client

The client is configured to proxy backend requests to the local Node server. (See "proxy" config)

In a separate terminal from the API server, start the UI:

# Always change directory, first
cd client/

# Initial setup
npm install

# Start the server
npm start

Getting Started

1.) $ git clone https://github.com/ctti-clinicaltrials/PROPHETIC.git

2.) $ cd MyApp/client

3.) Custom React Scripts allows you to define a .env file in the root and add env vars for development. Custom React Scripts has preset vars to allow CSS modules, Stylus, Sass etc. You can find more info here. You can also define your own custom env vars using this format REACT_APP_*.

If you choose to use Auth0 for authentication, you can define REACT_APP_CLIENT_ID and add your Auth0 client ID in .env for local development. Be careful not to check this information into a public repository. ``

4.) $ npm start

For the project to build, these files must exist with exact filenames:

  • public/index.html is the page template;
  • src/index.js is the JavaScript entry point.

You can delete or rename the other files.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack.
You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

Only files inside public can be used from public/index.html.
Read instructions below for using assets from JavaScript and HTML.

You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.