🦠 Microbe ·

nextJS build template with next-auth out of the box

Use this TypeScript template as a starter kit to develop applications from.

Installing / Getting started

Clone the repository

git clone [email protected]:leisurepassgroup/microbe-framework.git

• Refer to Prerequisites and Setting up Dev

Running a local instance

You will first need to set up a .env.local file based off of the .env.example file.

npm install
npm run dev

Developing

Built With

React, NextJS, TypeScript, @marco-polo, Jest, react-testing-library, Cypress

Prerequisites

• Install NodeJS
• Install NVM curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
• Install AVN npm install -g avn avn-nvm avn-n avn setup
• Install npx-merge-driver npx npm-merge-driver install --global
• Install npm-check-updates npm install npm-check-updates --global

On Windows?

• Install win-node-env npm i -g win-node-env

Add auth credentials for JFROG

• Navigate to JFROG and log in using the icon at the bottom (google account)
• Under user profile, generate a new API key
• In terminal type

curl -u YOUR_EMAIL:YOUR_APIKEY https://lpg.jfrog.io/lpg/api/npm/auth >> ~/.npmrc
npm config set registry https://lpg.jfrog.io/artifactory/api/npm/virt-lpg-npm/

• Open your ~/.npmrc file and check that there isn't an error message. You should see some form of credentials .

Run tasks

npm run dev

Redux

Ideally, we want to use redux-toolkit for our store

In store > api you can create a custom RTK api which will allow us to optimise fetching of data using RTKQuery

The File will look something like this

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { HYDRATE } from 'next-redux-wrapper';

export const productsApi = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: process.env.PRODUCT_API }),
    reducerPath: 'productsApi',
    tagTypes: ['Products'],
    extractRehydrationInfo(action, { reducerPath }) {
        if (action.type === HYDRATE) {
            return action.payload[reducerPath];
        }
    },
    endpoints: (build) => ({
        getAllProducts: build.query({
            query: (data) => ({ url: `?currency=${data.currency}&destination=${data.destinationId}` }),
            providesTags: ['Products'],
        }),
    }),
});

export const {
    useGetAllProductsQuery,
    util: { getRunningOperationPromises },
} = productsApi;

export const { getAllProducts } = productsApi.endpoints;

Then you will need to add the endpoint in configureStore.ts and test.render.ts

// configureStore
configureStore({
    reducer: store,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(productsApi.middleware),
});

// test.render.ts
preloadedState = {},
store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      productsApi.middleware,
    ),
  preloadedState,
})

Please read into how this works and why we're using it

If you wish to use Redux-Sagas please refer to ecom-portal-ui

Tests

The tests will automatically run before each deployment. Any new components should be properly tested; we always aim for 85-100% code coverage.

Alternatively, you can run a code watch command

npm run tdd

Or run all of the tests manually, to see what unit test coverage is like

npm run test