tenant47 v0.0.13

Tenant Workspace Details

This project was generated using Nx.

🔎 Smart, Fast and Extensible Build System

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

• React
  • npm install --save-dev @nrwl/react
• Web (no framework frontends)
  • npm install --save-dev @nrwl/web
• Angular
  • npm install --save-dev @nrwl/angular
• Nest
  • npm install --save-dev @nrwl/nest
• Express
  • npm install --save-dev @nrwl/express
• Node
  • npm install --save-dev @nrwl/node

There are also many community plugins you could add.

How to Run

Project Setup Steps if there are any issues

1. Remove file package-lock.json if found issue.
2. Run npm install --legacy-peer-deps.
3. Run sudo su.
4. Run npm install -g @nrwl/cli@13.4.1 to install nx library. note:-if still project will not run then try this 'npm update --all --force'

Development server

Run nx run my-app:serve or npm run my-app:serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run nx g @nrwl/react:component my-component --project=my-app to generate a new component.

Build

Run npm run my-app:build to build the project. The build artifacts will be stored in the dist/ directory. Use the :production flag for a production build.

Running unit tests

Run nx test my-app to execute the unit tests via Jest.

Running end-to-end tests

Run ng e2e my-app to execute the end-to-end tests via Cypress.

Understand your workspace

Run nx dep-graph to see a diagram of the dependencies of your projects.

Create library

Run yarn nx g @nrwl/react:lib ui-shared or npx nx g @nrwl/react:lib ui-shared to create the library.

Create/Remove app

Run yarn nx generate @nrwl/react:application tenant2 to create the app.

Run yarn nx g @nrwl/workspace:remove org1 to remove the app.

Further help

Visit the Nx Documentation to learn more.

☁ Nx Cloud

Distributed Computation Caching & Distributed Task Execution

Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.

Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.

Visit Nx Cloud to learn more.

Project Setup

Prerequisites

1. Node.js & npm installed.

Prerequisites Steps

1. Go to the site https://nodejs.org/en/download/.
2. Download Node.js on Windows with the 32-bit/64-bit setup files and install it.
3. For info please follow this documentation to install nodejs on windows:
   • https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows

Project Setup Steps

1. Remove file package-lock.json if found issue.
2. Run npm install -g @nrwl/cli to install nx library.
3. Run npm install to install dependencies.

Problem Statement while project setup

not yet.

Environment Setup

Steps

1. Run npm install -g env-cmd.
2. Remove the folder environment from tenant_id/src. (Note: tenant_id should be your tenant id such as: tenant1).
3. Create/Copy .env.development, .env.production file & past inside tenant_id.
4. Inside these files you should have variable NXSTORAGE_URL. (Note: any environment variable prefixed with NX such as: NX_CUSTOM_VAR).
5. Update environment file name with new one inside tenant_id/project.json. "replace": "apps/tenant_id/environments/.env.development", "with": "apps/tenant_id/environments/.env.production"
6. Update storageUrl on tenant_id/src/configs/app.config.js file with. environment.storageUrl to process.env.NX_STORAGE_URL also remove environment import.
7. Add scripts on package.json file inside scripts tag. "tenant1:serve:production": "set NODE_ENV=production&&env-cmd -f ./apps/tenant1/environments/.env.production nx run tenant1:serve:production", "tenant1:serve": "set NODE_ENV=development&&env-cmd -f ./apps/tenant1/environments/.env.development nx run tenant1:serve", "tenant1:build:production": "set NODE_ENV=production&&env-cmd -f ./apps/tenant1/environments/.env.production nx run tenant1:build:production", "tenant1:build": "set NODE_ENV=development&&env-cmd -f ./apps/tenant1/environments/.env.development nx run tenant1:build"
8. You can also take reference from tenant1.
9. To know more in details : https://nx.dev/guides/environment-variables.

Environment commands

1. Development

• To run npm run tenant1:serve.
• To build npm run tenant1:build.

2. Production

• To run npm run tenant1:serve:production.
• To build npm run tenant1:build:production.

Onboarding New Tenant

Generate an application

This command used to generate new tenant. (where tenant_id is your tenant id, such as: tenant1)

• Run nx g @nrwl/react:app tenant_id or
• Run yarn nx generate @nrwl/react:application tenant_id to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

e2e integration test application

Once application generated successfully you need to do below points:

• Move e2e folder inside e2e directory apps/e2e/.
• Update configuration /tenant1-e2e to /e2e/tenant1-e2e.

Generate a library

Run nx g @nrwl/react:lib tenant_id to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from @workspace-tenants/mylib.

Tenant Component Update

Tenant specific core component updates.

Steps

1. Rename tenant_id/src/main.tsx to tenant_id/src/main.js &

• update tenant_id/project.json for the same. (import './assets/scss/app.scss';) "main": "apps/tenant_id/src/main.js"
• copy & past its content from tenant1

2. Rename tenant_id/src/polyfills.ts to tenant_id/src/polyfills.js & update tenant_id/project.json for the same. "polyfills": "apps/tenant_id/src/polyfills.js"
3. Copy environent files from tenant1 & place it inside your tenant_id/environments/. &

• update tenant_id/project.json for the same. "replace": "apps/tenant_id/environments/.env.development" "with": "apps/tenant_id/environments/.env.production"
• remove environments folder
• update tenant_id/configs/app.config.js (same as tenant1 process.env.NX_STORAGE_URL).
• Add scripts on package.json file inside scripts tag. "tenant1:serve:production": "set NODE_ENV=production&&env-cmd -f ./apps/tenant1/environments/.env.production nx run tenant1:serve:production", "tenant1:serve": "set NODE_ENV=development&&env-cmd -f ./apps/tenant1/environments/.env.development nx run tenant1:serve", "tenant1:build:production": "set NODE_ENV=production&&env-cmd -f ./apps/tenant1/environments/.env.production nx run tenant1:build:production", "tenant1:build": "set NODE_ENV=development&&env-cmd -f ./apps/tenant1/environments/.env.development nx run tenant1:build"

4. remove app, assets folders.
5. copy assets, configs, modules folder from tenant1 place on tenant_id/src.
6. remove tenant_id/src/app.scss & update tenant_id/project.json for the same. "styles": ["apps/tenant_id/src/assets/scss/app.scss"]
7. open tenant_id/src/configs/app.config.js file & update tenant_id, tenant_name.
8. update favicon.ico inside images folder:

• update index.html such as: ./assets/images/favicon.ico.
• update project.json such as: apps/tenant1/src/assets/images/favicon.ico.

9. update all module .js & .scss files.
10. folder structuring - configs, environments folder should be available on tenant_id/ direactory.
11. Use AlphaNumeric on FormInput for passcode validation.

12. validate each component ui & functinality using checklist: https://docs.google.com/spreadsheets/d/1qgFvYTtuXGJk6hkm1fWd0fgcK_SQywv8cDhhRQdqbjk/edit#gid=626872170

    NOTE:-

    1. Rename Styles.scss to app.scss inside assets folder.
    2. Import app.scss on main.js file.
    3. Update style.scss to app.scss inside project.json.

Extensions

Prettier

1. install Prettier - Code formatter.
2. Settings VS Code File -> Preferences -> Settings ->:

• Serch 'Editor: Default Formatter' select Prettier - Code formatter.
• Serch 'Editor: Format On Save' should be checked.

Jest - Unit test

Modules

Steps

1. each module of tenant should have spec file.
2. such as tenant_id/src/modules/component_name/component_name.spec.js.
3. each spec file should contains unit test cases related to perticular module.
4. to run - nx run tenant1:test. should be run successfully without error.
5. you can take reference from tenant1.

Coverage

1. Module should be available & render success.
2. Router should be available & working.
3. UI should be updated.

Validation

To allow Alphabets Numbers only

• Import function lib: import { AlphaNumeric } from '@workspace-tenants/functions';.
• Use AlphaNumeric function on FormInput for passcode validation.
• You can take reference from tenant1.

Bundler

Webpack

Bundle size, especially initial bundle size, is an important metric which determines not only how fast your web app will load, but even, potentially, how well your site ranks on search engines.

With Webpack Bundle we have a good tool at our disposal to experiment with:

• import techniques
• libraries with different bundle sizes and sets of tradeoffs
• lazy loading strategies
• dev and prod bundles

Nx makes it easy to set budgets for initial bundle size. Search for ‘budgets’ in project.json. In our project, it can be found here (note the breadcrumb), and these are the default settings.

"budgets": [{"type": "initial","maximumWarning": "500kb","maximumError": "1mb"}]

Webpack Bundle Analyzer (WBA)

It's a tool to help us visualize our bundle sizes. It creates an interactive zoomable “treemap”. The top level rectangles are chunks and the child rectangles are dependencies. The size of each rectangle is proportional to its bundle size. Therefore, WBA can help us rapidly zero in on the biggest dependencies first, where fixing things might have the biggest impact.

There are a number of other articles that can introduce us to WBA. I hope this one goes a little farther and offers a few more tips, especially with respect to how WBA can work with an Nx React app.

• First, install WBA and npm-run-all as dev dependencies: npm i -D webpack-bundle-analyzer npm-run-all

Versions and Configuration

we notice there are dev and prod versions of the commands. What I discovered is that both versions are potentially useful. The Prod version is more “real” in that it is more accurate with respect to the bundle our actual users will get. On the other hand, the Dev version can have some more information and can be easier to analyze, as we will see later.

npm-run-all is a convenient cross platform tool to help us run our scripts in parallel or in series. –skip-nx-cache makes sure we recalculate the cache and I found this was necessary when switching back and forth between dev and prod versions of the stats for WBA. –memoryLimit=8192 speeds up the build on my computer by 10-15s. –statsJson generates the stats.json file that WBA will require.

The command to just generate a version of the stats.json file:

npm run tenant1:build:production:stats

Run the full command to see this visually:

npm run analyze:production:stats

Prod Version

• tenant1:build:production": "set NODE_ENV=production&&env-cmd -f ./apps/tenant1/environments/.env.production nx run tenant1:build:production -- --memoryLimit=8192
• tenant1:build:production:stats": "nx run tenant1:build:production --skip-nx-cache -- --memoryLimit=8192 --statsJson
• tenant1:analyze:production:stats": "run-s \"tenant1:build:production:stats\" \"tenant1:production:webpack-bundle-analyzer\"
• tenant1:production:webpack-bundle-analyzer": "webpack-bundle-analyzer dist/apps/tenant1/stats.json

Dev Version

• tenant1:build": "set NODE_ENV=development&&env-cmd -f ./apps/tenant1/environments/.env.development nx run tenant1:build -- --memoryLimit=8192
• tenant1:build:stats": "nx run tenant1:build --skip-nx-cache -- --memoryLimit=8192 --statsJson
• tenant1:analyze:stats": "run-s \"tenant1:build:stats\" \"tenant1:webpack-bundle-analyzer\"
• tenant1:webpack-bundle-analyzer": "webpack-bundle-analyzer dist/apps/tenant1/stats.json

It’s often helpful to think in terms of relative size: units are sometimes hard to compare if derived from different sources. With WBA, we can prove to ourself that if you reduce the bundle size of dev, it should also usually reduce the bundle size of prod.

Remember also that, byte-for-byte, Javascript is more expensive than equivalently sized images or other assets because Javascript has parsing, compiling, and execution costs.

reCAPTCHA v3

Here, we will use Google reCAPTCHA official document in a slightly different way. We have to finish this functionality in two parts.

Running lint

Run nx lint recaptcha to execute the lint.

Steps to implement reCAPTCHA v3

1. Generate google reCAPTCHA v3 keys.
2. Use Recaptcha common library in the tenant app. Note: recaptcha library has already implemented to share across tenants if needed.

1. Generate google reCAPTCHA v3 keys

we have to generate reCAPTCHA v3 keys from which we will use the SITE KEY for the client side integration and the SECRET KEY for the server side integration. Use this link to generate keys. The following image will help you to create keys.

• site key: 6LetgDMeAAAAAGYafJCiyMj0DrzihnRaK4v6GYRe
• secret key: 6LetgDMeAAAAAFe37gUEihL80_WyGH-pSuyAGyO8 Note: Don’t forget to add localhost in the Domains section for local development there.

2. Use Recaptcha lib in the tenant app.

> Environment - Add new variable on .env file with site key

• NX_RECAPTCHA_SITE_KEY=6LetgDMeAAAAAGYafJCiyMj0DrzihnRaK4v6GYRe.

> App.config - Add new variable on app.config.js file

• reCaptchaSiteKey: process.env.NX_RECAPTCHA_SITE_KEY,

> Import libary

• import { RecaptchaProvider, ReCaptchaVerify } from '@workspace-tenants/recaptcha';.

> Load provider function on useEffect function

• useEffect(() => {
• RecaptchaProvider("passcode_recaptcha_key", config.reCaptchaSiteKey, function () {console.log("ReCaptcha Provider loaded!")});
• }, []);

> Verify ReCaptcha on submit function

• const onSubmit = (formData) => {
• ReCaptchaVerify(config.reCaptchaSiteKey, 'passcode_submit', function (token) {
• console.log("g-recaptcha-response: "+token);
• });
• };

reCAPTCHA versions

In reCAPTCHA v1, every user was asked to pass a challenge by reading distorted text and typing into a box. To improve both user experience and security, they introduced reCAPTCHA v2 and began to use many other signals to determine whether a request came from a human or bot. This enabled reCAPTCHA challenges to move from a dominant to a secondary role in detecting abuse, letting about half of users pass with a single click (“I’m not a robot” checkbox). Now with reCAPTCHA v3, they are fundamentally changing how sites can test for human vs. bot activities by returning a score to tell how suspicious an interaction is and eliminating the need to interrupt users with challenges at all. reCAPTCHA v3 runs adaptive risk analysis in the background to alert of suspicious traffic while letting our human users enjoy a frictionless experience on our site.

Referance link Attached here.

Analytics

Running lint

Run nx lint analytics to execute the lint.

Import libary

• import { AnalyticsProvider } from '@workspace-tenants/analytics';

Load analytics provider

• useEffect(() => {
• AnalyticsProvider(analyticsJsonArray, function () {console.log('Analytics Provider loaded!')});
• }, []);

Analytics json array format

• [{name: 'mouseflowTracking',status: true,code: '<h4>Mouseflow Tracking</h4>',scriptSrc: 'https://use.typekit.net/mouseflow.min.js'}]

How to Run different brand

• Site/Report module should be inside your brand folder name. such as primary, athlatics etc.
• in main.js need to pass brand folder name on route. <RouteShared tenantId={config.tenantId} brand={config.brand}/> & add brands on config file
• Note: for primary brand no need to pass brand its by default render it.
• If you have any sub brand like campaign or any other then need to add in package.json file Ex: "tenant64:serve:campaign": "set NODE_ENV=development&&env-cmd -f ./apps/tenant64/environments/.env.development.campaign nx run tenant64:serve", and run this command line : npm run tenant64:serve:campaign

Implementor Notes

index.ts

index.js