React InterApp Routing

This package facilitates routing between microApps built with React. GenesisX InterApp Proxy is a powerful implementation by GenesisX that allows multiple apps to be served from a single host server on a local development machine.

Usage

To create React InterApp routing, you can follow the steps outlined below:

Pre-requisites

Make sure you are on correct version of Nodejs 18.x and Nx Version 16.6
```
node --version
nx --version
```

To integrate this package into your application, please follow the steps below.

To start with, create a new GenesisX workspace in an empty directory, run below command, of if you already have the workspace ready , please skip this step.
```
npx @genesisx/create-workspace
```
- Provide the requested parameters
- Provide name to your workspace like test-workspace
- Move to the created workspace - cd test-workspace
- Install the packages
```
yarn install
```

Install React InterApp Routing package

yarn add @genesisx/react-interapp-routing

Via Nx Console

Generate app using Nx Console

Goto Generate > Search for @genesisx/react-interapp-routing - proxy-server
Fill in the form
- portNo: Port number the app should be served on

Via Command Line

Run this command

nx generate @genesisx/react-interapp-routing:proxy-server --portNo=<port>

For the first time, the command will create the <wsp-root>/gen-proxy.conf.json

Please follow these steps to configure the proxy server and then proceed to run it again.

Purpose

This generator serves the following purpose-

Facilitating navigation between multiple micro-applications within a project, without relying on external server solutions, all from a single localhost port.
Resolving asset-serving issues that may arise when using the Nx proxy.config.json solution.
Enabling seamless navigation between different micro-applications on the same local port.

MicroApps Configurations

Assuming that you have created two React applications.

react-app1 , running on port 13004
react-app2 , running on port 13006
Ensure that all React applications are properly configured with their respective target URLs

{
  "apps": [
    "react-app1",
    "react-app2"
  ],
  "mainApps": {
    "/home": {
      "target": "http://localhost:13004",
      "secure": false
    },
    "/product": {
      "target": "http://localhost:13006",
      "secure": false
    }
  }
}

The apps should be already running (nx serve)

Please start the proxy server by executing the following command:

nx generate @genesisx/react-interapp-routing:proxy-server --portNo=<port>

Configuring Kubernetes Routing for Production Environments

The production interApp routing is established via the Kubernetes Ingress template file in the following manner:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
name: <appName>
spec:
tls:
- hosts:
- <site.com>
secretName: genesis-tls
rules:
- host: <site.com>
http:
paths:
- path: /<appPath>
backend:
serviceName: spark-web-account
servicePort: 80

To learn more about generating the GenesisX Kubernetes configuration, kindly refer to the section dedicated to Kubernetes and Docker Config in the documentation.

More details & Troubleshooting

Visit the troubleshooting guide for common issues or refer to the readme.md file located within the package folder <workspace-folder>/node_modules/@genesisx/react-interapp-routing/README.md

Usage​

Pre-requisites​

Via Nx Console​

Via Command Line​

Purpose​

MicroApps Configurations​

Configuring Kubernetes Routing for Production Environments​

More details & Troubleshooting​