Munro Footwear Group

Headless Magento setup that uses NextJS framework with GraphQL, Jest+React Testing Library, Husky + commitLint + lint-staged, ESLint, Prettier

Pre-requisite

• Node version >= 16.8.0

Getting Started

First, clone this repository using production branch and install dependencies. Please take note that this project has private dependency, please setup GITHUB token and modify .npmrc. You may also need to setup hostnames in your machine.

Please follow instructions in below guide for local development setup:

• Local Development Guide

SSL Certificates

Note: Port 3001 is used for SSL and forwarded through to 3000 via a script. This means we will use port 3000 for local dev server frontend domain.

Locally signed SSL certificates are required for https on local dev environment. For SSL Certificate setup please refer to this documentation page in confluence

Local Dev Server URLs

Local dev server url can be found below, replace brand with appropriate brand

https://local-next.brand.com.au:3000

Examples

https://local-next.williamsshoes.com.au:3000

https://local-next.styletread.com.au:3000

Script: Development

NOTE: SSL Certificate needs to be set up first, see above.

Start server in development mode with https (Use This Command)

This will start a server in dev mode. This environment will hot reload, show full errors, etc. Generally this is the command you should run on local to start dev server

npm run dev

NextJS Core Memory Leak Issues (Alternatively Use These Commands)

Note: Production mode server will NOT show errors by default.

If you experience NextJS memory leak issues, see below for work around:

• Step 1 - Run build using .env.development file in production mode:

npm run build:dev

• Step 2 - Start server using build files and .env.development from previous step, in production mode

npm run start:dev

Build and Start Environment Specific Server

NOTE: replace env below with name of environment from package.json (e.g. staging, production)

Note: Production mode server will NOT show errors by default.

This will start server in production mode using the .env file of the specified environment. E.g. staging will use .env.staging

• Step 1 - Run build using .env.development file in production mode:

npm run build:env

Example npm run build:staging

• Step 2 - Start server using build files and .env.development from previous step, in production mode

npm run start:env

Example npm run start:staging

Start HTTP Server (Fallback Only)

• Below is purely a fallback, this generally isn't used.
• Fall back option open dev server with http (non-secure connection):

npm run dev:http

Script: Testing

// run unit test
npm run test

// run unit test and watch for changes
npm run test:w

Script: Tools

// check for Typescript errors
npm run check-types

// check for formatting errors
npm run format

// check for formatting errors and fix
npm run format:fix

// .clean .next folder
npm run clean

GIT Guidelines

See: https://munrofootweargroup.atlassian.net/wiki/spaces/WDT/pages/1902248086/GIT+Commit+Guidelines

Build & Deployment

See: https://munrofootweargroup.atlassian.net/wiki/spaces/WDT/pages/1839956197/CICD+Automation+Testing+and+Deployment