Skip to content

Development

Integration Continuous Deployment Coverage Status

Installation

Clone the repo:

Bash
git clone https://github.com/CHIMEFRB/workflow-web.git

To install all the dependency packages in order to run this web application locally / conduct code development, run npm install.

Bash
$ npm install

Development

Environment Variables

Here is how the environment variables are set up: | File | Purpose | | -------- | -------- | | .env | Default environment variables file, used in production. | | .env.development.local | Local override, to be used for local development. | | .env.production | Local override for production, to be used if you are serving local build with serve -s ./build. |

How to Setup Environment Variables

Create a file called .env.development.local in the root directory. Here is how you should populate it:

.env.development.local

This file is for local development. When you run npm run build, this is where the environment variables are fetched from. The REACT_APP_USE_PROD_DB environment variable is set automatically by assign-env.js utility script.

Bash
# Environment Variables file for local development

PORT=3000
CHOKIDAR_USEPOLLING=true

#PUBLIC_URL for local
PUBLIC_URL=/

REACT_APP_VERSION=$npm_package_version

# Set your Client ID and Client Secret
REACT_APP_CLIENT_ID=string
REACT_APP_CLIENT_SECRET=string

#Determines whether to connect to production database or not. To be set by assign-env.js utility:
REACT_APP_USE_PROD_DB=

You will need to fill in the following values: - REACT_APP_CLIENT_ID: the Github OAuth App Client ID that can be found here. The Client ID is used for authentication in development mode.

  • REACT_APP_CLIENT_SECRET: the Github OAuth App Client Secret that can be found in the same page as the Client ID. The Client Secret is used for authentication in development mode. You should click on Generate a new client secret to generate a new secret if the current one is compromised, or you are setting it up for the first time.

Note: If you want to run production build locally, run npm run build-local and serve with serve -s ./build. Make sure you rename your .env.development.local file to .env.production before doing so.

Do not rename the env files.

Run in develpoment mode locally

In order for the web application to run locally in development mode, you will need to run docker compose to set up the backend services.

To run the application locally with local database, run:

Bash
$ docker compose -f docker-compose.dev.yml up -d

and then run:

Bash
npm start

Run in development mode locally but connect to onsite database

If you want to connect to the onsite production database, run:

Bash
$ docker compose -f docker-compose-prod-db.dev.yml up -d

and then run:

Bash
npm run start:prod-db

This will start only the required backend services and connect directly to the production database.

After the app has started, navigate to http://localhost:3000/workflow. The app will automatically reload if you change any of the source files.

Build / Deployment

After you have made some changes, open a pull request to the main branch. Once the pull request is merged, the changes will be automatically trigger a re-build of the workflow-web docker image. To deploy the new image, you will need to ssh into the frb-vsop server and run the following command:

Bash
$ cd frb-devops/stacks/core/workflow
$ docker service update --image chimefrb/workflow-web:latest workflow_website

If the service update did not refresh the docker image used (you can see the version of the image in the footer of the web app at https://frb.chimenet.ca/workflow/), you can try to re-deploy the entire workflow stack by running the following command:

Bash
$ docker stack deploy -c 2-workflow-services.yml workflow --with-registry-auth