dictybase/genomepage repository overview

⁠Master branch

⁠Develop branch

⁠Web application to display genomic information at dictyBase

• Development⁠
  • Configuration⁠
    • Providers⁠
    • Auth server⁠
    • API server⁠
    • Navbar and footer⁠
  • Semantic Versioning⁠
  • Running the application(dev version)⁠
  • Application Structure⁠
• Deployment⁠

⁠Development

• First clone this repository.
• Next configure the application as described below.

⁠Configuration

⁠Providers

• This is the most important part and it is absolutely needed to run the application.
• Copy the provided sample clientConfig.sample.js⁠ file to clientConfig.js in the same folder.
• Then add the provider names and their corresponding client IDs.
• All the providers should have a matching counterpart in the oauthConfig.js⁠ file. Fill up all the configuration parameters for every new provider in that file.
• For each of the provider names, a corresponding login button will be shown in the login route. The list of supported buttons are given here⁠

⁠Auth server

• By default, the application expects it to run on https://betatoken.dictybase.local
• The url of the auth server can be configured by REACT_APP_AUTH_SERVER environmental variable.
• The binaries for the auth server can be downloaded from its release page⁠. Download the one that is suitable for your OS and make sure you always use the latest one.
• The REACT_APP_AUTH_SERVER env variable can also be customized by modifying the global variable in the env⁠ file.

⁠API server

• By default, the application expects it to run on https://betafunc.dictybase.local
• The url of the auth server can be configured by REACT_APP_API_SERVER environmental variable.
• Kubeless Node.js⁠ and Golang⁠ functions are currently used and mapped to this URL. All of the Node.js functions are necessary to run version 1.0.0 of this application.
• The REACT_APP_API_SERVER env variable can also be customize by modifying the global variable in the env⁠ file.

⁠Navbar and Footer

• The application has env variables for REACT_APP_NAVBAR_JSON and REACT_APP_FOOTER_JSON that are set to the corresponding URLs where the JSON data is stored on GitHub.

⁠Semantic Versioning

This app has been set up to use semantic-release⁠ and commitizen⁠. After adding a new commit (git add .), use npm run cz and follow the prompts to categorize and provide more details about your commit. Once complete, push your changes to whatever branch you are working on.

When you are ready to push to prod, you can use semantic-release to automate the release process:

• Merge your changes into master
• Run npx semantic-release

Important: you MUST have an env variable stored for GH_TOKEN or GITHUB_TOKEN that contains a GitHub personal access token⁠. You can either pass this in manually when you run the script (i.e. GH_TOKEN=XXX npx semantic-release) or you can store your env variable locally⁠.

This will look at your most recent commits since the last git tag and automatically determine the appropriate version number for your release. It also updates the CHANGELOG⁠ documentation.

⁠Running the application (dev version)

• npm install
• npm start

⁠Application Structure

This was reconfigured to use the create-react-app⁠ structure and philosophy. Please read their User Guide⁠ for more detailed information.

.
├── public                      # Index.html and favicon
├── src                         # Application source code
│   ├── app                     # Application level components
│       ├── actions             # Actions used for the entire app (i.e. footer, navbar)
│       ├── layout              # Main app template
│       ├── reducers            # Redux reducers
│       ├── routes              # React Router routes
│       ├── store               # Redux store configuration
│   ├── common                  # Common features for entire app
│       ├── components          # Generic components
│       ├── constants           # Static data (i.e. footer, navbar links)
│       ├── fake-data           # Any fake data needed for placeholder content
│       ├── utils               # Application utilities
│   ├── features                # Main features of application
│       ├── Authentication      # Authentication-related components
│       ├── Blast               # Blast Tab components
│       ├── MainPage            # Component for the / route, displays example genes
│       ├── Ontology            # Gene Ontology Tab components
│       ├── Orthologs           # Orthologs Tab components
│       ├── ProteinInformation  # Protein Information Tab components
│       ├── Reference           # Reference Tab components
│       ├── Summary             # Gene Summary Tab components
│   ├── images                  # Images used in the application
│   ├── styles                  # Any shared styles for the app
│   └── index.js                # Application rendering
└──                             # Config files

⁠Deployment

The application is deployed by building a Docker image⁠ and running it through Kubernetes⁠. More detailed information about the deployment process for DSC and all Dicty software can be found here⁠.

Starting with version 2.0.0 of the application, the following Kubeless functions need to be deployed as well:

• genefn⁠
• genecachefn⁠
• uniprotcachefn⁠

Important: make sure you are using the latest versions. Follow the documentation on each of these pages in order to deploy them.