https://github.com/marconi1992/ara-spa-react

Implementing Ara Framework in a React SPA
https://github.com/marconi1992/ara-spa-react

ara-framework microfrontends react spa

Last synced: about 1 month ago
JSON representation

Implementing Ara Framework in a React SPA

• Host: GitHub
• URL: https://github.com/marconi1992/ara-spa-react
• Owner: marconi1992
• Created: 2019-11-28T14:26:29.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:21:45.000Z (about 2 years ago)
• Last Synced: 2023-05-06T00:33:59.022Z (almost 2 years ago)
• Topics: ara-framework, microfrontends, react, spa
• Language: JavaScript
• Homepage:
• Size: 2.24 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 43
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ara Framework - Reat SPA example

## Nova React

The folder `nova` contains a nova generated with [Ara CLI](https://github.com/ara-framework/ara-cli) configured with no SSR.

Run webpack dev server:

```

yarn dev

```

The `client.js` can be consumed on http://localhost:8081/client.js

## Host application

The host application is a SPA created using [create-react-spa](https://github.com/facebook/create-react-app) with a basic setup using [nova-react-bridge](https://github.com/ara-framework/nova-react-bridge).

You can integrate the Novas (Microfrontends) modifying the `views.json` file. It contains the name of the view and the client-side entry point responsible to render it.

```json

{

  "Example": "http://localhost:8081/client.js"

}

```

Run React SPA:

```

yarn start

```

##  How does it work?

It's simple, when the `Nova` component is rendered in a route it renders a placeholder and emits a `NovaMount` event.

```jsx

    

        

    

    

        

    

```

Then, the host application on `index.js` handle that event loading the Nova entrypoint responsible of rendering the `Example` view.

```js

import entryPoints from './views.json';

document.addEventListener('NovaMount', ({ detail }) => {

  const { name } = detail;

  const script = entryPoints[name];

  if (script) {

    loadScript(script);

  }

});

```

Finally, when the Nova entrypoint is excuted it mounts the view on the placeholder.

Read more [here](https://ara-framework.github.io/website/docs/nova-bridge)