duke-crucible / snowball-ui

The UI repo for Snowball Project. Snowball is a contact tracking application for pandemic research study.

snowballgr-ui

snowballgr-ui is...

Quick Start

You will need docker-compose.

Clone this repo:

git clone [email protected]:Crucible/devops/snowballgr-ui.git
cd snowballgr-ui

Set up the environment variables:

cp .env.example .env

Run with docker-compose:

docker-compose build
docker-compose up

Now you have a running React app at http://localhost:3000.

Development

As you edit code the server will automatically reload to pick up your changes. Sometimes you might need to shut down the server and rebuild the Docker images, for example if you add a new dependency. You can do this with docker-compose stop followed by docker-compose build and then restart the server with docker-compose up.

Interaction with the project to install dependencies, run tests, etc. is achieved through executing commands in the app container created by docker-compose. You can open a shell in the container via docker-compose run --rm app bash or you can run one-off commands using docker-compose like docker-compose run --rm app yarn test.

Useful commands

All of these are run within the app container as described above.

yarn 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.

yarn test

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

Deployment

This project is deployed to the app platform so if you start by forking it you should be well on your way, but below is a step-by-step guide. These steps assume you have general familiarity with the app platform.

• Replace all instances of crucible and crucible-ui with the appropriate values for your project.
• Create a Kubernetes namespace for your project if you haven't already done so.
• Follow the process to procure a vanity url, if needed.

Environment Configuration

One particular note is that the Docker image is set up so the app can be configured like any 12-factor app: through environment variables. Any environment variable prefixed with REACTAPP will be available in the app under window._env. The same rules apply to the .env file when developing locally. Be aware that these variables are still exposed in the browser since this is a frontend app.