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)

2. 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

3. Create a white-label branding folder in src/assets/whitelabels and create a darkLogo.png and lightLogo.png from the client's logo
4. In src/services/whiteLabel.ts, add a new Whitelabel instance with the required fields and add its hostname mapping to the whitelabels map (it is very similar to step one but had some constraints when dealing with the public folder)
5. If there are any pages specific to the whitelabel be sure to update the side and bottom navigator

6. In dynamic-config.prod.yml, add a router entry for the new whitelabel

7. In pond/http/server.go, add the sub-domain to the allowedOrigins

8. In pond/whitelabel.go, add an entry for the new white label

9. Create a new Auth0 application for the client

   • 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 the default application 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)

10. Enable the white-label sub-domain for CORS in the backend

• in http.go, add the white-label sub-domain to the AllowedOrigins list

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,
  },
})