FrontHub

https://front-hub.rdstation.com.br/docs
Admin
FrontHub is a framework for building and maintaining micro-frontends with zero configuration,...
Tokens:55,987
Snippets:557
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start the development server

Source: https://front-hub.rdstation.com.br/docs/creating-from-scratch

Navigate to the main package directory and start the application development server.

```bash
 cd my-first-project/packages/main  
 yarn start  
```

--------------------------------

### Example Application Host Configuration

Source: https://front-hub.rdstation.com.br/docs/config

A practical example of configuring routes and files for a blog comments micro frontend.

```javascript
module.exports = {  
  metadata: {  
    applicationHosts: [  
      {  
        code: 'my-blog',  
        routes: [  
          {  
            path: '/:category/:post-name',  
            files: [  
              'http://my-git-service.com/my-blog/controllers/posts.js',  
              'http://my-git-service.com/my-blog/views/posts.html',  
            ],  
          },  
          {  
            path: '/pages/:id',  
            files: [  
              'http://my-git-service.com/my-blog/controllers/pages.js',  
              'http://my-git-service.com/my-blog/views/pages.html',  
            ],  
          },  
          {  
            path: '/about/projects',  
            files: ['http://my-git-service.com/my-blog/public/project.html'],  
          },  
        ],  
      },  
    ],  
  },  
}  

```

--------------------------------

### Example .env.development file

Source: https://front-hub.rdstation.com.br/docs/environments

Defines a custom environment variable with the REACT_APP_ prefix for the development environment. This file is used when the app is started locally with 'yarn start'.

```plaintext
REACT_APP_NOT_SECRET_VALUE=qwer  

```

--------------------------------

### Example: create package my-microfrontend

Source: https://front-hub.rdstation.com.br/docs/cli

Example workflow: change to the monorepo directory and run the create package command to generate a new package with all FrontHub configuration inside the packages directory.

```bash
cd my-monorepo  
front-hub create package my-microfrontend  
```

```text
my-monorepo/  
  packages/  
    my-microfrontend/  
```

--------------------------------

### Start Fake repository

Source: https://front-hub.rdstation.com.br/docs/fake-repository

Run this command in the Micro Frontend root directory to start a local instance ready for consumption by an Application Host, typically on port 3001.

```bash
yarn fake repository  
```

--------------------------------

### Basic Router setup with react-router-dom

Source: https://front-hub.rdstation.com.br/docs/routers

Shows a basic Router configuration with a User route, where all route props (match, location, history) are available to the User component. This example uses the history object directly.

```react
import React from 'react'  
import ReactDOM from 'react-dom'  
import { Router, Route } from 'react-router-dom'  
import { useHistory } from '@resultadosdigitais/front-hub/react'  
  
// All route props (match, location and history) are available to User  
function User(props) {  
  return <h1>Hello {props.match.params.username}!</h1>  
}  
  
ReactDOM.render(  
  <Router history={history}>  
    <Route path="/user/:username" component={User} />  
  </Router>,  
  node,  
)  

```

--------------------------------

### Setup test file for Create React App (setupTests.js)

Source: https://front-hub.rdstation.com.br/docs/testing

Required for micro frontends not created with front-hub-cli when using Create React App. Calls the setup method from FrontHub with the front-hub config.

```javascript
import '@testing-library/jest-dom/extend-expect'  
import { setup } from '@resultadosdigitais/front-hub/react/jest'  
import 'jest-styled-components'  
import fronthubConfig from '../front-hub.config'  
  
setup(fronthubConfig)  

```

--------------------------------

### Install FrontHub CLI via script

Source: https://front-hub.rdstation.com.br/docs/troubleshooting

Run this script to install the FrontHub CLI globally after setting up NVM to resolve permission issues.

```bash
curl -L https://front-hub.rdstation.com.br/install.sh | sudo bash  
```

--------------------------------

### Initialize package with yarn

Source: https://front-hub.rdstation.com.br/docs/lib-getting-started

Starts the package configuration using yarn init.

```bash
yarn init
```

--------------------------------

### Install react-i18next

Source: https://front-hub.rdstation.com.br/docs/localization

Command to install the required dependency for React applications.

```bash
yarn add react-i18next
```

--------------------------------

### CLI commands to initialize micro frontends

Source: https://front-hub.rdstation.com.br/docs/how-it-works

Run these commands to create two independent micro frontend projects named `app1` and `app2`. The generated projects are ready to use, and you can start the development server with `yarn start`.

```bash
front-hub init app1  
front-hub init app2  
```

--------------------------------

### Install Auto dependencies

Source: https://front-hub.rdstation.com.br/docs/lib-releases

Install the required development dependencies for the release automation workflow.

```bash
yarn add --dev auto @auto-it/first-time-contributor
```

--------------------------------

### Install Prettier and config

Source: https://front-hub.rdstation.com.br/docs/lib-getting-started

Installs Prettier and the @resultadosdigitais/prettier-config as dev dependencies.

```bash
yarn add --dev prettier @resultadosdigitais/prettier-config
```

--------------------------------

### Run front-hub without arguments to see help

Source: https://front-hub.rdstation.com.br/docs/cli

Run `front-hub` with no arguments to display the CLI help. This is the global installation usage.

```bash
front-hub  
```

--------------------------------

### Initialize a new FrontHub project

Source: https://front-hub.rdstation.com.br/docs/creating-from-scratch

Use this command to create a new FrontHub application from scratch. Ensure the front-hub-cli is installed before running.

```bash
 front-hub init my-first-project  
```

--------------------------------

### Install react-router-dom

Source: https://front-hub.rdstation.com.br/docs/routers

Adds the react-router-dom package to your micro frontend project. This is the first step to start using routing in FrontHub.

```bash
yarn add react-router-dom  

```

--------------------------------

### Define collection and pagination headers in users.js

Source: https://front-hub.rdstation.com.br/docs/fake-api

This example shows how to define a user collection schema and implement a GET handler that reads pagination request headers and sets corresponding response headers.

```javascript
export const collection = () => {  
  return {  
    name: 'users',  
    schema: {  
      type: 'array',  
      minItems: 10,  
      maxItems: 100,  
      items: {  
        type: 'object',  
        properties: {  
          name: {  
            type: 'string',  
            faker: 'internet.userName',  
          },  
          email: {  
            type: 'string',  
            faker: 'internet.email',  
          },  
        },  
        required: ['user', 'email'],  
      },  
    },  
  }  
}  
  
export const get = (req, res, _, { db }) => {  
  const result = db.get('users')  
  const entities = result.value()  
  
  // Get info from request headers  
  const page = req.headers['pagination-page'] || 1  
  const perPage = req.headers['pagination-per-page'] || 10  
  
  const startIndex = (page - 1) * perPage  
  const endIndex = startIndex + perPage  
  const users = entities.slice(startIndex, endIndex)  
  const size = users.length  
  
  // Set info into response headers  
  res.setHeader('pagination-page', page)  
  res.setHeader('pagination-per-page', perPage)  
  res.setHeader('pagination-page-size', size)  
  res.setHeader('pagination-total', entities.length)  
  
  // Expose all new headers  
  res.setHeader('Access-Control-Expose-Headers', '*')  
  
  res.json({ users })  
}  
```

--------------------------------

### Example .env.staging file

Source: https://front-hub.rdstation.com.br/docs/environments

Defines a custom environment variable with the REACT_APP_ prefix for the staging environment.

```plaintext
REACT_APP_NOT_SECRET_VALUE=asdf  

```

--------------------------------

### Configure multiple micro frontends in front-hub.config.js

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of registering multiple versions of the same micro frontend in the configuration file.

```javascript
mfeDependencies: ['sidebar@1.0.1', 'sidebar@1.0.2']  
```

--------------------------------

### Start Fake repository with custom port

Source: https://front-hub.rdstation.com.br/docs/fake-repository

Use the -p flag to specify a custom port number for the Fake repository instance.

```bash
yarn fake repository -p 3002  
```

--------------------------------

### Example .env.production file

Source: https://front-hub.rdstation.com.br/docs/environments

Defines a custom environment variable with the REACT_APP_ prefix for the production environment.

```plaintext
REACT_APP_NOT_SECRET_VALUE=zxcv  

```

--------------------------------

### Run front-hub via npx

Source: https://front-hub.rdstation.com.br/docs/cli

Run the CLI using npx, which comes with npm 5.2+ and higher. This avoids a global install.

```bash
npx @resultadosdigitais/front-hub-cli  
```

--------------------------------

### Locale JSON Files

Source: https://front-hub.rdstation.com.br/docs/localization

Example content for English and Portuguese locale files.

```json
{
  "pet": {
    "salute": "Hello",
    "apples": "I have {{ apples, number }} apples"
  }
}
```

```json
{
  "pet": {
    "salute": "Olá",
    "apples": "Eu tenho {{ apples, number }} maçãs"
  }
}
```

--------------------------------

### Grants property example

Source: https://front-hub.rdstation.com.br/docs/authorization

Shows the grants object structure, assigning permissions to roles. Includes wildcard, negation, and inheritance examples.

```javascript
  permissions: {  
    article: ['read', 'create', 'edit', 'delete']  
  },  
  grants: {  
    guest: ['article:read'],  
    writer: ['article:*', 'not article:delete', 'password:forgot'],  
    admin: ['extends writer', 'article:delete', 'user:*', 'password:*']  
  }  

```

--------------------------------

### Fetch paginated data from client

Source: https://front-hub.rdstation.com.br/docs/fake-api

This example demonstrates how to create an API client and parse the pagination headers returned by the Fake API.

```javascript
import { client } from '@resultadosdigitais/front-hub/http'  
  
const api = () => {  
  // Change 'service-name' with your Fake API name  
  return client.create('service-name')  
}  
  
const parseHeaders = headers => ({  
  getHeaderInt: key => {  
    const result = parseInt(headers[key], 10)  
    return isNaN(result) ? 0 : result  
  },  
})  
  
const getUsers = async () => {  
  const { data, headers } = await api().get('/users')  
  const { getHeaderInt } = parseHeaders(headers)  
  
  const pagination = {  
    page: getHeaderInt('pagination-page'),  
    perPage: getHeaderInt('pagination-per-page'),  
    pageSize: getHeaderInt('pagination-page-size'),  
    total: getHeaderInt('pagination-total'),  
  }  
  
  return { users: data.users, pagination }  
}  
```

--------------------------------

### Test microfrontend rendering

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of using the selector to verify that a microfrontend is rendered and contains the expected props and priority.

```javascript
it('renders with mfe correctly', async () => {  
  const { getMicrofrontendByName } = renderWithFrontHub(<YourComponent />)  
  const mfe = getMicrofrontendByName('the_microfrontend_name')  
  
  expect(mfe).toBeInTheDocument()  
  expect(mfe.props).toEqual({ your: 'prop' })  
  expect(mfe.priority).toEqual('medium')  
})
```

--------------------------------

### Connect with intlFormatting addon in src/index.js

Source: https://front-hub.rdstation.com.br/docs/connect

Example of configuring the intlFormatting addon within the Connect function. Note that this process is deprecated.

```javascript
import { Connect } from '@resultadosdigitais/front-hub/react'  
import { Theme, Reset } from '@resultadosdigitais/tangram-components'  
  
import App from './App'  
  
export default Connect(  
  props => (  
    <Theme>  
      <Reset />  
      <App {...props} />  
    </Theme>  
  ),  
  {  
    intlFormatting: (config, context) => {  
      return (value, format, lng) => {  
        // format and then return  
        return value  
      }  
    },  
  },  
)  
```

--------------------------------

### Configure version mismatch in front-hub.config.js

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of a configuration where the registered version does not match the requested version.

```javascript
mfeDependencies: ['sidebar@1.0.1']  
```

--------------------------------

### Configure multiple dependencies for ambiguous resolution

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of registering multiple versions without a latest tag, causing ambiguity when no version is specified.

```javascript
mfeDependencies: ['sidebar@1.0.1', 'sidebar@1.0.2', 'sidebar@1.0.3']  
```

--------------------------------

### Basic Connect usage in src/index.js

Source: https://front-hub.rdstation.com.br/docs/connect

A basic example of using the Connect function to wrap an application with theme and reset components.

```javascript
import { Connect } from '@resultadosdigitais/front-hub/react'  
import { Theme, Reset } from '@resultadosdigitais/tangram-components'  
  
import App from './App'  
  
export default Connect(props => (  
  <Theme>  
    <Reset />  
    <App {...props} />  
  </Theme>  
))  
```

--------------------------------

### SPA routing configuration with React Router

Source: https://front-hub.rdstation.com.br/docs/routers

Example of SPA routing configuration for a microfrontend with routes for users, new user, user detail, and user groups.

```jsx
<Router history={history}>  
  <Switch>  
    <Route path={'/users/'} exact>  
      <UserListPage />  
    </Route>  
    <Route path={'/users/new'} exact>  
      <UserFormPage />  
    </Route>  
    <Route path={'/users/:userId'} exact>  
      <UserDetailPage />  
    </Route>  
    <Route path={'/users/:userId/groups'} exact>  
      <UserGroupPage />  
    </Route>  
  </Switch>  
</Router>  

```

--------------------------------

### Basic endpoint example in healthcheck.js

Source: https://front-hub.rdstation.com.br/docs/fake-api

A simple GET endpoint that returns a JSON response with database and redis status. This is a basic example of an endpoint.

```javascript
export const get = (req, res) => {  
  res.json({  
    database: 'ok',  
    redis: 'ok',  
  })  
}  

```

--------------------------------

### Create project directory

Source: https://front-hub.rdstation.com.br/docs/lib-getting-started

Initializes a new project by creating and entering a directory named my-lib.

```bash
mkdir my-lib
cd my-lib
```

--------------------------------

### Install FrontHub dependencies for CRA not ejected

Source: https://front-hub.rdstation.com.br/docs/migrating-from-cra

Run these commands in your project root to install the FrontHub core and commons packages.

```bash
  yarn add @resultadosdigitais/front-hub @resultadosdigitais/front-hub-commons  
```

--------------------------------

### front-hub init command syntax

Source: https://front-hub.rdstation.com.br/docs/cli

Initializes a FrontHub project in a blank git repository. Use the -y/--yes option to run with default config. For extra configurations, use front-hub.config.js.

```bash
front-hub init [options] <project-directory>  
```

--------------------------------

### Install react-app-rewired@1.6.2 for react-scripts-ts with Webpack 3

Source: https://front-hub.rdstation.com.br/docs/migrating-from-cra

Alternative react-app-rewired version when using react-scripts-ts and Webpack 3, installed as a development dependency.

```bash
yarn add react-app-rewired@1.6.2 -D  
```

--------------------------------

### Install react-app-rewired for CRA 2.x with Webpack 4

Source: https://front-hub.rdstation.com.br/docs/migrating-from-cra

Installs react-app-rewired as a dev dependency for create-react-app 2.x applications with Webpack 4, enabling access to webpack plugins in non-ejected CRA apps.

```bash
yarn add react-app-rewired -D  
```

--------------------------------

### Initialize and use the API client in React

Source: https://front-hub.rdstation.com.br/docs/fake-api

Demonstrates creating an API client instance on demand and using it within a React component's useEffect hook to fetch data.

```javascript
import { useState, useEffect } from 'react'  
import { client } from '@resultadosdigitais/front-hub/http'  
  
/**  
 * Put the creation of the client in a function or class  
 * so that it is created on demand  
 */  
const api = () => {  
  // Returns an axios instance  
  return client.create('service-name')  
}  
  
const App = () => {  
  // Give preference to userReducer to handle more complete request state,  
  // or use something ready-made like React Query  
  const [leads, setLeads] = useState([])  
  
  useEffect(() => {  
    api()  
      .get('/leads')  
      .then(response => {  
        setLeads(response.data)  
      })  
  }, [])  
  
  return (  
    <ul>  
      {leads.map(lead => (  
        <li key={lead.id}>{lead.name}</li>  
      ))}  
    </ul>  
  )  
}  
```

--------------------------------

### front-hub init

Source: https://front-hub.rdstation.com.br/docs/cli

Initialize a new FrontHub project in a blank git repository. This command is meant to be executed in a blank git repository; for migrating from create react app, follow the migration instructions.

```APIDOC
## front-hub init

### Description
Initialize a new FrontHub project in a blank git repository. This command is meant to be executed in a blank git repository; for migrating from create react app, follow the migration instructions.

### Usage
```
front-hub init [options] <project-directory>
```

### Options
- **-y**, **--yes** - Runs with default config
- **-h**, **--help** - Display help for command

### Notes
For extra configurations use the front-hub.config.js.

```

--------------------------------

### Configure Commons in front-hub.config.js

Source: https://front-hub.rdstation.com.br/docs/config

Specifies the name of the installed package containing common dependencies.

```javascript
module.exports = {  
  commons: {  
    name: '@resultadosdigitais/front-hub-commons',  
  },  
}  

```

--------------------------------

### Clone and initialize an existing repository

Source: https://front-hub.rdstation.com.br/docs/creating-from-scratch

Use these commands to clone an existing Git repository and initialize the FrontHub project within it.

```bash
 git clone git@github.com:YourCompany/my-first-project.git  
 cd my-first-project  
 front-hub init  
```

--------------------------------

### Custom Decimal Format

Source: https://front-hub.rdstation.com.br/docs/localization

Example of defining a custom decimal format in a locale file.

```json
{
  "price": "Price: {{value, decimal}}"
}
```

--------------------------------

### Environment folder structure for micro frontend

Source: https://front-hub.rdstation.com.br/docs/environments

Shows the required directory layout: each micro frontend must have an 'env' folder containing .env.development, .env.staging, and .env.production files. The build command must be 'build' (not 'build:prod') in package.json.

```plaintext
Inside each own MFE folder  
├── my-monorepo/  
│   ├── packages/  
│     └── my-microfrontend/  
│       └── env/  
│         └── .env.development  
│         └── .env.staging  
│         └── .env.production  
│       └── src/  

```

--------------------------------

### Use Translation in Component

Source: https://front-hub.rdstation.com.br/docs/localization

Example of importing and using the useTranslation hook within a React component.

```javascript
import React from 'react'  
import { useTranslation } from 'react-i18next'  
  
const apples = 42  
  
const Component = () => {  
  const { t } = useTranslation()  
  return (  
    <div>  
      {t('pet.salute')}!<br />  
      {t('pet.apples', { apples })}  
    </div>  
  )  
}
```

--------------------------------

### Configure the API client with Axios options

Source: https://front-hub.rdstation.com.br/docs/fake-api

Shows how to pass an optional configuration object to the client.create method, which is then applied to the underlying Axios instance.

```javascript
import { client } from '@resultadosdigitais/front-hub/http'  
  
const api = () => {  
  // The configuration object is of type AxiosRequestConfig  
  return client.create('service-name', {  
    headers: {  
      Accept: 'application/json',  
      'Content-Type': 'application/json',  
      'X-CSRF-TOKEN': 'the_token',  
    },  
  })  
}  
  
export default api  
```

--------------------------------

### front-hub create package command syntax

Source: https://front-hub.rdstation.com.br/docs/cli

Creates a package in a FrontHub project. Use -y/--yes for default config. For extra configurations, use front-hub.config.js.

```bash
front-hub create package [options] <package-directory-name> [project-directory]  
```

--------------------------------

### Implement Microfrontend component with version mismatch

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of a component call requesting a version not present in the configuration.

```jsx
<Microfrontend name="sidebar@1.0.3" />  
```

--------------------------------

### Implement Microfrontend component for missing registration

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of a Microfrontend component call that fails when the dependency is not registered.

```jsx
<Microfrontend name="sidebar@1.0.1" />  
```

--------------------------------

### Implement intlFormatting in Connect

Source: https://front-hub.rdstation.com.br/docs/localization

Registering the intlFormatting addon within the Connect function in the entrypoint file.

```javascript
import { Connect } from '@resultadosdigitais/front-hub/react'  
  
const App = () => <div>{t('price', { value: 123456.789 })}</div>  
  
export default Connect(() => <App />, {  
  intlFormatting: function (config, context) {  
    return function (value, format, lng) {  
      if (format === 'decimal') {  
        return new Intl.NumberFormat(lng, {  
          style: 'currency',  
          currency: context.user.currency,  
        }).format(value)  
      }  
      return value  
    }  
  },  
})
```

--------------------------------

### Configure repository for Fake repository

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Point the repository key to the local port where the fake repository is running. The application must be restarted after this change.

```javascript
repository: 'http://localhost:3001', // or another port that fake repository returned  
...rest_of_configs,  
```

--------------------------------

### Configure JFrog NPM Registry

Source: https://front-hub.rdstation.com.br/docs/getting-started

Run this command to configure the JFrog registry, which is required to install FrontHub modules.

```bash
bash -c "$(curl -fsSL https://front-hub.rdstation.com.br/jfrog-setup.sh)"
```

--------------------------------

### Configure repository for Staging

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Add the repository key to the front-hub.config.js file to point to the staging URL for local development.

```javascript
repository: 'https://THE_FRONT-HUB_STAGING-URL',  
...rest_of_configs,  
```

--------------------------------

### Permissions property example

Source: https://front-hub.rdstation.com.br/docs/authorization

Shows the permissions object structure, mapping a feature (article) to an array of permission kinds.

```javascript
permissions: {  
  article: ['read', 'create', 'edit', 'delete']  
}  

```

--------------------------------

### Example of enabled features array

Source: https://front-hub.rdstation.com.br/docs/feature-flag

The features function must resolve to an array containing the names of all enabled features.

```json
["whatsapp"]  
```

--------------------------------

### Implement Microfrontend component without version

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of a component call that fails to identify a specific version when multiple are registered.

```jsx
<Microfrontend name="sidebar" />  
```

--------------------------------

### front-hub fake repository command syntax

Source: https://front-hub.rdstation.com.br/docs/cli

Creates a fake FrontHub repository. Options include -p/--port (default: 3001), --paths, -pl/--parallel (default: 2), --no-cache, -d/--development, and -stg/--staging.

```bash
front-hub fake repository [options]  
```

--------------------------------

### Call multiple micro frontends in component code

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of calling different versions of a micro frontend in the component code.

```jsx
<Microfrontend name="sidebar@1.0.1" />  
  
<Microfrontend name="sidebar@1.0.3" />  
```

--------------------------------

### Fix MFE not found error in front-hub.config.js

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Example of an empty mfeDependencies array in front-hub.config.js that causes a 'not found' error.

```javascript
mfeDependencies: []  
```

--------------------------------

### Configure Events in front-hub.config.js

Source: https://front-hub.rdstation.com.br/docs/config

Sets up event listeners and emitters for communication between micro frontends.

```javascript
module.exports = {  
  events: {  
    /**  
     * Array containing all events to be listened on your micro frontend  
     */  
    listeners: [],  
    /**  
     * Array containing all events to emitted from your micro frontend  
     */  
    emitters: [],  
  },  
}  

```

--------------------------------

### Run Fake repository as development

Source: https://front-hub.rdstation.com.br/docs/fake-repository

Use the -d flag to run the Fake repository in development mode.

```bash
yarn fake repository -d  
```

--------------------------------

### Run Fake repository with custom paths

Source: https://front-hub.rdstation.com.br/docs/fake-repository

Use the --paths flag to specify custom paths outside the microfrontend folder.

```bash
yarn fake repository --paths packages/mfe-a packages/mfe-b  
```

--------------------------------

### front-hub

Source: https://front-hub.rdstation.com.br/docs/cli

Run the FrontHub CLI without arguments to display help information.

```APIDOC
## front-hub

### Description
Run the FrontHub CLI without arguments to display help information.

### Usage
```
front-hub
```

### Options
- **-V**, **--version** - Output the version number
- **-h**, **--help** - Display help for command

```

--------------------------------

### Run Fake repository with npx

Source: https://front-hub.rdstation.com.br/docs/fake-repository

Use npx to run the command from anywhere on your system, without being restricted to the project directory.

```bash
npx @resultadosdigitais/front-hub-cli fake repository --paths ~/monorepoA/packages/mfe-a ~/monorepoB/packages/mfe-b  
```

--------------------------------

### Initialize getMicrofrontendByName

Source: https://front-hub.rdstation.com.br/docs/microfrontend-component

Initialize the selector within your test component render.

```javascript
const { getMicrofrontendByName } = renderWithFrontHub(<YourComponent />)
```

--------------------------------

### Implementing a Basic Log Listener

Source: https://front-hub.rdstation.com.br/docs/instrumentation

Use the log property to listen to all logs on the Application Host.

```javascript
fronthub('instrumentation', {  
  log: function (context, next) {  
    console.log(context)  
    next()  
  },  
})  
```

--------------------------------

### Configure Auto npm plugin for jFrog

Source: https://front-hub.rdstation.com.br/docs/lib-releases

Example configuration for the npm plugin in package.json, specifically disabling setRcToken for jFrog registries.

```json
"plugins": [  
  [  
    "npm",  
    {  
      "setRcToken": false  
    }  
  ],  
]
```
Tokens:
Raw