Managing assets

FrontHub is prepared to serve different files for all environments in which a Micro Frontend can be executed, that is, when published in production or development environments, locally, or through Fake Repository.

However, for these assets to be properly loaded, it is necessary to configure and correctly use some FrontHub resources.

Configuring the public path for your assets

Once published, the assets need to be correctly referenced by Micro Frontend, otherwise the images, fonts, videos or any other type of file will not be loaded.

For this it is necessary to properly configure the publicPath property in the front-hub.config.js file. This property is responsible for building the public path where the assets are hosted.

The publicPath property expects a function that returns this public path, and that receives an object with the following attributes:

• repository: Base URL where assets are hosted, this value is defined by FrontHub configuration in Application Host
• name: The Micro Frontend name
• version: The Micro Frontend version

info

The publicPath property has the following default value:

front-hub.config.js

module.exports = {
  publicPath: ({ repository, name, version }) =>
    `${repository}/assets/${name}/${version}/`,
}

If your asset hosting infrastructure provides a public path equal to the default, which is recommended, you don't need to include this property in the front-hub.config.js file.

Adding assets in yout Micro Frontend

A Micro Frontend created by FrontHub CLI is a CRA application under the hood. You must add your assets along with your component code, importing them into JavaScript as if they were a conventional package.

src/Logo.js

import logo from './logo.png' // src/logo.png
import { Image } from '@resultadosdigitais/front-hub/react'

const Logo = () => {
  return <Image alt="My company logo" src={logo} />
}

export default Logo

The build will be responsible for processing these files, generating the final files with the appropriate optimizations.

caution

Avoid include files in public folder of your Micro Frontend.

And, mainly, don't use the App Host hosted assets path in your Micro Frontends.

Using assets in your Micro Frontend

Use the usePath hook to get the path of a file independent of the execution environment:

import Report from './report.pdf'
import ReportCover from './report-cover.png'
import { usePath } from '@resultadosdigitais/front-hub/react'

const App = () => {
  const path = usePath()

  return (
    <a href={path(MyImage)} download>
      <img src={path(MyImage)} alt="Report" />
    </a>
  )
}

The files will load properly either with the Micro Frontend published, running locally or running through the Fake Repository.

For images, you can also choose to use the Image component provided by FrontHub:

import MyImage from './my-image.png'
import { Image } from '@resultadosdigitais/front-hub/react'

const App = () => {
  return <Image alt="Some image" src={MyImage} />
}

For SVG images, it is recommended not to use the img tag, you can use them as conventional React components.

import { ReactComponent as LogoImage } from './logo.svg'

const Logo = () => {
  return <LogoImage />
}

The ReactComponent import name is significant and tells the Micro Frontend that you want a React component that renders an SVG, rather than its filename.

caution

When testing components that depend on the usePath hook or the Image component use the withMock, instanceMock or renderWithFrontHub support functions to ensure that basic FrontHub context information is present for these two resources, otherwise they won't work properly.

Visit the Testing section for more information on these support functions.