Skip to main content

How it works

Although FrontHub does a lot of things under the hood, let's show you how simple it is.

Let's begin where it all starts: the end user. When the user types an address in a browser, for example, http://example.com/dashboard:

FrontHub Application Host

The browser will make a request for your application, as usual, we will call it the Application Host, you can use your preferred language like Node.js, Go, Ruby, Python, Java, PHP, etc.

The Application Host will delivery an HTML like this

dashboard.html
<html>
  <body>
    <h1>Hello World</h1>
    <div id="element1"></div>
    <div id="element2"></div>

    <script src="https://front-hub.rdstation.com.br/assets/front-hub/1.0.1/require@1.0.1.js"></script>
    <script type="text/javascript">
      fronthub('requireMicrofrontend', 'app1', function (hub) {
        hub.renderAt(document.getElementById('element1'))
      })

      fronthub('requireMicrofrontend', 'app2', function (hub) {
        hub.renderAt(document.getElementById('element2'))
      })
    </script>
  </body>
</html>

It is also the responsibility of the application host to give enough context data to the micro frontends be able to do its works. We teach you how to do that in the documentation - If you want to see it in action look at RDStation Marketing Source Code.

If you are familiar with React, the FrontHub hub.renderAt() is very similar to React's ReactDOM.render(), it will render the microfontends that we called app1 and app2. Click here to know more about requireMicrofrontend command and the function hub.renderAt.

note

You may have one app for the entire page, or split your page into micro frontends as shown here

The app1 and app2 are two totally independent micro frontends that will make up part of the page:

FrontHub Application Host

To create one of these applications use the following CLI command:

front-hub init app1
front-hub init app2

It will generate a project ready, you can use the yarn start command to start the development server.

In your app you will make your Hello World very similar to how you would do in your React project:

import React from 'react'
import { Connect } from '@resultadosdigitais/front-hub/react'

export default Connect(() => <h1>Hello from React</h1>)
tip

Do not forget to decorate your root component with FrontHub HOC Connect(). Exporting is only necessary if you are planning to make your spa accessible to be imported by another micro frontend.

The rest of your application is pure a React as you are used to.