smweb-frontend

Introduction

Repository for the School Connect frontend codebase.

School Connect is an offline-first data-entry application for Schools taking part in WFP's School Connect pilot programme. For more detailed information, see this project's Azure DevOps wiki.

Getting Started

Requirements

• Node.js
• Yarn

Using a Node Version Manager to install Node.js and npm is strongly suggested.

Yarn is recommended over plain npm.

Setting up the development environment

Within the project root folder, execute these commands

• Install all dependencies and development dependencies according to package.json

  $ yarn install
  

• Configure .env.local file

  $ cp .env.local.example .env.local
  

If you are a fullstack developer and have the BE running on your machine, leave it as it is. If you are a FE developer, make REACT_APP_API_URL point to the dev or qa environment. In both cases, be sure to point it to the correct API version.

For more information on how .env.local works see CRA documentation.

• You will need to export the fontawesome token locally - please ask for the token or check the env variables on azure. Date set: 31:03:2022

  $ export FONTAWESOME_NPM_AUTH_TOKEN=***********

• Start the FE server

  $ yarn start
  

This starts the FE server (defaults to port 3000) and opens your default browser to http://localhost:3000/

Account Creation

When starting the frontend for the first time it is required to create an account through CIAM. If you require a admin account add your email to the backend settings. This will automatically make your account a admin upon creation.

Building

Run yarn build

Testing (Jest)

Run yarn test

Testing (Cypress)

When using end to end testing make sure to uncomment the REACT_APP_E2E enviroment variable from the .env.local file

• In a terminal, run the backend

• In another terminal, run the frontend:

  $ yarn start
  

• In another terminal, run:

  $ yarn cypress open
  

• Within the Cypress GUI, click on "Run all specs".

Translating

We use React-Intl from formatjs.io/.

Its API is fine but the tooling is lackluster. For this reason, the translationcli.py script was written.

Translation workflow

• Run setup to install Translation dependency and pip

  $ yarn trans:setup
  

• extract .csv file and make translations using google_trans_new then merge file back into .json files usable by React Intl

  $ yarn trans:translate
  

Formatting

To comply with formatting checks performed in CI, run yarn pretty

Contribute

See this project's Azure DevOps wiki for detailed information about development workflows.