Irrelon AppWorks Component Server

This project's goal is to allow disparate UI components and layouts of components to be server and client-rendered into host pages. The SDK provides a common shared and namespaced state so that components can react to state changes between components, and an event listener to listen for events from other components.

Quick Start

npm install
npm run dev

Render a Component

http://localhost:3011/api/v1/components/Tabs/1.0.0/bundle?createTargetElement=true&clean=false

Render a Layout of Components

http://localhost:3011/api/v1/layouts/Example1/1.0.0/bundle?createTargetElement=true&clean=false

How it Works

HTML Generation

The system uses ReactDOM to render components to HTML.

JS / Hydration Code Generation

Webpack is used inside the utils/generateBootstrapFile.ts to generate the hydration code for all components / layouts.

CSS

Each component can describe a bundle of assets it requires. CSS is bundled with the HTML as required.

Modifying the API

API is using Express.

There are two key files:

1. server/routes.ts - This references the implementation of all the routes. Routes are express route functions.
2. server/common/api.yaml - This file contains the OpenAPI spec. Routes go through the spec in order to function so if you make a change to a route, you must update the spec otherwise it will fail to function correctly.

Next Steps

• Add support for loading data via getStaticProps (now called "props") when exported from a component file.
• Add support for page routes using the new app/routes.ts file
• Support running the server with a routes config so custom applications can use the server properly
• Define a logic process of functions so we can rationalise the rendering a bit
  • Request for component / layout
    • Check component exists
    • Get component
      • Figure out which query params belong to the component and pass them in as props
      • Check if getServerSideProps exists
        • Call getServerSideProps with the request object (with the query params easily accessible) and expect it to return data async
        • Spread the props returned with the layout's props?
    • Render the component based on the layout and the props we calculated

Notes

Scaffold Generator

I used a generator app to scaffold the project: https://github.com/cdimascio/generator-express-no-stress-typescript