Skip to content

icgc-argo/platform-ui

Repository files navigation

Argo Platform client

TypeScript Prettier

Release Build Status
Edge Build Status
Latest Build Status

This project was bootstrapped with Create Next App.

Find the most recent version of this guide here, and check out Next.js repo for the most up-to-date info on Next JS.

Local development

Starting local back-end services

A docker-compose setup is available in the compose folder. Navigate to /compose (cd ./compose) and Follow the instructions found in compose/README.md to start a local cluster of Argo Platform micro services.

Setup

  • Install dependencies: npm ci
  • Set up environment: copy .env.schema to .env and update environment accordingly. Out-of-the-box values are meant for local development.
  • Dev commands:
    • npm run dev starts local dev server
    • npm run build creates a production build.
    • npm run force-resolutions fixes vulnerable dependencies listed in package.json > resolutions

Writing commits

To keep commit messages consistent, we use gitmoji. To easily access emojis on Mac, press ctrl+cmd+space.

Type checking

  • npm run type-check: trigger TypeScript type check for whole repo
  • npm run type-check -- --watch: runs the above with watch mode
    • Any npm run type-check triggers tsc, so any flag layed out here can be used
  • If using vscode (recommended), tsc can also be run as a task in the editor:
    • Cmd+Shift+B, then select tsc:build - tsconfig.json
    • This will report errors in vscode's PROBLEMS tab

GraphQL

  • We use GraphQL Code Generator to generate an introspection schema and types.

  • Install the GraphQL VSCode plugin for code suggestions based on the schema as well as syntax highlighting.

  • On first build, generated/graphql_schema.json hasn't been generated yet, so follow these steps:

    • Comment out the schema item in graphql.config.yaml.
    • In codegen.yaml use the remote schema option.
    • Run npm run graphql-codegen.
    • Uncomment the schema item in graphql.config.yaml.
    • Optional: use the local schema option in codegen.yaml, if you're not working on the API.
  • Modify ./codegen.yaml to get the schema either from your configured API or a local file.

  • npm run gql-check to check your GraphQL files and run a build.

  • npm run dev will also watch for GraphQL changes.

  • Name your GraphQL documents appropriately: They need to go in a gql folder and have _QUERY _MUTATION _FRAGMENT at the end of the filename. They also need to be *.ts files.

Uikit

This project is built with UI components provided by @icgc-argo/uikit. For more information, please visit: