Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A monorepo that contains all frontend code for VEuPathDB websites

License

NotificationsYou must be signed in to change notification settings

VEuPathDB/web-monorepo

Repository files navigation

Prerequisites

  • Node ⇐16.17.1

  • Either a global installation ofyarn >=1.17.0, orvolta >=1.1.0

    • With such a version ofyarn globally installed, allyarn commands executed in this repo will be delegated to the "pinned"yarn@3.3.1 installation included in.yarn/releases.

    • With such a version ofvolta installed, the required version ofyarn will automatically be installed.

It is recommended to install volta, as it will keep your local toolchain in sync with the repository.

Quick Start

Install yarn dependencies

From anywhere in the repo:

yarn

Overview

This repository is a "monorepo", using thenx build system andyarn@3 dependency manager. The source code is divided into one of three types of packages: "config", "lib", and "site".

  • "config" packages (./packages/configs) include various build and development configurations and tools.

  • "lib" packages (./packages/libs) include standalone library and webapp source code.

  • "site" packages (./packages/sites) include complete website source code.

Many "lib" and "site" packages include development tools, such as development servers, test scripts, etc.

Many commands require a reference to the package name. All package names are currently prefixed with@veupathdb/. For example, the eda package name is@veupathdb/eda.

The repository is currently configured as a "package based repository". This is subject to change, in the future (seehttps://nx.dev/concepts/integrated-vs-package-based to read about the differences between package based and integrated repos).

Common Tasks

The following tasks are common performed by developers. This serves as a reference guide, and is not exhaustive in any way. If you feel something is missing, create an issue, or open a pull request.

All commands are expected to be run in the repository’s root directory, unless otherwise specified.

Start a local dev site

"Site" projects are stored in thepackages/sites directory. Each one corresponds to a "cohort". For example,packages/sites/genomics-sitecontains the code used to build the client code for a genomics website.

Each cohort contains a.env.sample file. Copy this to a sibling.env file. You may need to modify some values, such as usernames,passwords, etc. You can also specify a website to use for various services. Typically a deployed QA site will suffice, but you can also run a "local backend" via various methods. (TODO: link to relevants docs/repos).

Once you have created a.env file, you can run the local dev site with the command:

yarn nx start<package name>

For example, if you want to run a local clinepi site, you would run the command:

yarn nx start @veupathdb/clinepi-site

Once the website has been compiled, the dev server will output some build statistics and automatically open a browser tab. You can kill the local dev server withCTRL-C in the terminal where you started it.

Modifying code (and updating a running local dev site)

When a local dev site is running, it will detect when build dependencies are updated and reload the active webpage.

Note: the following refers to code tracked by the monorepo, and not third-party dependencies from npm.

There are two types of souce code that can be updated:

  1. Source code within the package being served.

  2. Source code within a dependent package.

Changes to code within the package being served will be detected automatically. The local dev service should reompile the affected module and reload the website without intervention.

Changes to code within a dependent workspace package will require a build command for the local dev server to detect the change.

For example, if you change code inpackages/libs/eda, you will need to run this command in a new terminal window, from the repository root:

yarn workspace @veupathdb/eda build-npm-modules

Once this command completed, the running dev server will see the updated build artifacts, recompile the website, and reload the webpage. There are some cases where this might not work as expected, such as if the recompile step fails. In those cases, you may need to restart the local dev server. You can monitor the progress of the recompilation step in the terminal where you started the dev server.

View workspace dependency graph

From the rootpackage.json:

yarn nx graph

Execute a workspace’s yarn script using thenx task runner

From the rootpackage.json:

yarn nx run<workspaceName>:<scriptName>

For example, you can start the MultiBLAST dev server by running

yarn nx run @veupathdb/multi-blast:start

Rebuild dependencies when running a development server

When running a development server (such asyarn nx start @veupathdb/eda oryarn nx start @veupathdb/clinepi-site),use the following command to rebuild changes made to dependencies, and to have the dev site reload with the changes:

cd packages/libs/<package>yarn build-npm-modules

Note: You may need to manually reload your website to see the changes the first time.

Using the equivalentnx command (yarn nx build-npm-modules @veupathdb/<package>) has proven inadequate in this scenario.

Notes on individual packages

EDA dev server

Directory:packages/libs/eda

You will need to configure the server with apackages/libs/eda/.env.local file that sets various environment variables.

For more documentation see thepackage README andthis sample file.

VEuPathDB sites

Directory:packages/sites/{site name}-site

Copy thepackages/sites/{site name}-site/.env.sample file topackages/sites/{site name}-site/.env and configure the new file with passwords and the desired backend for the site.

Runyarn to update dependencies if necessary.

Run the commandyarn nx start @veupathdb/{site name}-site. For example, to run the ortho site useyarn nx start @veupathdb/ortho-site.

IDE hints

emacs tide

If it is showing errors for tsx imports (especially ineda) andtide-verify-setup mentions tsserver version 3.x then it is time toupgrade emacs tide (to, at time of writing 4.5.4):

M-x package-reinstall <ret> tide <ret>

Client Bundle Server

The Client Bundle Server is a Docker image based on NGINX that is used to serveVEuPathDB client code over HTTP.

As the client code comes in 2 flavors (bundles), legacy and modern, this NGINXserver has an internal path rewrite based on the requesting browser’s user agentstring to the appropriate client bundle component on request.

This means using a modern browser, requesting the filegenomics/site-client.bundle.js will cause the server to actually returnmodern/genomics/site-client.bundle.js whereas requesting that same file froman older or unsupported browser (such as CURL or Postman) the server will returnlegacy/genomics/site-client.bundle.js.

Browsers

Whether a browser is considered modern or legacy is dependent on the version ofthe browser compared to a RegEx constructed by thebrowserslist-useragent-regexplibrary using the input query constructed in thebrowserslist-config package ofthis repo. (Seeindex.jsfor the raw queries)

Docker Image

The docker image is based on NGINX-Perl and includes NodeJS for executing ascript based onbrowserslist-useragent-regexpthat determines which path a specified file should be served from.

The image build is multi-staged with the first stage compiling primary contentsof this repository, and the second stage setting up NGINX and the secondary JSscript included in thedocker directory(makeSupportedBrowsersScript.js).

Paths

Content is served from the following paths from the root path used to reach arunning instance of the built Docker image:

{URL}/clinepi/{target-file}{URL}/genomics/{target-file}{URL}/mbio/{target-file}{URL}/ortho/{target-file}

These paths correspond to the following container internal paths:

/var/www/legacy/clinepi/{target-file}/var/www/modern/clinepi/{target-file}/var/www/legacy/genomics/{target-file}/var/www/modern/genomics/{target-file}/var/www/legacy/mbio/{target-file}/var/www/modern/mbio/{target-file}/var/www/legacy/ortho/{target-file}/var/www/modern/ortho/{target-file}

Testing

The Docker image may be tested locally by performing the following steps fromthedocker/ subdirectory:

  1. Build and Start the image:

    make docker-buildmake docker-run
  2. Using your favorite HTTP request making tool such as Postman, CURL, or a webbrowser, make a request tohttp://localhost/genomics/site-client.bundle.js.LICENSE.txt . If the service isworking you should receive a LICENSE text file’s contents as the response witha 200 status code. If it is not working you will receive a 403 or 404 error.

About

A monorepo that contains all frontend code for VEuPathDB websites

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors46


[8]ページ先頭

©2009-2025 Movatter.jp