This project was bootstrapped with Create React App, then Next.js added following https://nextjs.org/docs/migrating/from-create-react-app

Before getting started, you should have nvm installed on your machine to get the latest version of node. Run the following commands:

nvm installnvm use

Then you can install the dependencies via running yarn

Each push to master triggers a GitHub CI build which includes running Chromatic visual regression tests. If there is an expected visual change, the Chromatic tests will fail and will need to be approved manually in the Chromatic UI. The UI can be found via the failed build step on GitHub. Once changes are approved, if applicable, the failed build will need to be rerun.

On push to master:

1. GitHub Actions builds and publishes a new container image
2. Flux image automation (GitOps) updates image used by staging deployment
3. Renovate bot creates a pull request on enhanced-preprints-e2e
4. If green, pull request is merged, causing the image to be tagged with the suffix -approved
5. Flux image automation (GitOps) updates image used by prod deployment

To observe the above, you can use the GitOps Dashboard and the Kubernetes Dashboard

A Slack channel epp-e2e-test-results is also available for observation.

To run the unit tests, run yarn test.

To run the chromatic tests run yarn chromatic, to run this script you will need to set an environment variable CHROMATIC_PROJECT_TOKEN to the token which is available on the chromatic project management page.

To run the browser tests, bring up the application with docker compose up --wait

When the application is up, run yarn test:browser.

To identify issues with Typescript, run yarn lint, to attempt to automatically fix the issues run yarn lint:fix

To identify issues with sass, run yarn lint-sass, to attempt to automatically fix the issues run yarn lint-sass:fix

To get started with a full development environment for the application, run docker compose up and visit port localhost:8080. This will hot reload modules, styles and other things, but javascript is a requirement. The unproxied application server is viewable at localhost:3000.

The EPP API server can be viewed at localhost:3001

You can also view a rudimentary mongodb GUI client at localhost:8081

NEXT_PUBLIC_SITE_NAME=biophysics-colab docker compose up

To start the application with a local version of the EPP API server so you can run the application and test local changes of the API, you need to define an environment variable SERVER_DIR with the location of your EPP API server project, i.e. SERVER_DIR="../enhanced-preprints-server", then run the above command to invoke the .localserver ovverides.

To be able to see exactly what a production build will look and behave like, but using local services, we have provided an override command. You can use the command above to start the dev environment, but with the app server behaving like production would, for example without javascript and without incremental builds. This is not recommended for development, only for spot checking for differences between a prod build and dev build. The app is still available at localhost:8080.

You can run storybook locally using yarn storybook. It should auto-reload as you develop stories or components

When we are experiencing an issue in production that results in a kaboom then recreating the issue locally can be a quick and effective way to diagnose the problem.

API_SERVER=https://prod--epp.elifesciences.org IIIF_SERVER=https://prod--epp.elifesciences.org/iiif docker compose up app

Then access client on http://localhost:3001