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

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.

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": "@cloudpremise/plugin-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 "@cloudpremise/plugin-example";
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 cloudpremise/plugin-example


# Use this command if you ever want to remove/delete any or your plugin.
sf reactforce plugin remove --name cloudpremise/plugin-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 cloudpremise/plugin-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 cloudpremise/plugin-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 cloudpremise/plugin-example --enable

# Use this command to disable any enabled plugin
sf reactforce plugin status --name cloudpremise/plugin-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.