Development Notes

Docker

Run commands from FLINT UI repo folder:

FLINT Example

To build image

docker build -t flint-api ./flint.cloud/local/rest_api_flint.example

To run image

docker run --rm -d -p 8080:8080 flint-api

GCBM

To build image

docker build -t gcbm-api ./flint.cloud/local/rest_api_gcbm

To run image

docker run --rm -d -p 8081:8080 gcbm-api

Node

This project requires Node version >= 14

To check the version of installed Node, run the following command:

node -v

You can also replace -v with --version and it should work the same.
To update Node to the latest version, ensure nvm is installed (see this) and run the following command:

nvm install <version>

(replacing <version> with version of Node you want to install.)

Yarn

It is recommended to install Yarn through the npm.

Once you have npm installed you can run the following both to install and upgrade Yarn:

npm install --global yarn

To check the version of Yarn installed by running the following command:

yarn --version

Vue app

To run the Vue app locally, you can follow the below procedure:

Go to the flint.ui folder and run yarn install.
Run yarn serve to start the Vue app server.
Go to 127.0.0.1:8000 to view the Vue app.

E2E Testing

To test the Vue app locally, you can follow the below procedure:

Go to the flint.ui folder
Run yarn test:e2e
This will run the app in production mode at 127.0.0.1:8000 for E2E testing.
The Cypress interactive GUI will be opened where E2E testing can be run

Storybook in local development

Storybook dependencies and configuration are located under the flint.ui/.storybook directory.

To build and launch Storybook locally, we have to follow the below procedure:

Go to the flint.ui directory.

Install Storybook dependencies:

yarn install

Start the Storybook in development mode:

yarn storybook

Go to localhost:6006 to view the Storybook.

Storybook in production

We have deployed Storybook on Chromatic. It is made by Storybook maintainers. Chromatic automates gathering UI feedback, visual testing, and documentation, so developers can iterate faster with less manual work.

Get a permalink to FLINT-UI’s latest published Storybook on a given branch. Replace <branch> with the designated branch.

https://<branch>--612f3734da98c9003a398626.chromatic.com

Get a permalink to the latest published component or library on a given branch. Add the &branch=<branch> query parameter to the url.

https://chromatic.com/library?appId=612f3734da98c9003a398626&branch=<branch>

Storybook live (master branch): https://master–612f3734da98c9003a398626.chromatic.com

Storybook documentation can be found on the index page of https://master–612f3734da98c9003a398626.chromatic.com/.

Dependency management

We are following Yarn package manager.

Our package.json file is gitignored to enforce strict management of our client dependencies.

In order to add a new dependency, please:

use yarn add <your-package>
git checkout -b dependency/<your-package>
git add --force flint.ui/package.json
git push and submit a PR with only the package.json changes

Our CI build will test for conflicts and your new dependency will be added after your PR has been reviewed.

Code Style

The Vue.js style guide has been used to maintain a consistent style throughout the project. Click here to learn more about the style guide.

One exception is the case used to describe the ecological models exposed to our FLINT client. Because model names, and sometimes model variables, often use acronyms these remain capitalized.

Obvious examples are:

GCBM: Generic Carbon Budget model
FLINT: Full Lands Integration Tool
RothC: Rothamstead Carbon model

We recommend using ESLint and the Prettier plugins to make conforming to the Vue style guide easy. There is official integration for VSCode and other editors.

If you have ESLint installed globally, you can run it from the flint.ui directory. For example, this will detect any errors in the src folder:

eslint --ext .js,.vue src

Minor errors can be fixed automatically:

eslint --fix --ext .js,.vue src