VEuPathDB / web-monorepo

A monorepo that contains all frontend code for VEuPathDB websites
Apache License 2.0
2 stars 0 forks source link

= web-monorepo

Please check our project repos at https://github.com/VEuPathDB.

== Prerequisites

== Quick Start

=== Install yarn dependencies

From anywhere in the repo:

[source, shell]

yarn

=== View workspace dependency graph

From the root package.json:

[source, shell]

yarn nx graph

=== Execute a workspace's yarn script using the nx task runner

From the root package.json:

[source, shell]

yarn nx run :

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

[source, shell]

yarn nx run @veupathdb/multi-blast:start

=== Rebuild dependencies when running a development server

When running a development server (such as yarn nx start @veupathdb/eda or yarn 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:

[source, shell]

cd packages/libs/ yarn build-npm-modules

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

Using the equivalent nx 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 a packages/libs/eda/.env.local file that sets various environment variables.

For more documentation see the link:packages/libs/eda/README.md[package README] and link:packages/libs/eda/.env.local.sample.localservices[this sample file].

=== VEuPathDB sites

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

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

Run yarn to update dependencies if necessary.

Run the command yarn nx start @veupathdb/{site name}-site. For example, to run the ortho site use yarn nx start @veupathdb/ortho-site.

== IDE hints

=== emacs tide

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

[source]

M-x package-reinstall tide

== Client Bundle Server

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

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

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

=== Browsers

Whether a browser is considered modern or legacy is dependent on the version of the browser compared to a RegEx constructed by the link:https://github.com/browserslist/browserslist-useragent-regexp[browserslist-useragent-regexp] library using the input query constructed in the link:packages/configs/browserslist-config[browserslist-config] package of this repo. (See link:packages/configs/browserslist-config/index.js[index.js] for the raw queries)

=== Docker Image

The docker image is based on NGINX-Perl and includes NodeJS for executing a script based on link:https://github.com/browserslist/browserslist-useragent-regexp[browserslist-useragent-regexp] that determines which path a specified file should be served from.

The image build is multi-staged with the first stage compiling primary contents of this repository, and the second stage setting up NGINX and the secondary JS script included in the link:docker/[docker] directory (link:docker/makeSupportedBrowsersScript.js[makeSupportedBrowsersScript.js]).

=== Paths

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

[source]

{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:

[source]

/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 from the link:docker/[docker/] subdirectory:

. Build and Start the image: + [source, shell]

make docker-build make docker-run

. Using your favorite HTTP request making tool such as Postman, CURL, or a web browser, make a request to http://localhost/genomics/site-client.bundle.js.LICENSE.txt . If the service is working you should receive a LICENSE text file's contents as the response with a 200 status code. If it is not working you will receive a 403 or 404 error.