Alliance of Genome Resources UI

Frontend code for the Alliance of Genome Resources website.

---

Overview

This repo utilizes these technologies:

• vite - bundler/compiler
• npm - package manager
• react (JS & TS) - framework
• react-router - routing
• scss (w/modules), bootstrap, reactstrap, emotion - styling
• react testing library, jest - testing
• redux, context, immutable - state management
• tanstack query (formerly react query) - http/async request handling
• prettier - code formatting

Installation

1. This repo depends on nvm to manage Node.js versions. Follow these instructions to install nvm.
2. Run: npm run local-init
   • Note: If you are switching to a branch that uses vite from a branch that uses create react app or vise vesa, it is wise to run rm -rf node_modules (from the repo's root directory) first to avoid package version conflicts.
   • You may run into an issue with an "nvm: command not found" error, in that case, you can run these commands manually:
     • nvm install
     • npm install
     • npm run generators
3. You can now run the project locally in one of the following ways:
   • npm start: when you have the API running locally
   • npm run start:test: to connect to the test API
   • npm run start:stage: to connect to the stage API
   • API_URL=[CUSTOM_URL_HERE] npm start: for connecting to a custom API URL
4. Navigate to localhost:3000 (or whichever port number is displayed in the console) to view the site

Build

To build an app or lib for production and to also to build the resource descriptors file when running locally:

npm run build

Tests

Execute tests:

make test

Prettier Formatting

Fix code formatting using Prettier:

make pretty

AWS - Feature Branch Previews

Provides a way to verify the story in the test environment (without merging code). Once the branch is merged into test, the branch preview is deleted.

GitHub

Create a pull request of your branch KANBAN-# into test (don't merge).

AWS

Browse to https://us-east-1.console.aws.amazon.com/amplify/home?region=us-east-1#/

Click on the 'agr-ui-test' View App button

Look for your KANBAN-# branch and copy the url(eg: https://kanban-568.d39tao9vl33upy.amplifyapp.com/). Use this url for testing the story (send to curator), before merging code into the test branch. Once testing is complete, merge your branch into test.