Purchase Path Front-End

Purchase Path front-end is a nextjs React project utilising the nib Mesh design system

• Developers - In depth technical details and codebase best practices guidelines
• Contributing - Ways of working and how to make changes

Getting Started

Using node at version >=18.16.0 and npm at minimum version >=9.5.1, so check your versions:

node -v
npm -v

Install required versions of node and npm (or install and use nvm):

node -v
npm install -g npm

Library / Package Access

@nib | @nib-components organizations

The Mesh components used in this project are hosted in the private npm registry (under nib and nib-components organizations), so before first install you will need to log-in and ensure you have access to these registries inside your npm account. You will need to provide your email address and password:

npm login

The npm login will open a login page in your browser if you are not logged in. You will need to log in before npm install can be successful. You can check who you are logged in as:

npm whoami

@nib-group packages

Packages such as masquerade that are located in the github package registry. You will need to gain a personal access token in order to access these to install them. Follow the below steps to generate a token

1. Generate a personal access token
2. Create a .npmrc file in this repository using this template

@nib-group:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<insert PAT here>

Alternatively: You may use the rqp-cli in order to generate this token and file for you using rqp package auth npm. You must first authorize yourself with rqp auth

Notes for local server

• Please make sure below entry is there in host file Steps to add the route in host file :

1. For Windows - Go to C:\Windows\System32\drivers\etc\hosts file and add following configuration to hosts file:

   # Purchase Path frontend
   127.0.0.1 tvl-purchasepath-fe-loc.wng.local

2. For Mac - Go to /etc/hosts and add the following configuration:

   # Purchase Path frontend
   127.0.0.1 tvl-purchasepath-fe-loc.wng.local

Running for Local Development

Using API mocks locally

for API mocking, copy .env.example and rename your copy to .env.local. There are several environment variables present which can be used to enabled mocking as required for different sets of API endpoints. For example, setting NEXT_PUBLIC_QUOTESINTERCHANGE_API_MOCKING_ENABLED=false will disable mocking for Quotes Interchange endpoints meaning that actual valid intyerchange tokens are required that can be validated against the kaos Quotes API.

Next, install the required packages:

npm install

Then build the project to check you have a clean build --

npm build

Then serve up the project in your browser -- (use 'npm dev' to enable hot reloading)

npm dev

Open http://tvl-purchasepath-fe-loc.wng.local:3000 with your browser to see the result.

HTTP Headers required

Add Mod Header extension to your browser, and set 2 request headers as follows -

X-Brand = edi X-Environment = kaos

Docker for Local Development (Optional)

(for developers who cannot switch node versions easily, eg: nvm/pnpm is blocked on their machine)

1. Make sure docker is installed on your machine
2. Create a .npmrc file in the root of the project with the following content:

@nib-group:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<replace-me-with-your-token>

@nib:registry=https://registry.npmjs.org/
@nib-components:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=<replace-me-with-your-token>

3. If this is the first time running this app and you do not have the image, run docker-compose up --build to build the image and start the container
4. If you already have the image, run docker-compose up to start the container
5. Open http://localhost:3000 with your browser to see the result.
6. To stop the container, run docker-compose down