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:

yarn install --production=false

Development

For development use command (browsersync implemented):

yarn run dev

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

Building production

To build project in production version use command:

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 and Redux.

To run one pass of test execute command

npm run test

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

npm run test:watch

To update test snapshots execute:

npm run test:update

Icons

Project is using icomoon 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:

<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
• kubernetes cli
• helm (its important to install version 2.8.2)

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

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

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

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