@cdmbase/wiki-browser 12.0.18-alpha.5

package/lib/templates/content/docs/contributing/project-setup.md

@@ -0,0 +1,233 @@
+---
+meta:
+    title: Project Setup
+    description: Project Setup
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Project Setup...
+headers:
+    Cache-Control: no-cache
+---
+
+## Getting Started
+
+If you want to develop FullStack locally you must follow the following instructions:
+
+1. Clone fullstack-pro locally. Replace the git url with the project url instead.
+
+Example:
+
+```
+git clone https://github.com/cdebase/fullstack-pro
+cd fullstack-pro
+```
+
+2. Install dependencies and build packages.
+
+    a. make sure `python` version `2.7.16` or higher in `^2` version installed.
+
+    b. install `node-gyp` globally. For installation check [this document](https://github.com/nodejs/node-gyp#installation).
+
+    c. install `watchman` for macOS users
+
+    d. Node version supported is `>=16.0.0` and `yarn` version is `1.22`. You can Download Node from [here](https://nodejs.org/dist/v12.18.4/)
+
+    e. Insall and build packages using following command. Run from the root folder of this project.
+
+```
+    yarn global add lerna
+    yarn bootstrap
+```
+
+3. Setup environment file
+
+You need to have environemnt file before you start the project. There is a sample file exist at `config/development/dev.env.sample` which you can copy as `config/development/dev.env`.
+
+```
+cp ./config/development/dev.env.sample ./config/development/dev.env
+```
+
+You may need to set personalized values in the `dev.env` file.
+
+4. Start server MongoDB and Redis (look for [Installation Section](#installation-of-prerequisties-servers))
+
+> redis-server
+
+> mongod
+
+5. Start both client and server together
+
+```
+yarn start
+```
+
+Alternatively (**recommended**), if you need to run `backend` and `frontend` on its respective terminal instead of one terminal then follow [How to Start Backend and Frontend seperately](./run-various-options#how-to-start-backend-and-frontend-seperately)
+
+### Server Enpoints:
+
+The server endpoing you can get when the apps starts.
+
+The graphql server endpoints typically are
+
+> http://localhost:8080/graphql
+
+The browser server endopoint is
+
+> http://localhost:3000
+
+### Start Mobile (expo)
+
+Follow the steps [here](./run-various-options#start-mobile-application)
+
+### Start Desktop (Electron)
+
+Follow the stesp [here](./run-various-options#start-desktop-application)
+
+## How to run with HotReload for live changes both in the server and browser?
+
+To run build with watch for dependent packages, for auto reloading changes into the server to be productive during development.
+
+```
+yarn watch-packages
+```
+
+If you also need to watch along with it, you can use as many scopes as required like below.
+
+```
+yarn watch-packages -- --scope=@sample-stack/counter-module* --scope=@packageb
+```
+
+To run build with watch for all the packages. Note: This will run watch on all packages under `packages-modules` and may saturate the resources in your laptop instead run above `watch-packages` command.
+
+```
+yarn watch
+```
+
+Sometimes if we have to run `build` or `watch` you can use the `lerna` [command](https://github.com/lerna/lerna/tree/master/commands/exec#usage) for the targeted packages
+
+```
+lerna exec --scope=<package name> yarn watch
+```
+
+- here `<package name>` will be the package you working on currently. If you have multiple packages, then you need to run it multiple times for each package in its respective terminal.
+
+## How to take changes from the branch?
+
+Most of the changes at code level can be taken using `git` command.
+
+But in some cases when `lerna's packages` are added or versions in `packages.json` are updated, to avoid getting installed duplicate pacakges due to monrepo architecture you need to first clean existing `node_modules` and reinstall again. This can be done with following command.
+
+```
+yarn clean:force && git pull <branch_name> && yarn install && yarn build
+```
+
+- here <branch_name> should be replaced with the branch you getting updates.
+
+## Installation of Prerequisties servers
+
+Install redis and mongo and setup an instance with default settings on default port,
+Please check the installation documentation of each one.
+
+MongoDB install :
+
+> https://www.mongodb.com/docs/manual/administration/install-community/
+
+Redis install:
+
+> https://redis.io/docs/getting-started/
+
+## Advance Options
+
+### To test Production build and run
+
+You need to run Frontend and Backend in two seperate servers.
+
+to start frontend server
+
+```
+lerna exec --scope=*frontend-server yarn build
+lerna exec --scope=*frontend-server yarn start:dev
+```
+
+to start backend server
+
+```
+lerna exec --scope=*backend-server yarn build
+lerna exec --scope=*backend-server yarn start:dev
+```
+
+Note: you can pass `:<env>` next to `start` to use env config.
+
+- dev: to use `/config/development/dev.env`
+- stage: to use `/config/staging/staging.env`
+
+### Docker build and run
+
+Build three docker images by following the steps:
+
+- Frontend Server
+
+```
+lerna exec --scope=*frontend-server yarn docker:build
+lerna exec --scope=*frontend-server yarn docker:run
+```
+
+- Backend Server
+
+```
+lerna exec --scope=*backend-server yarn docker:build
+lerna exec --scope=*backend-server yarn docker:run
+```
+
+- moleculer-server
+
+```
+lerna exec --scope=*moleculer-server yarn docker:build
+lerna exec --scope=*moleculer-server yarn docker:run
+```
+
+Note: It uses `/config/staging/docker-staging.env` for environment variables.
+
+For mac users,
+
+```
+###
+### To connect from docker to localhost, if you are using a Mac host, you can use -
+#
+# HOSTNAME= docker.for.mac.host.internal
+# Or
+#
+# HOSTNAME = docker.for.mac.localhost
+###docker.for.mac.localhost
+
+NATS_URL=nats://docker.for.mac.localhost:4222/
+NATS_USER=test
+NATS_PW=test
+GRAPHQL_URL=http://docker.for.mac.localhost:8080/graphql
+LOCAL_GRAPHQL_URL=http://docker.for.mac.localhost:8080/graphql
+CLIENT_URL=http://localhost:3000
+WEBHOOK_URL=http://docker.for.mac.localhost:8080
+... rest of the environment
+```
+
+### Environment settings needed for non-development
+
+```
+GRAPHQL_URL
+CLIENT_URL
+NATS_URL
+NATS_USER
+NATS_PW
+```
+
+## Do's and Don't
+
+Check [here](./do-and-dont.md)
+
+## Installation Issues
+
+Check [here](./installation-issues.md)
+
+## FAQ
+
+Check [here](./faq.md)

package/lib/templates/content/docs/contributing/react/index.md

@@ -0,0 +1,14 @@
+---
+meta:
+    title: React
+    description: React
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: React...
+headers:
+    Cache-Control: no-cache
+---
+
+## React
+
+**[Lazy Component](/docs/contributing/react/lazy-component)**

package/lib/templates/content/docs/contributing/react/lazy-component.md

@@ -0,0 +1,70 @@
+---
+meta:
+    title: Lazy Component
+    description: Lazy Component
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Lazy Component...
+headers:
+    Cache-Control: no-cache
+---
+
+## Lazy Component
+
+```
+// SampleComponent
+
+import React, { Suspense } from 'react';
+import { Spinner } from '@chakra-ui/react';
+import { BsPerson } from '@react-icons/all-files/bs/BsPerson';
+import { GiHelp } from '@react-icons/all-files/gi/GiHelp';
+import { lazy } from '@loadable/component';
+
+const GlobalPreferencesLazy = lazy(() => import('./components/global-preferences'));
+const HostingToolsLazy = lazy(() => import('./components/hosting-tools'));
+
+const GlobalPreferences = () => (
+    <Suspense fallback={<Spinner />}>
+        <GlobalPreferencesLazy />
+    </Suspense>
+);
+
+const HostingTools = () => (
+    <Suspense fallback={<Spinner />}>
+        <HostingToolsLazy />
+    </Suspense>
+);
+
+
+export const accountPageStore: IPageStore[] | { [key: string]: any } = [
+        {
+        key: routeKeys.ACCOUNT_GLOBAL_PREFERENCES,
+        path: `${LAYOUT_PATH}${AccountRoutes.GlobalPreferences}`,
+        hideInMenu: true,
+        title: 'Global preferences',
+        icon: ConfigurationIcon,
+        authority: [IPreDefineAccountPermissions.secureUser],
+        description: 'See your default language, currency and timezone',
+        position: IMenuPosition.BOTTOM,
+        component: GlobalPreferences,
+        priority: 6,
+    },
+
+        {
+        key: routeKeys.ACCOUNT_HOSTING,
+        path: `${LAYOUT_PATH}${AccountRoutes.Hosting}`,
+        hideInMenu: true,
+        title: 'Professional hosting tools',
+        icon: PeopleIcon,
+        authority: [IPreDefineAccountPermissions.secureUser],
+        description: `Get professional tools if you manage several properties on ${config.APP_NAME}`,
+        position: IMenuPosition.BOTTOM,
+        component: HostingTools,
+        priority: 8,
+    },
+    ];
+
+const filteredRoutes: IRouteData[] = getFilteredRoutes(accountPageStore, selectedRoutes);
+
+export { filteredRoutes };
+```

package/lib/templates/content/docs/contributing/run-various-options.md

@@ -0,0 +1,124 @@
+---
+meta:
+    title: Run Various Options
+    description: Run Various Options
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Run Various Options...
+headers:
+    Cache-Control: no-cache
+---
+
+## SETUP and INSTALL
+
+### To Install the project and build all packages
+
+`yarn bootstrap`
+
+### To clean install the project of already installed.
+
+If you need to do a clean the existing node_modules and take latest changes from the remote head
+
+`yarn clean:install`
+
+## LINTING
+
+### To check linting
+
+`yarn lint <relative folder>`
+
+### To check and auto fix linting
+
+`yarn format <relative folder>`
+
+## PACKAGES COMMANDS
+
+### To run build all packages
+
+`yarn build`
+
+### To run all packages in watch mode
+
+`yarn watch`
+
+Note: It only run `packages` and `packages-modules` only in watch mode. Servers should be run separately.
+
+Also check out `yarn watch-packages` to run watch on required packages.
+
+### To run build with watch for dependent packages
+
+For auto reloading changes into the server to be productive during development.
+
+```
+yarn watch-packages
+```
+
+If you also need to watch along with it, you can as many scopes as required like below.
+
+```
+yarn watch-packages -- --scope="@sample-stack/counter-module*" --scope="@packageb"
+```
+
+## TO START SERVERS
+
+### To run an individual package in watch mode
+
+`lerna exec --scope="<package name>" yarn watch`
+
+More details on how to use [lerna exec](https://github.com/lerna/lerna/tree/master/commands/exec#options)
+
+To run any command on a package `<package_name>`
+
+`lerna exec --scope="<package_name>" <command>`
+
+### How to Start Backend and Frontend separately
+
+To start the frontend-server
+
+`lerna exec --scope="*frontend-server" yarn watch`
+
+To just start the backend-server
+
+`lerna exec --scope="*backend-server" yarn watch`
+
+### To run both Frontend and Backend Server
+
+`yarn start`
+
+### To run both Frontend and Backend Server but start frontend in SSR Mode
+
+`yarn start:envSSR`
+
+### To run Frontend with production build in development
+
+Build the package
+
+`lerna exec --scope="*frontend-server" yarn build`
+
+Start the server with `dev` environment file
+
+`lerna exec --scope="*frontend-server" yarn start:dev`
+
+Make sure backend is also running in separate terminal
+
+`lerna exec --scope="*backend-server" yarn watch`
+
+### Start Mobile application
+
+Before starting mobile expo, make sure to start the backend server of the web application first.
+
+`lerna exec --scope="*backend-server" yarn watch`
+
+And then start mobile expo application.
+
+`lerna exec --scope="*mobile-device" yarn watch`
+
+### Start Desktop application
+
+Before starting the desktop application, make sure to start the backend server of the web application first.
+
+`lerna exec --scope="*backend-server" yarn watch`
+
+And then start the desktop application.
+
+`lerna exec --scope="*desktop" yarn watch`

package/lib/templates/content/docs/contributing/schema-first-graphql-types.md

@@ -0,0 +1,37 @@
+---
+meta:
+    title: Schema First Graphql Types
+    description: Schema First Graphql Types
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Schema First Graphql Types...
+headers:
+    Cache-Control: no-cache
+---
+
+## Schema First Graphql Types
+
+We use [GraphQL Code Generator](https://github.com/dotansimha/graphql-code-generator) to generate `types`.
+
+The `graphql` schema is designed first and placed in the `server` side package.
+
+![graphl-folder-backend](/assets/images/graphql/graphql-folder-backend.png)
+
+We don't place any built-in `query or mutation or subscription` within the Component. Instead we add the `queries` or `mutations` or `subscriptions` under `graphql` folder in the clien package (either on `browser` or `client` package). These will have `.gql` extension.
+
+![graphql-folder-with-gql](/assets/images/graphql/graphql-folder-with-gql.png)
+
+The generated Wrapper component will be used in the component. The generated files can be determined by looking into `codegen.yaml` file which is at the `root` of the project.
+
+## To update to exising Graphql Schema follow the steps.
+
+1. Update the Graphql Schema first with required methods.
+
+2. Generate Graphql Types by running `npm run genreateGraphql`
+
+3. The generated code usually added to `<@sample-stack>/core` package and this package should be imported to use it. In order to auto build when the files changes in the package, make sure `watch` is run on that package.
+
+4. Write `resolvers` for the `Mutations | Query | Subscription` that are defined in the graphql schema.
+
+The following video shows in-action
+https://youtu.be/F1UZdcpjx3w

package/lib/templates/content/docs/contributing/source-code-organization.md

@@ -0,0 +1,57 @@
+---
+meta:
+    title: Source Code Organization
+    description: Source Code Organization
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Source Code Organization...
+headers:
+    Cache-Control: no-cache
+---
+
+## Source Code Organization
+
+Fullstack code consists of a layered and modular
+
+# Layers
+
+- `packages`: The base packages required for project.
+- `packages-modules`: The entry point to core application based feature. An extended features to the `packages`.
+    - It may have dependencies of `packages`
+    - It wont' have any dependency of any of other modules within `packages-modules` except if it is a `core` package.
+- `servers`: The entry point to server app for remote development.
+    - It has dependencies of `packages-modules`'s packages and/or `packages`
+- `portable-devices`: The entry point to native apps like mobile and deskop.
+    - It has dependencies of `packages-modules`'s packages and/or `packages`.
+
+![source-code-organization](/assets/images/source-code/source-code-organization.png)
+
+# Target Environments
+
+The `module` is partitioned into the following sub packages:
+
+- `platform`: Defines service injection support and the base services for the Project that are shared accross layers
+- `core`: Source code that only requires basic JavaScript APIs and run in all the other target environments
+- `clent`: Source code that only requires basic Client APIs such as `redux`, `redux-epic`, `apollo-client`, `hooks` without requiring Web APIs like `react`, `dom` etc.
+- `browser`: Source code that requires [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API), eg. DOM, React
+    - may have dependencies on: `core`, `client`
+- `server`: Source code that requires [Node.JS](https://nodejs.org) APIs
+    - may have dependencies on: `core`
+- `mobile`: Source code the requires [React Native](https://reactnative.dev/)
+- `electron`: Source code that requires the [Electron renderer-process](https://github.com/atom/electron/tree/master/docs#modules-for-the-renderer-process-web-page) APIs
+    - may have dependencies on: `core`, `browser`, `client`
+- `electron-main`: Source code that requires the [Electron main-process](https://github.com/atom/electron/tree/master/docs#modules-for-the-main-process) APIs
+    - may have dependencies on: `core`, `node`
+- `browser-extension`: Source code that requires the [Chrome Extension](https://developer.chrome.com/docs/extensions/)
+- `extension`: Source code of extension
+
+You can add additional `target environments` based on the specific third party library
+
+- `ant-ui`: Source code that requires the [antd components](https://ant.design/components/overview/)
+- `chakra-ui`: Source code that requires the [Chakra-UI components](https://chakra-ui.com/docs/components)
+
+![source-code-organization](/assets/images/source-code/source-code-environments.png)
+
+# Build and Run
+
+We use [lerna](./lerna-build-tools.md) to compile the packages. Read more about it as it is needed to run the project.

package/lib/templates/content/docs/contributing/staging-docker.md

@@ -0,0 +1,88 @@
+---
+meta:
+    title: Docker Build and Running Frontend Server
+    description: Docker Build and Running Frontend Server
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Docker Build and Running Frontend Server...
+headers:
+    Cache-Control: no-cache
+---
+
+# Technical Documentation: Docker Build and Running Frontend Server
+
+This document provides instructions on how to build and run a frontend server in Docker. Ensure Docker is installed on your system before proceeding.
+
+## Prerequisites
+
+- Docker installed on your system. You can follow the instructions on the official Docker website to install Docker: [Docker Installation Guide](https://docs.docker.com/get-docker/).
+
+## Setting Up Staging Environment
+
+1. **Create and configure the staging environment file:**
+
+    Create a file named `docker-staging.env` in the `config/staging/` directory and set the environment variables as shown below:
+
+    ```env
+    #
+    # HOSTNAME = docker.for.mac.localhost
+    ###docker.for.mac.localhost
+
+    NATS_USER=test
+    NATS_PW=test
+    NATS_URL=nats://docker.for.mac.localhost:4222/
+    GRAPHQL_URL=http://docker.for.mac.localhost:8080/graphql
+    LOCAL_GRAPHQL_URL=http://docker.for.mac.localhost:8080/graphql
+    MONGO_URL=mongodb://docker.for.mac.localhost:27017/sample-stack
+    REDIS_CLUSTER_URL='[{"port":6379,"host":"docker.for.mac.localhost"}]'
+    REDIS_URL=redis://docker.for.mac.localhost:6379
+    BACKEND_URL=http://docker.for.mac.localhost:8080
+    CLIENT_URL=http://localhost:3000
+    ZIPKIN_URL=test
+    ZIPKIN_PORT=test
+    LOG_LEVEL=trace
+    REDIS_CLUSTER_ENABLED=false
+    REDIS_SENTINEL_ENABLED=false
+    BACKEND_URL=http://localhost:8080
+    CONNECTION_ID=v1
+    LOCAL_BACKEND_URL=http://localhost:3000
+    ... add remaining env variables, make sure don't override above ones.
+    ```
+
+2. **Ensure all necessary services are available at the specified URLs in the `docker-staging.env` file.**
+
+## Branch Management
+
+- **Switch to the `devpublish*` branch:**
+
+    If you are working on the `develop7` branch, the corresponding publish branch will be `devpublish7`. Switch to the appropriate `devpublish*` branch.
+
+    ```bash
+    git checkout devpublish7
+    ```
+
+- **Note:** The `devpublish*` branch should be read-only. Any changes that need to be tested should be made in the corresponding `develop*` branch. If new packages need to be released, please request the admin to publish the packages.
+
+## Building and Running the Frontend Server in Docker
+
+1. **Build the Docker image and run the frontend server:**
+
+    Open a terminal and navigate to the root directory of your project.
+
+2. **Execute the following command:**
+
+    ```bash
+    lerna exec --scope="*frontend-server" yarn docker:build && lerna exec --scope="*frontend-server" yarn docker:run
+    ```
+
+This command will:
+
+- Build the Docker image for the frontend server.
+- Run the Docker container for the frontend server.
+
+## Additional Notes
+
+- Ensure that all dependent services (e.g., NATS, MongoDB, Redis) are running and accessible at the specified URLs in the environment file.
+- The `CLIENT_URL` and `BACKEND_URL` values should be correctly set to match your local setup or desired staging environment.
+
+By following these steps, you should be able to successfully build and run the frontend server in Docker using the provided environment configuration.

package/lib/templates/content/docs/contributing/third-party/apollo-client-v3-tutorials.md

@@ -0,0 +1,28 @@
+---
+meta:
+    title: ApolloClient(v3) tutorials
+    description: ApolloClient(v3) tutorials
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: ApolloClient(v3) tutorials...
+headers:
+    Cache-Control: no-cache
+---
+
+## ApolloClient(v3) tutorials
+
+Best pratices to use Apollo State management.
+
+![Best Practice](/assets/images/apollo-client/recommendation_cache_mgmt.png)
+
+https://www.youtube.com/watch?v=xASrlg9rmR4&t=963s
+
+To use Policies as replacement of redux selectors
+
+https://www.nerdwallet.com/blog/engineering/redux-to-apollo-data-access-patterns/
+
+To use Reactive Variables and Policies
+
+https://www.apollographql.com/blog/apollo-client/caching/local-state-management-with-reactive-variables/
+
+https://www.youtube.com/watch?v=C53-rtNNg4k&t=97s

package/lib/templates/content/docs/contributing/third-party/index.md

@@ -0,0 +1,18 @@
+---
+meta:
+    title: Knowledge Resources
+    description: Knowledge Resources
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Knowledge Resources...
+headers:
+    Cache-Control: no-cache
+---
+
+## Knowledge Resources
+
+**[ApolloClient(v3) tutorials](/docs/contributing/third-party/apollo-client-v3-tutorials)**
+
+### Server Side Rendering and pre generated html
+
+https://blog.logrocket.com/react-hydration-pre-rendered-html/

package/lib/templates/content/docs/contributing/typescript-contribution.md

@@ -0,0 +1,16 @@
+---
+meta:
+    title: Typescript Contribution
+    description: Typescript Contribution
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Typescript Contribution...
+headers:
+    Cache-Control: no-cache
+---
+
+## Typescript Contribution
+
+React Typescript Code styles should be followed based on best practices
+
+https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example