> For the complete documentation index, see [llms.txt](https://cloudpremise.gitbook.io/reactforce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cloudpremise.gitbook.io/reactforce/enterprise-portal-quick-start.md).
# Enterprise Portal - Quick Start
Over the last few months, we have been working on something very exciting and we are finally getting there. It uses the features of [ReactJs](https://react.dev/), [Reactforce](https://cloudpremise.gitbook.io/reactforce) and [Salesforce](https://salesforce.com).
## Introduction
Enterprise portal uses MonoRepo architecture to build multiple react apps.
## **Prerequisites**
This guide assumes you Nodejs and SFDX CLI installed.
## Setup a Developer Environment
```
# Install via NPM
sfdx plugins install @cloudpremise/reactforce@latest
# Accept the plugin
This plugin is not digitally signed and its authenticity cannot be verified. Continue installation (y/N)
y
...
...
...
Installing plugin @cloudpremise/reactforce... installed v0.0.81
```
### Common CLI Flags
| Flag | Short | Type | Default | Description |
| ----------------- | :---: | ----------------- | ----------------------------------- | ----------------------------------------------------------------------------- |
| `--app-name` | `-a` | string (required) | — | Name of the app to create. Use letters, numbers, and hyphens; max \~30 chars. |
| `--template-name` | `-t` | string | `default` | Template folder/name inside the templates repo to use when scaffolding. |
| `--repository` | `-r` | string | `cloudpremise/reactforce-templates` | GitHub repo (`owner/name`) containing Reactforce templates. |
| `--branch` | `-b` | string | `main` | Branch in the templates repo to clone. |
| `--ssh` | `-S` | boolean | `false` | Clone the template repo via SSH instead of HTTPS. |
## Build Your Application Scaffolding
We are currently not ready with application scaffolding but once we have stable version of it, we'll scaffold it for new projects.
## Iris Project Setup
Use below command to create new Iris project.
sf hermes iris project create --name irisProject -t irisprototype -r olympus-616/iris-template -b brain/1.3.x.x --ssh
--name is name of the project.
-t is the child app name inside reactforce folder.
-r is name of the repository.
-b is branch of the repository.
--ssh is ssh flag.
Install additional plugins you need using below commands. Run these commands from root
of the iris app inside reactforce folder.
sf reactforce plugin install --name olympus-616/iris_auth -b brain/1.3.x.x --ssh
sf reactforce plugin install --name olympus-616/iris_servicedesk -b brain/1.3.x.x --ssh
Use below command to create new iris child app. Run this command from root of the iris project.
```
sf hermes iris app create --app-name testIrisApp -t irisprototype -r olympus-616/iris-template -b brain/1.3.x.x --ssh
--app-name is name of the child app.
-t is the child app name inside reactforce folder.
-r is name of the repository.
-b is branch of the repository.
--ssh is ssh flag.
```
## Develop Your Plugin
A plugin requires two main files `package.json` which contains basic information about the plugin and `index.tsx` contains plugin definition.
An example how `package.json` should look like.
```
{
"name": "@olympus_grid/iris_all",
"version": "1.0.0",
"description": "CloudPremise bpm plugin to manage projects and tasks for salesforce",
"main": "index.tsx",
"type": "module",
"author": "CloudPremise",
"license": "ISC",
"status": true
}
```
An example how `index.tsx` should look like.
```
import { CloudPremisePlugin } from "@olympus_grid/iris_core";
import { routes, menus, userMenus, footerMenus, settingMenus } from "./src";
import packageJson from "./package.json";
class Example extends CloudPremisePlugin {};
const ExamplePlugin = new Example ({
name: packageJson.name,
description: packageJson.description,
status: packageJson.status,
routes: routes,
menus: menus,
userMenus: userMenus,
footerMenus: footerMenus,
settingMenus: settingMenus,
render: () => {
return null
}
});
export default ExamplePlugin;
```
From above `index.tsx` code you can see it provides basic information about plugin, routes, different types of menus and a render method which directly gets invoked into the application tree. It can be used to add application level styles, libraries, fonts etc.
Here is what `index.tsx` in plugin's `src` folder. It currently exports just the information from config folder which connects whole plugin with the application through menus and routes.
```
export * from "./config";
```
Please use below directory structure for new plugin development.
Plugin Directory Structure
You can use below commands to generate, install, remove, enable and disable different plugins. You have to run most of these commands from root of your react app.
```
# Install cli via NPM if you don't already have installed.
sfdx plugins install @cloudpremise/reactforce@latest
# Use this command to generate new plugin. Follow naming conventions carefully.
sf reactforce plugin generate --name olympus_grid/iris_example
# Use this command if you ever want to remove/delete any or your plugin.
sf reactforce plugin remove --name olympus_grid/iris_example
```
Once you have your plugin generated, you can start the development and publish to github repository. Anyone having access to your repository can install your plugin in any **Enterprise Portal** project.
```
# Use following command to install any plugin
sf reactforce plugin install --name olympus_grid/iris_example
# Use this command to replace/update current version of your plugin. Please any of your changes will be lost.
sf reactforce plugin install --name olympus_grid/iris_example --replace
```
If plugin is already installed in your project, you can use following commands to enable/disable any of the plugins.
```
# Use this command to enable any disabled plugin
sf reactforce plugin status --name olympus_grid/iris_example --enable
# Use this command to disable any enabled plugin
sf reactforce plugin status --name olympus_grid/iris_example --disable
```
## Build Your App
Our architecture uses npm workspaces to share npm modules across different react apps. All of the react apps reside in `reactforce` folder.
```
# Use this app to start react app if shorthand command is not added into your package.json's scripts directive.
npm run start -w reactforce/portal
# In above command -w argument is path to your react app.
# Use this command if shorthand command is added.
npm run portal
# Use this command to react build react app or add it has shorthand command in package.json's scripts directive.
npm run build -w reactforce/portal
```
## Deploy Your App
Once you have your build ready, copy it into static resources directory and deploy it to your org.