Alliance of Genome Resources UI

Frontend code for the Alliance of Genome Resources website.

Folder structure

package.json, package-lock.json and node_modules/ track the dependencies for by all apps and libs. This means that dependencies installation for any app or library should happend at the root of the project.

Prerequisites

nvm is used to manage Node.js versions. Follow these instructions to install nvm.

Installation

Ensure the correct version of Node.js is installed, if using the particular version of Node.js for the first time:

nvm install 

Note: the command uses nvm, not npm. Nvm deals with the version of Node.js itself.

Ensure the correct version of Node.js is activated: (Applicable every time when changing into the directory for this project)

nvm use

Install dependencies after first cloning the repository or after pulling in new changes to package.json:

npm install --legacy-peer-deps

Note: the command uses npm, not nvm. NPM deals with package dependencies.

Build

To build an app or lib for production

npm run build 

Development

Development of the App

/src holds most of the AGR UI code written before the re-organization of this repo.

To start the development server:

npm start

The development server will be started at http://localhost:3000.

When you edit source files, the changes will automatically be compiled and updated in your browser.

The development server proxies API requests to the API server. The API server can be specified using the API_URL environment variable.

If need be the API_URL can be changed by setting it on the command line before running the UI:

>	export API_URL=https://stage.alliancegenome.org; npm start # to send proxied requests to the stage server.

Additionally, there are two convenience commands that will proxy /api requests to either the stage or test environments

> make uirunstage

> make uiruntest

Tests

Execute tests:

npm run test  

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.

Frameworks & Tools

• React for routing and building user interface components
• Redux, Immutable, and React Query for state management
• Bootstrap, reactstrap, Sass, CSS Modules for styling
• React Testing Library for testing
• Webpack and Babel for compiling and bundling