Introduction

This section aim to teach you about the fundamentals and principles of frontend development at met, enabling you to build WCAG compliant client-side applications. We hope to help you fully utilize the tools and workflows enabling you to quickly get up to speed.

We do not intend to provide in-detail information about every topic, rather we want to provide you with an effective introduction to what is relevant. Wherever necessary, links to external sources or the official documentation is provided in the light-blue “seealso” boxes.

Curated list of external sources and official documentation for this section.
React	https://react.dev/learn
Material ui	https://mui.com/material-ui/getting-started/overview/
Typescript	https://www.typescriptlang.org/docs/handbook/intro.html
WCAG	https://www.uutilsynet.no/veiledning/nettsteder/711

Installing nodejs and npm

To build a React application you will need the JavaScript engine nodejs and a package manager system called npm (unless you have spesified your project otherwise). These can both be installed from installers, though we do recomend using a a Node version manager system like nvm, since he Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally. A version management system also makes it a lot easier to work with multiple node environments at the same time(if that is something that you do.)

to install nvm simply run:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

or:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

you can then verify the installation with the command:

command -v nvm

which then should out nvm into your terminal. (if this is not the case, there might be some issus with your profile. see seealso for troubleshooting)

then to download, compile, and install the latest release of node:

nvm install node

Creating a react application

Creating a react application can be done in multiple ways, but the simplest starting points would either be to use our internal boilerplate or facebooks maintained create react app.

The boilerplate can be found at <https://gitlab.met.no/team-frontend/react-boilerplate>. From here you can

Click Clone.
Select prefered way of cloning.
Run git clone <preferred-clone-method> my-app in the terminal.

if you instead want to use the create react app deafult project the steps would be:

npx create-react-app my-app --template typescript

You should now have a local react repository called my-app with a typescript template.

Note

The template are subject to changes over time, they might be renamed or changed for other reasons.

Running your application

To run a React application you will have to have complete the two steps above. If that is covered, cd into the my-app folder and make sure that there exists a project.json in the current folder structure.

if there is no folder called node_modules here, we first run the command:

npm install

this will install all the dependencies for the project. when the installation completes you should be able to run:

npm start

to run your application on localhost. If your user allows it it should be automatically opened in a browser window. if not open then localhost url with ports displayed in your terminal.

Note

Running npm install also tries to updates dependencies in the current node_modules structure depending on what settings are set in the project.json file.