# Insite digital website (frontend)

React app for Maersk Pool Partner

## Setting up development environment

### Adding environmental variables to the application

variables should be added in `webpack.env.local.js` for local environment purposes. Test/Stage/Production variables are defined as GitLab variable.

You can get them from CI/CD or k8s if you want to do that yourself or just ask your teammate.
Add 'NPM_TOKEN' to system environmental variables.

To install packages use command:

```js
yarn install --production=false
```

## Development

For development use command (browsersync implemented):

```js
yarn run dev
```

It sets up project on [http://localhost:1234](http://localhost:1234), changes in code doesn't require to reload page in browser.

## Building production

To build project in production version use command:

```js
npm run build
```

All output files will be saved in `dist` directory

## Testing

Project is using Jest Tests. More info about how to write tests in [React](https://facebook.github.io/jest/docs/en/tutorial-react.html) and [Redux](https://redux.js.org/recipes/writing-tests).

To run one pass of test execute command

```js
npm run test
```

During development use test in watch mode which checks for changes and updates status immediately.

```js
npm run test:watch
```

To update test snapshots execute:

```js
npm run test:update
```

### Icons

Project is using [icomoon](https://icomoon.io) for generating font with embedded svg icons.

-   Generated fonts files are located in `assets/fonts/mt-pool-partners`
-   Styles for font are kept in `styles/vendors/icomoon`

In order to update this font you need to import json to icomoon located in `styles/vendors/icomoon/selection.json`. Remember to keep this file updated.

Keep your eye on the size of the icon inside font -> to tweak it chose edit / scale / fit to canvas feature. What we aim at is that all the icons inside the font feel like they are of the same size.

Remember to update path in variables.scss In our repository the correct path should be: `/assets/fonts/mt-pool-partners`

To use icon you need to add class `icon` with icon name like that:

```js
<i class="icon-logo"></i>
```

After regenerating icons you need to be aware that paths will be different so you need to fix them by yourself.

## Deployment

### Requirements

to be able to deploy you need to install

-   [docker](https://docs.docker.com/install/)
-   [kubernetes cli](https://kubernetes.io/docs/tasks/tools/install-kubectl/)
-   [helm](https://docs.helm.sh/using_helm/#installing-helm) (its important to install [version 2.8.2](https://github.com/kubernetes/helm/releases))

### Credentials

All credentials are stored in 1password

## Manual test server deployment

change image tag to current day and hour when the deploy it was made - it helps to find which one is currently on test

```bash
IMAGE_TAG=manual-dd-mm-yyyy-hh-mm
BUILD_IMAGE="acrnoeupmtd.azurecr.io/poolpartner/mt.pp.frontend.img:$IMAGE_TAG"
```

build docker image and push to docker repository

```bash
docker login acrnoeupmtd.azurecr.io -u $MTD_ACR_LOGIN -p $MTD_ACR_PASSWORD
docker build --pull -t $MTD_ACR_BUILD_IMAGE .
docker push $MTD_ACR_BUILD_IMAGE
```

deploy docker image to server

```bash
helm upgrade mt-pool-partner-test helm\mt-pool-partner --namespace mt-test --install --set imageTag=$IMAGE_TAG,ingress.host=test.insitedigital.net
```