React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

White-labeling

Steps to add a new white label

1. Client Instructions:

• supply assets and colours to be used for the white-label (favicon if necessary)
• determine a sub-domain to use as mask, dashboard is preferred (ex: dashboard.example.com)
• add a CNAME record pointing their custom subdomain (ex: dashboard.example.com) to brandxtech.ca
• add a login button on their website point to /login of their custom subdomain (ex: dashboard.example.com/login)

It is recommended to start with the Auth0 stage once everything from the client has been recieved as things like the client ID will be needed in other stages

Frontend Steps

1. Create a PWA folder in public that is named after the client and generate PWA assets using this website (use the company logo but you might need to use a custom favicon depending on the result)

• https://maskable.app/ also create a maskable icon for PWA
• create a 512x512 png as well for PWA

2. Create a white-label branding folder in src/assets/whitelabels and create a darkLogo.png and lightLogo.png from the client's logo
3. In src/services/whiteLabel.ts, add a new Whitelabel instance with the required fields and add its hostname mapping to the whitelabels map
4. If there are any pages specific to the whitelabel be sure to update the side and bottom navigator

Backend Steps

1. In dynamic-config.prod.yml, add a router entry for the new whitelabel
2. In pond/http/server.go, add the sub-domain to the allowedOrigins
3. In pond/whitelabel.go, add an entry for the new white label

Auth0 Steps

1. Create a new Single Page App on Auth0 using React as the tech
2. Once you have the client ID add it to your .env file in the frontend
3. Adjust settings accordingly in the new application
   • use a image bucket like postimg to store their company logo and favicon
   • add a whitelabel logo
   • allow necessary origins, callback URLs, and CORS domains to the application settings (see other applications/whitelabels as a guideline)
   • customize the Universal Login page to handle the new whitelabel
     • check if the client ID matches this client's Auth0 application
     • change the Universal Login theme using white-label colours and images stored in a bucket (ex: postimg)

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})