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, Reactforce and Salesforce.

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.

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.