Fake repository

The Fake repository is a tool that allows developers to run Micro Frontends locally within the Application Host context. With that, it's no longer needed to deploy in staging to test your changes.

How does it work?

The intended workflow to develop Micro Frontends is to run yarn start in the directory of your Micro Frontend. This will run your project on port 3001 with hot reload enabled. Basically, it is running a create react app under the hood. We call this development way as FrontHub stand alone.

Now, suppose you want to test your changes locally, inside the Application Host.

First, in your Micro Frontend root directory, often in the packages/micro-frontend-folder, you need to run the following command:

yarn fake repository

The FrontHub will start a Micro Frontend instance ready to be consumed for any other Application Host, often on port 3001 if it is free. You can also customize the port number, passing in the cli:

yarn fake repository -p 3002

Finally, in Application Host, you need to change the value of the repository property in the FrontHub configuration call to the address indicated in the above command output:

<script>
  fronthub('configure', {
    repository: 'http://localhost:3002',
  })
</script>

See how to integrate the Fake repository with RD Station Marketing.

info

Consider using environment variables in the Application Host to set the value of the repository property.

Using with different environments

By default, fake repository will run as production, but it is possible to run it with different environments.

-stg or –straging: to run as staging

yarn fake repository -stg

-d or –development: to run as development

yarn fake repository -d

What is the difference

This is used to allow Fronthub to consume various .env files, access environments docs for more information, and to use various client endpoints.

Using custom paths

By default, the Fake repository will run the microfrontend in the current working directory. So be sure to run the command inside the microfrontend folder.

But it is possible to run the Fake repository using custom paths outside of the microfrontend folder.

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

Using parallel builds

By default, the Fake repository runs 2 builds at the same time.

This limit applies to all microfrontends registered via --paths. It does not limit how many MFEs are watched or served — only how many yarn build processes run concurrently.

When running a single MFE, the default is usually enough. Increase parallelism when serving multiple local MFEs and you want faster initial builds or rebuilds.

Use -pl or --parallel to change the limit:

yarn fake repository --paths ../mfe-a ../mfe-b ../mfe-c --parallel 3

# OR
yarn fake repository --paths ../mfe-a ../mfe-b ../mfe-c -pl 3

Using cache

By default, the Fake repository will use cache to speed up the builds. Basically, it will only rebuild the microfrontend if there are changes in the src folder or on the front-hub.config.js file.

But it is possible to disable the cache.

yarn fake repository --no-cache

Using npx to run

With npx you can run the command anywhere in the system. Not being restricted to the project directory.

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

Using Fake repository in old projects

To use the Fake repository in projects that were created without the FrontHub CLI, or by FrontHub CLI versions lower than 5, you must include the package @resultadosdigitais/front-hub-cli as a dependency of your project and add to package.json the following entry in the "scripts" attribute:

{
  "scripts": {
    "fake": "front-hub fake"
  }
}