Kleeen’s authoring tool exports follow standard practices to manage repository, project, and code, making it easy for long-term maintenance and support away from our authoring tool.
Every project exported to GitHub will follow a monorepo structure; the repository will contain multiple projects and libraries.
We use an Nx build framework to architect the monorepo, with broad support across the dev community, great IDE integration, and extensive documentation.
Here’s where to find more about Nx and React https://nx.dev/react.
We have built the API project on top of the Apollo platform, which utilizes the open-source GraphQL client and server at its core. So anyone working with GraphQL will need a platform. If you want to find out more about Apollo, you can do it here: https://www.apollographql.com/.
Working on the Cloud project should be welcoming as all code generated is well organized. All modern web application development has to do with state management, for which our exported projects use React-Redux, which is maintained directly by the Redux team.
“A monorepo is a single git repository that holds the source code for multiple applications and libraries, along with the tooling for them.” - Nrwl
Here are some of the benefits of using monorepo infrastructure (we can extract some of the benefits) https://nx.dev/latest/react/core-concepts/why-monorepos#monorepos
General Folder Structure
The folder and file structure are standard, given by the Nrwl (Narwhal) monorepo implementation better known as Nrwl in the npm registry.
│ ├── api
│ │ └── src
│ │ ├── graphql
│ │ ├── custom
│ │ └── generated
│ ├── cloud
│ │ └── src
│ │ ├── app
│ │ │ ├── modules
│ │ │ │ ├── custom
│ │ │ │ │ └── profile
│ │ │ │ └── generated
│ │ │ │ └── profile
│ │ ├── assets
│ │ ├── icon-registry
│ │ │ ├── custom
│ │ │ └── generated
│ │ └── icons
How to extend the functionality?
The following folders have a pattern where we include a “generated” and a “custom” folder where the first one is where Kleeen put all the configuration files for your product to work well and the other one is where you can extend the functionality using a similar data structure of the generated. We recommend avoiding modifying the “generated” folder because it is constantly changing with every Export of your code.
/apps/api/src/graphql: Contains the GraphQL API configuration for the product. Here you will encounter resolvers for “Things” and “Widgets” where you can hook up your backend and stop using the fake data (we can reference the piece of doc where hook up a backend).
/apps/cloud/src/app/modules: Contains all the content of the application, here you can expect to find folders that match the names of the workflows you create. At the first level, you will find “Collection” or “Entire Product Domain” workflows. Inside the “profile” folder you will encounter the “Single” workflows.
/apps/cloud/src/app/assets: Contains general styles generated by Kleeen which include a palette of colors for the product based on the color you select, also an icon registry where you can put custom icons if you want to override the existing ones.
/libs/react/state-management: The KS implementation of redux is based on Ducks which is a modular pattern that collocates actions, action types, and reducers. Everything related to the redux state management is located in libs\react\state-management, there are the Generated and Custom folders. The developers could add the custom code to handle the redux state for their needs inside of the Custom folder, following the file structure of the generated ones.
Epics, model, and slice files will be found there and every file should be exported from the index of the folder and that folder index from the custom module as it is in the image below for the endUser, endUserPreferences, and notifications
In order to export it and use it across the application, Kleeen provides the hooks of useKleeenActions to import the state actions and useKleeenContext to import the current state of the application, both are provided from @kleeen/react/hooks.
Usage of Kleeen state management hooks
The name of the slice to use must be the same declared in the slice. For example “ksNotifications”.
Note: Anything modified inside of the Generated folder will be overwritten on a GitHub export or launch prototype, so be sure to include every implementation needed inside of the Custom folder.
If you have any questions about this, please contact firstname.lastname@example.org and we will be happy to answer them for you.