Skip to content

Development

Integration Continuous Deployment Coverage Status Docs

Installation

Clone the repo:

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

Make sure you Install Bun.

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

Bash
$ bun 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, 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 bun run build, this is where the environment variables are fetched from. The VITE_USE_PROD_DB environment variable is set automatically by assign-env.js utility script.

Bash
# Environment Variables file for local development

VITE_VERSION=$npm_package_version

# Set your Client ID and Client Secret
VITE_CLIENT_ID=string
VITE_CLIENT_SECRET=string

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

You will need to fill in the following values:

  • VITE_CLIENT_ID: the Github OAuth App Client ID that can be found here. The Client ID is used for authentication in development mode.

  • VITE_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 and serve with serve -s ./build (make sure you have serve installed). 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
bun run 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
bun 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/web. 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
$ 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/web), you can try to re-deploy the entire workflow stack by running the following command:

Bash
$ cd frb-devops/stacks/core/workflow
$ docker stack deploy -c 2-workflow-services.yml workflow --with-registry-auth