Optum Messenger Standalone Client and Widget

A javascript app to connect to the secure messenging API directly, and designed to be included directly in other webpages.

Dev Setup

This project uses yarn instead of npm. If you don't have yarn, brew install yarn.

Install the dependencies:

yarn install

Setup your env:

cp example.env .env
$EDITOR .env        # edit as needed

And configure client-facing settings for you environment:

cp public/setup.example.js public/setup.js
$EDITOR public/setup.js        # edit as needed

(Optionally) run the tests:

yarn run test

Start the webpack dev server:

yarn run start

Publishing and Deploying

Code is served from an AWS S3 bucket through a Cloudfront site. Manually publishing is the following steps:

Checkout the Master Branch, pull to make sure you are up to date and Fast Forward Merge the Develop Branch

git checkout origin master

git pull origin master

git fetch origin

git merge origin develop

Run the build and publish combined script

If you trust a computer to not make mistakes, you can publish to aws just by running

yarn run build_and_publish

and then committing and pushing your changes (this isn't automatic).

the script automatically does the following steps:

1. Update and tag the version:

Please make sure to check the version numbers on S3 so we dont get out of step: (make sure aws cli is installed and configured )

yarn run aws:list_versions

(makes a commit with the new version, as well as tagging that commit with a v.x.x.x tag)

yarn version  # runs an interactive prompt to set the version number

2. Clean previous artifacts:

(especially important for the docs, which don't always clean up after themselves)

yarn run build:clean

Note: don't run yarn clean! It will cause the build to fail, as older versions of yarn (pre v1.0) mess with the installed packages when that command is run. If the build is failing for compile reasons try:

• rm .yarnclean
• yarn install --force

3. Run the webpack build:

(produces the output-prod.js and styles.css files from the source)

yarn run build:prod

4. Generate the docs:

yarn run docs:gen

Doc URL on Amazon

Because of Amazon S3 limitations, the docs are located at: https://dufpv36ciwr6n.cloudfront.net/doc/latest/index.html instead of the usual place for the CSS and js files (https://messenger-widget.optum.com/)

5. Create versioned file copies:

creates copies of the built files with the version names added to them, in the build directory

yarn run build:prod:versions

6. Upload to S3:

uploads every thing in build/js and build/css to S3

requires aws cli to be installed and configured

yarn run aws:publish -- --bucket=my-bucket # aws-website-messenger-widget-0sips by default

Push the tag and commit to git:

Finally, please make sure to push the master branch with tags. Tags will not be pushed without the --tags flag.

git push origin master --tags

Conventions and Structure

The stack is React with Mobx for state management. CSS is packaged with css modules, so that when used as a widget, there is no conflict with the global namespace. As a general design goal, if you can isolate anything so global won't interfere with it, do so.

Mobx allows registering observers on javascript objects, so that observer components (and anything else that needs to be reactive to state changes) can update when things change. Sometimes, though, this requires that a component dereference a value from a parent, instead of just using the value, in order to observe the changes. Be aware of that, and read the mobx docs, if you can't get a component to update.

If you need to make an ajax request, use the configured instance of axios in src/axios_config. By convention this is imported as axios:

import axios from '~/axios_config'

If you come across any other gotchas or oddities, please add them to this section

Pre-commit hooks

after you run yarn, pre-commit hooks are automatically setup using husky.

Code Reformatting

prettier-standard is used to reformat all code before being committed, so that style complaints aren't an issue. lint-stage is ran before commit, and reformats all the code to standard style. Any changes are automatically added to the commit.

Caveat: if you have partially staged a file, the entire file will be staged after the code is reformatted. to get around this, stash your un-staged changes with git stash -k before you commit, or commit using the --no-verify or -n option when committing in order to skip the hooks, and then run yarn run reformat and commit any relevant changes that were reformatted.