Configs

Introduction

A configurations library designed to simplify reusability of configurations functions in projects, providing commonly used tenant, parameters, and hostnames functions.

Installation

To use @phpcreation/frontend-config-react-nextjs-bundle in your project, follow these steps:

Open a terminal in your project root

Create a Github Personnal Access Token

How to create a Github PAT :

Create a Github Personal Access Token


npm login --scope=@phpcreation --auth-type=legacy --registry=https://npm.pkg.github.com

username: your github username in lowercase
password: The PAT you just created

Install the Package


npm install @phpcreation/frontend-config-react-nextjs-bundle

Setup

Environment Variables

Follow these steps to manage environment variables correctly :

Environment Variables Management

.env


# Configs
## Hostname and tenant
CONFIG_HOSTNAME_TMP='HOSTNAME' # The default hostname as a fallback in local. Ex: demo.dev.inventory.phpr.link
CONFIG_DEFAULT_TENANT='DEFAULT_TENANT_NAME' # The default Tenant as a fallback when the real tenant is'nt found. Ex: inventory-phpr_default_tenant
 
## Config API
CONFIG_API_URL='https://config.solidservice.link/$CONFIG_API_VERSION'
CONFIG_API_VERSION='api/v1'
CONFIG_API_LOGIN_URL='https://config.solidservice.link/api/login_check'
 
## Flags
CONFIG_SHOULD_TEST_HOSTNAME=0 # 1 - Should Test hostname to make sure it's valid, 0 - Don't test hostname
CONFIG_DONT_GET_BY_FILE=1 # 1 - Should not get by file for caching, 0 - Should get by file for caching
CONFIG_DONT_GET_BY_CACHE=0 # 1 - Should not get by cache, 0 - Should get by cache
CONFIG_GET_PARAMETERS_BY_HOSTNAME='1' # 1 - Get by hostname, 0 - Get by tenant

.env.local

These variables should be sent to the secrets of the deployed app. and not committed to version control.


# Configs
## User
CONFIG_USERNAME='APP-phpr_USERNAME'
CONFIG_PASSWORD='PASSWORD'

In Layout (only needed for Client side)

Import TenantProvider, Tenant (type) and getTenant


// Tenant
import { TenantProvider } from "@phpcreation/frontend-config-react-nextjs-bundle/contexts";
import {
  getTenant,
  Tenant,
} from "@phpcreation/frontend-config-react-nextjs-bundle";

Import headers

It’ll be used to get the hostname from a server side


// Headers
import { headers } from "next/headers";

Make the RootLayout async


export default async function RootLayout

Get tenant from the hostname


const hostname =
  process.env.CONFIG_LOAD_ENV === "1"
    ? process.env.CONFIG_HOSTNAME_TMP
    : headers().get("host");
 
const tenant: Tenant | null = await getTenant(hostname || "");

Wrap the component with TenantProvider


<TenantProvider value={tenant}>{children}</TenantProvider>

Usage

Example (Server Side)


import { getTenant } from "@phpcreation/frontend-config-react-nextjs-bundle";
import { Tenant } from "@phpcreation/frontend-utils-react-nextjs-bundle/utils/types";
 
export async function GET(request: NextRequest) {
  const hostname =
    process.env.CONFIG_LOAD_ENV === "1"
      ? process.env.CONFIG_HOSTNAME_TMP
      : request.headers.get("host");
 
  const tenant: Tenant | null = await getTenant(hostname || "");
  if (!tenant) {
    return new Response("Tenant not found", { status: 404 });
  }
 
  console.log("Tenant : ", tenant.name);
}

Example (Client Side)


import { useTenant } from "@phpcreation/frontend-config-react-nextjs-bundle/contexts";
 
// This returns the tenant name
const tenant = useTenant();