The CANDL web app is built using Node.js and React & Redux (from Facebook). Links: https://facebook.github.io/react/docs/getting-started.html, http://redux.js.org/
There are a few pre-configured npm scripts:
npm run build
uses webpack to buildbundle.js
and places it under thepublic
directory. This bundle contains both the js and css for the app.npm run start
starts in "production mode" (no hot reloading). This simply spins up the server underserver/app.js.
npm run dev
is where the magic happens. This introduces the webpack dev and hot middleware (the correct environment variables are set vianpm better run
), which rebuilds the bundle on css or js changes and injects it into the browser using magic. No reloading necessary! Great for development.npm install
installs all modules listed in package.json.
Thus, to run in production:
npm install
npm run build
npm run start
To run in dev mode:
npm install
npm run dev
To handle the discrepancies between running the client code in "dev mode" or
"production mode", there are two helpers provided - containers/Root.js
and
store/configureStore.js
. These modules conditionally load the .dev
or
.prod
extension of their respective file depending on the environment
variables when webpack is running. The only difference in the respective
versions are loading the necessary tooling for the dev/debugging redux
awesomeness. In dev mode, the DevTools
react component loads and renders which
provides a visual history of all the actions and allows you to go forwards and
backwards in time. It also logs all the state changes.
All client side code originates in the client directory, all server code in the server directory. The CANDL code itself has been copied in its most recent form to the CANDL folder.
The main layout of the app is described in client/containers/App.js. See also client/actions/actions.js for action definitions and client/reducers/index.js for reducers. Posting to the server endpoint is handled in client/requester.js and the server-side uploading of files and running of python script is done in server/routes.js.
A user may click the "submit" button only once three files have been uploaded, and text entered in the email field. If everything checks out on the server-side (see below section for file-checking specifics) then the script "run_CANDL_outer.py" is called. Additional file checking may be taken care of here. If an error is found, that script may call sys.exit(1) to alert the client something has gone wrong. It will otherwise fork and call "run_CANDL_inner.py" then exit 0 so that the client may display a "everything is fine, CANDL is running" message to the user.
The inner script runs CANDL. Currently, output is saved in the proper directory.
There are several places where the app may be tweaked for additional functionality.
-
File client/actions/actions.js beginning line 25. Here is where files may be checked on the client-side for proper formatting. Currently, we check that both graph files end with ".ppi". Further checking could be done on the email string, graph files or landmarks file.
-
File run_CANDL_outer.py beginning line 23. Here further format checking may be done in python. If this script calls "sys.exit(1)" the client will be alerted, and the user will be shown a "script not running," message. Currently no such checks are being done, but in-depth checking could assess the actual format of files or structure of the email string.
-
File run_CANDL_inner.py line 11. Here a "dunny" python script may be run in place of CANDL to test the infastructure of this web app. Comment out line 11 and uncomment line 12.
-
File run_CANDL_inner.py beginning line 34. Here is where the automatic email function may be added. Exact implementation of this will depend on the server on which the app is running. Sample code is provided using MIMEMultipart.