This repository is the UI for JOD Ohjaaja. JOD Ohjaaja is part of the Digital Service Ecosystem for Continuous Learning (JOD) project.
The UI app is built using React, Vite, and TypeScript. React is a popular JavaScript library for building user interfaces, while Vite is a build tool that provides fast and efficient development experience. TypeScript is a superset of JavaScript that adds static type checking and other features to the language.
Together, these technologies provide a robust and efficient development environment for building modern web applications with a focus on user experience. The app is designed to be responsive and accessible.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- First, ensure that you have NVM installed on your machine.
- Clone this repository to your local machine.
- Open a terminal window and navigate to the root directory of the project.
- Run the following command to install Node.js & NPM and the dependencies:
nvm install
nvm use
npm install- Take the steps in JOD Design System repository to get components of the design system work in hot reload mode.
- Create a
.env.localfile and put the required environment variables there in order to get the connection to the CMS working. The required variable names are in.envfile. See the following wiki page for further instructions: https://wiki.eduuni.fi/pages/viewpage.action?pageId=539867888 - Once the installation is complete, run the following command to start the development server:
npm run dev- The app should now be running on http://localhost:8080/.
Third-party assets such as images, fonts, and icons are stored in a S3 bucket. Guide to download assets is available in the infrastructure repository.
Run the following command to update the JOD Design System to the latest version:
npm update @jod/design-systemAxe is used automatically when run in development mode.
When starting the development server you can see findings of Axe, if any, on the console for e.g when missing <main>-tag:
New axe issues
moderate: Document should have one main landmark https://dequeuniversity.com/rules/axe/4.8/landmark-one-main?application=axeAPI
moderate: All page content should be contained by landmarks https://dequeuniversity.com/rules/axe/4.8/region?application=axeAPI
Useful browser extension to use