88 lines
3.8 KiB
Markdown
88 lines
3.8 KiB
Markdown
# 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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) 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)
|
|
|
|
<!-- frontend steps -->
|
|
1. Create a PWA folder in `public` that is named after the client and generate PWA assets using [this](https://realfavicongenerator.net/) 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
|
|
4. Enable the white-label sub-domain for CORS in the backend by adding it to the allowed origins http/server.go
|
|
|
|
<!-- Auth steps -->
|
|
1. Create a new `Auth0` application for the client
|
|
- use a image bucket like [postimg](https://postimages.org/) 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](https://postimages.org/))
|
|
|
|
- in [http.go](https://gitlab.com/brandx/backend/blob/master/pond/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:
|
|
|
|
```js
|
|
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](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
|
|
|
```js
|
|
// 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,
|
|
},
|
|
})
|
|
```
|