Developer Guide

This document complements the guidelines set out in the SKA telescope developer portal

Tooling Pre-requisites

This project requires Node and YARN to install and run. To install please follow the instructions for your operating system at nodejs downloads.

Alternatively, the official Node docker image can be used. Instructions can be found on the official Node docker image site.

Development setup

To run the application directly on your host machine

All the following notes assume you are at the command prompt for your chosen environment.

Confirm Node and YARN are installed and configured correctly, both the following commands should return the relevant version number.

> node --version
> yarn --version

Clone the repository and its submodules:

git clone --recursive git@gitlab.com:ska-telescope/ska-login-page.git
make make

Scripts for running, testing, and building the application are defined in the scripts section of the package.json file. These are run using YARN

To run the application locally on your host machine, install all the latest SKAO React components library and other necessary project dependencies with the YARN package manager:

> yarn skao:update
> yarn

Running scripts

You should now be able to run the scripts defined in the package.json within the project directory.

Running the application in development mode

The app can be run with the node environment set to NODE_ENV=test (allowing Istanbul to instrument the code) and webpack serve with –mode development. You can access your application at http://localhost:4201. The app will recompile and restart if you make any edits to the source files.

> yarn start

Running the application tests using Cypress

Cypress has been set up to provide component and end to end testing. For information on the use of Cypress, see Cypress component-testing.

Code coverage is implemented with Istanbul and NYC for instrumenting the code, and cobertura reporter as it is used for reporting for the Gitlab CI of coverage statistics.

Cypress can be opened in a browser by running:

> yarn cypress:open

Or alternatively unit and end to end tests can be run headless by:

> yarn test:component:headless
> yarn test:e2e:headless

Code coverage can be viewed by opening the build/coverage/index.html in a browser after running:

> yarn test:coverage:report

Running the production code

The build script builds the app for production to the dist folder. The build is minified and any JSX is transpiled to JavaScript. Your app is ready to be deployed!

> yarn build

Running the application inside a docker container on your host machine

When running the application within a container, the production image of the application is first built in the docker file and a Nginx image is then used to run the application. The following docker commands can be used to build and run it locally:

docker build -t ska-login-page .
docker run -p 4201:80 ska-login-page

The project will then be accessible at the URL http://localhost:4201