portal_client_ticketing_module

Portal Client React Module Template

Ticketing Module

Customer Ticketing module to be included in Console Connect as a Webpack federated module.

Quick start

Developing locally

Running the react application locally, and running it in a local copy of Console Connect.

Run the module locally

npm install
npm run start

Then visit http://localhost:3003

(note: your port is defined in your .env file.)

This is your stand-alone react application.

Setup Console Connect

Setup a local copy of the Console Connect application (portal-client-desktop)[https://github.com/ConsoleConnect/portal-client-desktop].

Enable access to the module in Console Connect

The modules can now be defined inside .env file for each environment. Make sure you are using the name of your module defined in the package.json file (e.g portal_client_react_module). The new module development will require the following configuration:

1. Add a module definition inside .env.local file as follows, values to be separated by commas

CONSOLE_MODULES="portal_client_ticketing_module@http://localhost:3003/remoteEntry.js"

Running your module in a local copy of Console Connect

We've added a utility function in console connect which allows you to easily lazy load your component in the console connect app.

import { lazyLoadFederatedModule } from 'client/utils/moduleLoader';

const MyModule = lazyLoadFederatedModule('portal_client_react_module');

A second argument to this function is the scope, which defaults to ./App. If you want to import an individual component you've exposed from the module, add the location you've defined in your module's webpack config.

const MyModule = lazyLoadFederatedModule('portal_client_react_module', './MyComponent);

You'll need to pass a baseUrl to the module so it can route properly. You'll want your baseUrl to match the route you are using to load your module.

const MyModuleComponent = () => {
  <MyModule baseUrl="application/route/to/module" />
}

Include the new module component in your route

<Route path="application/route/to/module" component={MyModuleComponent} />

or component as a part of any react component.

<div>
  <MyComponent />
</div>

Run Console Connect

Follow the instructions from the Console Connect application for running a local development server, and your module should be visible at the route or in the component where you defined it.

DevOps experience

Documenting the different micro front end stories

Ops tools

• frontend-proxy: an nginx container able to inject environment variables at runtime inside webpack builds
  • so that one build can be used in all envs, with no server-side. We're only serving static assets (JS, CSS, etc... builds)

frontend-proxy

(see README)[https://github.com/ConsoleConnect/frontend_proxy]

Folder Structure

├── config
│   ├── jest
│   └── webpack
├── public
│   └── assets
├── scripts - Scripts used on the command line
└── src
    ├── components - Any non-page-level component
    ├── contexts - React contexts that the application uses to inject resources into components
    ├── hooks - Hooks that are used by more than one component
    ├── pages - page-level components
    ├── routes - all public and private route declarations
    ├── services - Functions used to perform tasks and retrieve information
    ├── shared - Components and functions that the module exports for other modules and the main application to use
    ├── styles - Module-wide scss defintions
    ├── test - Functions, contants and other helper code used by automated tests
    ├── types - Type definitions that don't belong to any one component or module
    ├── utils - Common code used by any or all code in the module
    └── view - Presentational components

testing again one more time