Skip to content

DevelopmentNotes.rst

Latest commit

 

History

History
206 lines (126 loc) · 4.92 KB

DevelopmentNotes.rst

File metadata and controls

206 lines (126 loc) · 4.92 KB

Development Notes

Docker

Run commands from FLINT UI repo folder:

FLINT Example

  1. To build image
docker build -t flint-api ./flint.cloud/local/rest_api_flint.example
  1. To run image
docker run --rm -d -p 8080:8080 flint-api

GCBM

  1. To build image
docker build -t gcbm-api ./flint.cloud/local/rest_api_gcbm
  1. To run image
docker run --rm -d -p 8081:8080 gcbm-api

Node

This project requires Node version >= 14

  1. To check the version of installed Node, run the following command:
node -v
  1. You can also replace -v with --version and it should work the same.
  2. 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.

  1. Once you have npm installed you can run the following both to install and upgrade Yarn:
npm install --global yarn
  1. 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:

  1. Go to the flint.ui folder and run yarn install.
  2. Run yarn serve to start the Vue app server.
  3. 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:

  1. Go to the flint.ui folder
  2. Run yarn test:e2e
  3. This will run the app in production mode at 127.0.0.1:8000 for E2E testing.
  4. 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.

  1. Install Storybook dependencies:
yarn install
  1. 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:

  1. use yarn add <your-package>
  2. git checkout -b dependency/<your-package>
  3. git add --force flint.ui/package.json
  4. 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