https://github.com/sackrin/react-micro-ui-lambda-example
A simple example AWS Lambda micro frontend project using material UI, storybook and cypress.
https://github.com/sackrin/react-micro-ui-lambda-example
Last synced: over 1 year ago
JSON representation
A simple example AWS Lambda micro frontend project using material UI, storybook and cypress.
- Host: GitHub
- URL: https://github.com/sackrin/react-micro-ui-lambda-example
- Owner: sackrin
- Created: 2020-04-06T23:26:12.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-12T12:19:42.000Z (over 5 years ago)
- Last Synced: 2025-01-21T13:23:30.746Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 840 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Micro Frontend Registration Form
This project contains a lambda driven micro frontend example using the context of a simple user registration form. The components are displayed within storybook and cypress is used to conduct functional browser testing.
### Local Setup
In order to run this project locally you will need to clone down this repository and run ```npm i```
### Using Locally
- to run locally ```npx nps local```
- to run code standards ```npx nps standards``` after running previous step
- to build for deployment ```npx nps build```
- to run functional test suite ```npx cypress open```
### Deployment
To deploy this project to AWS please follow the instructions within the following documentation
https://sackrin.github.io/react-micro-ui-lambda/
## Embedding via raw HTML and JS
Micro frontend components can be embedded within a simple HTML document. The snippet below demonstrates how to embed the ProfileRegister component
```
// @param n = UMD library name ie soarExampleMicroUI
// @param c = component name ie Foo
// @param p = props to be passed to mounted component
(function(n, c, p) {
var w = window, m = function(e){ if (e.detail.name === n)
w[n].Render(document.querySelector(`div[data-microui-component="${c}"]`),c,p); };
if (w[n]) { m(); } else { w.addEventListener('microUILoaded', m); }
})('exampleProfileMicroFrontend', 'ProfileRegister', {});
```
## Embedding via React Micro UI Hooks
To help embedding micro frontend applications the react-micro-ui-hooks library provides hooks and components to access individual micro frontend components. To install within your macro frontend run the following npm command.
```npm i --save @sackrin/react-micro-ui-hooks```
### Progress Bar Component
The following react snippet can be used to embed the progress bar component within a macro frontend
```
import React, { useCallback, useState } from 'react';
import { MicroUIComponent } from '@sackrin/react-micro-ui-hooks/lib/Components';
const ProfileProgress = () => (
);
export default ProfileProgress;
```
### Register Form Component
The following react snippet can be used to embed the register form component within a macro frontend
```
import React, { useCallback, useState } from 'react';
import { MicroUIComponent } from '@sackrin/react-micro-ui-hooks/lib/Components';
const ProfileRegister = ({ onStages, onRegister }) => (
);
export default ProfileRegister;
```
## Embedding via Server Side Rendering
Micro frontend components can be embedded into server rendered applications (ie PHP or nodeJS) to improve SEO and accessibility. Components will be returned as static HTML along with JS to load in bootstrap.js and hydrate the component after page load with any client-side functionality. There is no need for the macro frontend to include bootstrap or any other dependencies for components to be successfully rendered.
It is safe to import multiple SSR components within a single page at one time as assets such as bootstrap.js will only be detected and loaded only once.
### Embedding via GET request
To embed using a GET request add the component name to the end of the micro frontend URL and add your props as GET variables
```GET http://localhost:9000/ProfileRegister```
### Embedding via POST request
To embed using a POST request add the component name to the end of the micro frontend URL and provide your props within the request body as raw JSON
```POST http://localhost:9000/ProfileRegister```