Skip to content

NDLANO/ndla-frontend

Repository files navigation

NDLA front-end

CI

The front-end code powering https://ndla.no.

Norwegian Digital Learning Arena (NDLA) (Norwegian: Nasjonal digital læringsarena) is a joint county enterprise offering open digital learning assets for upper secondary education. In addition to being a compilation of open educational resources (OER), NDLA provides a range of other online tools for sharing and cooperation.

Requirements

  • Node.JS 20.13
  • yarn v4
  • Docker (optional)

Getting started

What's in the box?

  • React
  • GraphQL
  • Express
  • Vite + Babel (ES6)

Dependencies

All dependencies are defined in package.json and are managed with yarn. To initially install all dependencies and when the list dependency has changed, run yarn.

yarn

Start development server

Start node server with hot reloading middleware listening on port 3000.

yarn start

To use a different api set the NDLA_ENVIRONMENT environment variable.

Unit tests

Test framework: Vitest

yarn test

e2e tests

Playwright is used for end to end testing.

To install browsers used in testing run yarn playwright install before any of the below commands.

yarn e2e

To circumvent api call flakiness all request are mocked when the tests are run on ci. Use the following command to record new mocks when api-calls change:

yarn e2e:record

Playwright tests can also be run in headless mode with mocked API calls.

yarn e2e:headless

Code style

Prettier is used for automatic code formatting.

yarn format
yarn format-check

Linting

Eslint is used for linting.

yarn lint-es

Rules are configured in ./eslintrc and extends esling-config-ndla.

Gql template linting

The eslint-plugin-graphql is used to check the queries against the GraphQL schema.

Make sure you have an running instance of the GraphQL enpoint with your latest changes

yarn generate-gql:server

TypeScript

GraphQL code generator is used to generate TypeScript types from the local GraphQL schema and queries.

yarn generate-gql:local

The configuration is found in codegen.yml.

Other scripts

# GTG? Checks code formating, linting and runs unit tests:
yarn check-all
# Create minified production ready build:
yarn build
# Start a production build:
yarn start-prod
# Start a development server with server side rendering disabled:
yarn start-without-ssr
# Start a development sever which talks to a local graphql server running on [localhost:4000]:
yarn start-with-local-graphql
# Do you TDD?
yarn tdd
# Docker stuff
./build.sh