@flipdish/portal-library 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+# 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
+
+# Creating a new Project
+
+Replace all occurences of `serverless-app-template` with your new app name. It's also important that this name is passed as the `microFrontendWindowName` in the Portal code (see Portal readme for implementation example). 
+
+
+# Testing the project
+
+`pnpm run test`
+
+# Starting the project
+
+`pnpm run dev`
+
+Local run uses the index.html attributes so you can locally change language etc. 
+
+Update the local url in your browser to `/home` otherwise the `Not Found page` will be displayed.
+
+# Logging to datadog
+
+To save each of the micro frontends initiating their own datadog client Portal sets its logger to the window object `fdlogger`. Typings are set in global.d.ts supporting:
+
+`debug, error, info, log, warn`
+
+For example:
+`window.fdlogger?.info('Hello from the micro-frontend!');`
+
+# Amplitude tracking
+
+To save each of the micro frontends initiating their own Amplitude client Portal sets its logger to the window object `FdAmplitude`. Typings are set in global.d.ts supporting the useTracking hook.
+
+For example:
+```
+const { trackEvent } = window.FdAmplitude?.useTracking() || {};
+
+useEffect(() => {
+ trackEvent('micro_frontend_test', {
+        action: logged_in,
+      });
+},[])
+```
+
+# Lazy loading components
+
+Lazy loading reduces the bundle size improving load speeds on devices with poor internet connection.
+
+We can lazy load components using the LazyComponent util component as follows:
+
+```
+import LazyComponent from './ui/LazyComponent';
+
+const About = lazyWithRetry(async () => await import('./About'));
+...
+        <Route
+          path="/about"
+          element={
+            <LazyComponent>
+              <About />
+            </LazyComponent>
+          }
+          />
+...
+```
+
+# Translations
+
+### Using the translate hook
+To use translations in the code you:
+
+```
+import { useTranslation } from '../providers/TranslationProvider';
+
+const SomeComponent = () => {
+  const { translate } = useTranslation();
+
+  return <div>{translate('translation_key',  { count })}</div>
+}
+```
+
+Note: {count} should be referenced in the translation string for replacement such as "Count is {count}"
+
+### Adding new translations
+We use Loco as a source of all translations `https://localise.biz`. Don't edit json lozalization files manually. Update language sources in Loco projecs (`https://localise.biz/conor/serverless-app-template#!l=1` as example).
+
+
+We use chatGPT4 (chatgpt.com) for translations. 
+1. Pass the `en` example to chatGPT with the required languages:
+  ```translate the following to dutch, us english, german, french, italian, spain spanish, portugese and mexican spanish  "Welcome_about_page": { "value": "Welcome to the About Page" }```
+2. Update the related translations  in Loco and trigger `.github/workflows/translations.yml` in GitHub Actions.
+
+### Adding new languages 
+1. Copy and paste the english version into chatGPT and ask for the new language that you want. 
+2. Add the language key along with translations to Loco and trigger `.github/workflows/translations.yml` in GitHub Actions.
+3. Add the language key to `languagesToLoad` in `providers/TranslationProvider.tsx`
+
+### WDIO Integration testing
+We use [WDIO](https://webdriver.io/) for integration testing with a similar set up to Portal. You should have the bulk of your e2e tests for the MF here and add a WDIO test in Portal to verify that the micro-frontend loads successfully. 
+
+To run the tests locally in the `packages/frontend/e2e/wdio` directory run `pnpm run wdio:local` which will run your `<fileName>.feature` files.
+
+To run individual feature files in the `packages/frontend/e2e/wdio` directory run `pnpm run wdio:local --spec features/login.feature`.
+
+The urls used to load the Portal and the specific MF version are defined on run in `config.ts`:
+  PORTAL_URL: 'https://prod-staging.portal.flipdishdev.com'
+  
+  MICROFRONTEND_INDEX_URL: '${{ steps.variables.outputs.distributionUrl }}assets/index.js'
+
+The WDIO for MFs run in [AWS Device Farm](https://aws.amazon.com/device-farm/).